Learn-WebDevelopment.com home page Learn-WebDevelopment.com

Leaving So Soon Challenge

Open the project folder

In our starter files, open the index.html page from this lessons folder:

11.More-practice > 01.Leaving-so-soon

Introduction

We are almost at the end of this course. To finish off, we have some projects to put things into practice. They are not a step-by-step guide, instead, will provide a series of steps to attempt on your own. This will give you the change to really give things a try without help.

Don't worry if you get stuck along the way, the code will be provided so you have a reference if needed.

Project overview

The first project is called “Leaving So Soon”. This is what is called an exit intent popup project. The idea is when a user appears to be leaving your website, maybe by moving the mouse off the page and to the top of the browser, we can detect this and show a popup offer.

cursor image

You may have seen similar examples before, they often have a discount code, email signup section, or an offer to keep you from leaving the site.

The starter files have all the HTML content set up:

<body>
  <h1>Leaving so soon?</h1>

  <div id="exit-popup">
    <div class="exit-content">
      <span class="close">&#10005;</span>
      <h3>Leaving so soon?</h3>
      <p>Drop your email to get a special discount code:</p>
      <form>
        <input type="email" />
        <button type="submit">Send</button>
      </form>
    </div>
  </div>

  <script src="script.js"></script>
</body>

It also includes the styling in the styles.css file, and an empty JavaScript file to work in. If you open the project in the browser you will notice we only see the heading.

Looking at the styles.css, this is an important section:

#exit-popup {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s;
}

This is the section for the popup, with the current display value of none. This means it is not currently displayed on the screen, and we can toggle this with JavaScript.

Project steps

You can go about making this any way you want to, or here are some steps to follow:

  1. Listen for a mouseout event on the document. This will be triggered when the mouse leaves the browsers visible area.
  2. This event should trigger a function which will toggle the popup’s display type to be “flex”. Limit this to only happen when the mouse is near the top of the browser (hint: look at the event object for the mouse position).
  3. Add another event listener to respond to a click to close the popup from view, again by toggling the popup’s display type.
  4. BONUS: Do not let the popup trigger for the first three seconds after the page loads (hint: setTimeout)
  5. BONUS: Deactivate the popup from appearing more than once (hint: removeEventListener)

Give this a try, if you get stuck or want to compare to a finished solution, this is available in the next lesson. Good luck!

Error HandlingLeaving So Soon Solution