Simple tutorial to create SnackBar Notification using vanilla JavaScript

A Snackbar/Toast notification UI component provides visual feedback to the user informing about some event without affecting the user’s experience. You may have always wondered how a snackbar/toast notification works or how to custom create snackbar notification bar from scratch according to one’s need. It is also one of the famous questions interviews generally ask frontend candidates to implement in order to analyze their skills.

In this article, we would explore a simple way to create a snackbar/toast notification with an easy explanation of each step.

Things we need to setup

Before we jump directly to the tutorial, we need to set up the files structure and add some boiler code,

HTML Markup

Let’s start with the HTML markup for the snackbar.

<button class="btn">Click me!</button>
<div class="snackbar">
   <div class="snackbar-content">This is snackbar</div>
</div>

In the above HTML markup code, if you notice we are using three components,

First, we have a simple button, when clicked triggers snackbar to appear. Then we have snackbar container in which we display our message. And finally, we have snackbar content in which our message goes!

To keep things simple and precise, I am only displaying a short message.

Also read, 10 Killer Web Applications to Boost Your Productivity

CSS Styles

First, we add some style to make our snackbar look nice and pretty!

.snackbar {
  position: fixed;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 0);
  background-color: #323232;
  padding: 15px 25px;
  color: #fff;
  width: 250px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.25s, opacity 0.25s;
}

Now lets us crack down on what we are doing here, In our snackbar container we use position properties to make snackbar at the center bottom of the screen for a better aesthetic. We also set the opacity to 0 and visibility to hidden, so that only when the user clicks on the button, the snackbar appears!

Lastly, we use transition property to animate when opacity and visibility properties change which makes the UI experience better.

.snackbar-content{
  display:flex;
  justify-content: center;
  align-items: center;
}

In snackbar content, we use flex property to center align the message respectively with snackbar container.

.show-snackbar {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.25s;
}

Finally, we will add another class that has an opacity property set to 1 and visibility to visible. In this class also we will have transition property so that when opacity and visibility properties changes, the user experience gets better.

Also read, 15 Useful GitHub Repositories Every Developer Should Bookmark

JavaScript Code

In the final stage, after setting up HTML and attaching styles to it, we would be using small vanilla JavaScript (we are not using any third-party libraries) code so that our snackbar notification works.

let btn = document.querySelector(".btn");
let snack = document.querySelector(".snackbar");

btn.addEventListener("click", snackBarEvent);

function snackBarEvent() {
  snack.classList.add("show-snackbar");
  setTimeout(() => {
    snack.classList.remove("show-snackbar");
  }, 3000)
}

If you look into the above code we are basically setting up 3 things,

First, we are saving the reference of button and snackbar components to respective variables
Then we are attaching the click event listener to the btn variable.
Finally, we are attaching a function that gets called whenever users click on the button

In order for the code to work, first, we are trying to get the reference of button components and snackbar container components using document.queryselector('') method where we pass respective components classes .btn and .snackbar and then save it to variables.

Note:- Try to name the components using unique classes to avoid any errors!

Then we will add a click event listener method on the button components using addEventListener method and pass a function called snackBarEvent which gets called whenever users click on the button component.

Whenever the snackBarEvent function gets triggered, we would add another class called show-snackbar which would override the default snackbar class opacity and visibility property and set the opacity to 1 and visibility to visible, thus the user can see our snackbar now.

Lastly, we use, setTimeout function which will remove the show-snackbar class from the snackbar components after exactly three seconds and restore the default value of opacity to 0 and visibility style property to hidden. Thus our snackbar components will disappear!

Also read, Implement Pixel Art grid using HTML, CSS and JavaScript | The DOM Challenge

Demo

Also read, Implement Star Rating Widget using HTML, CSS and JavaScript | The DOM Challenge

Final Words

Snackbar or toast components are very popular UI components that enhance the UI experience largely instead of just displaying a boring alert dialog box. I tried to keep the tutorial as simple and easy as possible, you can modify the color, position, and message or increase or decrease the time when you want to snackbar to disappear.

I hope you liked my article, if you did do share it more with your friends, family, and colleagues. Also, check out my other article on various topics like Javascript, React, Java, and Data Structure. Bookmark our website to get read more exciting tutorials!!