Challenge #23

Brief

In this project, we're going to create a Toaster.


You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

Users should be able to:

  • When the page first loads, the toaster should be hidden. (Add a class of `collapsed` to the `<div class="toaster">` on line 15.)
  • If the user moves their mouse toward the top of the page (exit intent) display the pop-up. (Remove the `collapsed` class on line 15.)
  • If the user has been on the site for more than 15 seconds, display the pop-up.
  • Clicking on the close button, makes the toaster disappear.

Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from James.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: HTML, CSS, images, and fonts.
  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.
  3. Open the project's README.md file. It has additional information on how the project is structured.
  4. Customize your project/file architecture to your liking.
  5. Happy coding!
  6. Once you're finished, share your work using #adventofjs

Taking your Project to the Next Level

  • Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.
  • Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, consider purchasing the Advent of CSS solutions, where Amy explains exactly how to build this.
  • Add animation as the information loads, exits, and updates.
  • Add form validation
  • Show and hide the bottom summary bar.
  • Add the ability to edit an expense

FAQs

  • Can I use libraries/frameworks on these projects? 
    • Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
  • Oh no! I'm stuck! 
  • Can I use this project in my portfolio? 
    • Sure! But, be honest about the work that you did