Leaving So Soon Solution

Recap

Hopefully you had success re-creating the Leaving so soon challenge!

If not, don't worry. There are multiple ways to complete this project, and we have a solution below as a reference if needed.

Solution

// script.js

function leftWindow(e) {
    // clientY is the vertical position of the mouse
    // check the value is less than 20px from the top
    if (e.clientY < 20) {
        document.querySelector("#exit-popup").style.display = "flex";
        document.removeEventListener("mouseout", leftWindow);
    }
}
// dont add event listener until 3 seconds have passed:
setTimeout(function () {
    document.addEventListener("mouseout", leftWindow);
}, 3000);

// close popup when close button clicked
function closePopup() {
    document.querySelector("#exit-popup").style.display = "none";
}
const closeBtn = document.querySelector("span");
closeBtn.addEventListener("click", closePopup);

• The leftWindow function will check if the mouse position (clientY) is within 20px of the top of the viewport. If it is, we remove the mouseout event and show the popup using CSS.
• This function is only enabled after 3 seconds have passed, we do this by using a setTimeout.
• We then respond to a click on the close button to hide the popup. Again using the CSS sisplay property.

Congratulations!

We hope you have enjoyed this challenge and gained some valuable practice!