• Theory
  • Theory

First program: “Don’t be shy”

Muffin really liked the way you completed the assignment for the candy store. He is in a hurry to assign you a new task. This time you will need to write code for a handmade toy store. Here are the exact assignment specifications from the Boss.

Meow! You have been asked to program the user interaction.

The markup contains a popup (popup class).

When the user clicks on the “Display details” button (button-show class), it should show the window on the page. The popup--open class should appear for the popup.

If the user clicks on the “X” in the popup body (with the button-hide class), then the window should disappear from the page. To do this, you need to delete the popup--open class from the popup.

In addition, if the window is on the page and the user presses the ESC key, the popup should also disappear. The only action that should trigger the window to be closed is pressing this key. Pressing any other keys should not affect the position on the popup window.

And do not forget that the “Show details” button has been coded as a link. Don’t forget to disable this link from working.

I look forward to the finished project!

When you are ready, press Boss, here’s your program! to show what you have done to Muffin.

  • index.html
HTML
HTML

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%