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:

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:

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:

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:

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 🗨.

Comments

[Vaibhav Khulbe]

Great work!

[Nick Taylor]

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

Toast Messages

Nick Taylor (he/him) ・ Oct 24 '19 ・ 1 min read

#codepen #html

[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.

[Instinct]

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

[tsanak]

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

[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)

[tsanak]

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