tarekul/buttons-pop-up

buttons-pop-up

In this exercise, you are asked to create a couple of buttons that, when clicked, trigger the display of popups. We want to not only see your coding skills, but also your eye for design and experience. Follow the instructions below and feel free to explain what you're doing or ask questions as you go.

1. Create two buttons centered on the page, next to each other. One should be for canceling and the other for accepting, so use appropriate background colors. The buttons should have rounded borders and should brighten up a bit with easing on hover.

2. Create two popups, one positioned a bit off from the bottom right corner of the page and the other from the top right. The popups should have rounded corners, a slightly thick border, and some padding. One popup should contain the text "Thank you!" while the other should contain the text "Come back soon."

3. Now, position the two popups off screen to the right using CSS.

4. We will now complete the exercise. Add a click handler to each button. For the first button, when clicked we want to slide the "Come back soon" popup from the right into view. For the second button, when clicked we want to slide the "Thank you!" popup from the right into view. The popups should slide back out of view 8 seconds after coming into view or when clicking anywhere on the page except the buttons and the popups.

5. BONUS: Make this work for touch devices!