• 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 page’s response to user actions.

The markup contains a popup (popup class).

When the user clicks on the “View 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 (the button with the button-hide class), then the window should disappear from the page. To do this, you need to remove 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 key press that should trigger the window to be closed is pressing this key. Pressing any other keys should not affect the open state of the popup window.

And do not forget that the “View details” button has been coded as a link. Don’t forget to prevent the default navigation action of this link.

I look forward to the finished project!

When you are ready, click Hey 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%