DEV Community

Cover image for Create a Simple 0-dependency Toast
tsanak
tsanak

Posted on

Create a Simple 0-dependency Toast

What is a Toast?

Toast notification is popup type of message notification that auto expires. It usually carries small amount of information for the user and it can be used for feedback to the user's action.

An example of a Toast is the following:

Alt Text

The user clicks on the Copy to Clipboard button and the Toast:

  1. informs the user that the text was copied to his/her clipboard
  2. disappears after a short amount of time (e.g. 2 seconds)

How to create it

Sneak peek:

Alt Text

I will begin with the structure of the toast

<div id="toast"></div>

Next step is to add some css to make it beautiful

#toast {
  position: fixed;
  bottom: 20px;
  width: 100%;
  max-width: 300px;
  background-color: #213cfd;
  background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  user-select: none;
}

How it looks now:

Alt Text

Slide animation

#toast {
  bottom: -50px;
  -webkit-transition: bottom 350ms;
  -moz-transition: bottom 350ms;
  -o-transition: bottom 350ms;
  -ms-transition: bottom 350ms;
  transition: bottom 350ms;
}

#toast.active {
  bottom: 20px;
}

The above css code accomplishes the slide animation. The trick is to use the transition css property on the bottom and animate the change for 350ms.

Now I will add a little Javascript code to toggle the .active class on the #toast element.

document.addEventListener("DOMContentLoaded", () => {
  let hasTime = null;
  /* When the user clicks on a button => show the Toast */
  document.querySelector('#btn-show-toast').addEventListener('click', (e) => {
    const toaster = document.querySelector('#toast');
    /* Add text to the Toast */
    toaster.innerText = "✔️ This is a toast! 👏";
    /* 
    by adding the .active class the Toast 
    will slide up to the user's screen 
    */
    toaster.classList.add('active');
    if(hasTime != null) {
      clearTimeout(hasTime);
    }
    /* After two seconds, close the Toast (slide-down) */
    hasTime = setTimeout(function() {
      toaster.classList.remove('active');
    }, 2000);
  });
});

In order for the slide animation to be usable in this demo, I will need to insert a button in the html code, before the Toast div.

  <button id="btn-show-toast" type="button">👀 Show Toast</button>
  <div id="toast"></div>

Final result:

Alt Text

Demo with all the code

Wrapping up

🎉 Thank you for reading through all the post! 🎉

I hope you found something useful in it.

If you have any questions or feedback, let me know in the comments 🗨.

Latest comments (7)

Collapse
 
instinct profile image
Instinct

Hey man, nicely done!
I want some help with my project.
Would you mind if we get connected on twitter?

Collapse
 
tsanak profile image
tsanak

Thanks a lot!
I can't promise anything but sure, my twitter is @george_tsanak

Collapse
 
instinct profile image
Instinct

hey, but you seem to have disabled messages.
However I just followed you on twitter.
You can also mention the platform you are comfortable with (facebook, instagram, twitter, telegram, anything)

Thread Thread
 
tsanak profile image
tsanak

First time using twitter 😅. Just send you a message.

Collapse
 
nickytonline profile image
Nick Taylor

Nice work! We should have a “Toast Off“ LOL. Here’s mine from a little while back.

Collapse
 
tsanak profile image
tsanak

Thank you for the comment!

We should have a “Toast Off“

😂

Your post was nice too! Right after posting this one, I realized that I should probably create a small Toast class (Similar to your approach) and I am in the process of building that one.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Great work!