15. JS: "Thank you" pop up - Gr0mi4/Hello-World GitHub Wiki

Create a new component article/components/popup.

1. The popup appears only on the article page, when you scroll to the very bottom. Once the footer's top becomes visible in the viewport – the popup should appear from the viewport bottom with a transition.

To implement transitions, see this hint:

Popup must have position: fixed. By default, the popup is under the viewport at the bottom, hidden by CSS transform: translateY(...).

You should create one additional CSS class (modifier) called "visible" or a similar name. When this class is added to the root element – popup slides in from the viewport bottom. When you remove the class name "visible" – it slides out of the viewport back to the initial state.

2. The popup displays a message: "Thank you for reading. Do you like it?" and has 2 buttons: YES, NO.

3. When you click NO –> the popup displays only another message on a red background: "We're sorry to hear that." And in 1-2 seconds the popup hides.

4. When you click YES -> the popup displays a message "Would you like to subscribe to our newsletter?" with a form. The form contains only 1 input field and 1 submit button.

5. When you click the "Subscribe" button, the popup displays a giant message (same style as in p.3) "Thank You!". And in 1-2 seconds the popup hides.

6. Once you did an interaction with the popup and it's closed (hidden) – it should never appear again (unless you refresh the page).

• Must be in a separate file article/components/popup/popup.js
• Include the content of popup.js file into script tag in popup.pug at the very end
• The content of the popup.js must follow Pattern Module
• Don't use vars.
• Use arrow-functions for the callbacks
• Component should have init() method where you subscribe to the scroll event.