Building Dynamic Snackbar Notifications with Style and Simplicity

Introduction

Snackbars are an excellent way to provide simple, informative feedback to users on actions performed within your application. They temporarily display a small message at the bottom of the screen, providing unobtrusive notifications that don't interrupt the user's workflow. In this step-by-step guide, we will build a dynamic snackbar notification component that you can easily integrate and customize in your web projects. Let's dive in!

HTML Structure

We will start by creating the HTML markup for our snackbar. The structure is simple, containing a container for the snackbar and a button to trigger it. Let's see what the HTML looks like:

      <div class="snackbar-container">
        <!-- Snackbar to display notifications -->
        <div id="snackbar" class="snackbar">This is a notification!</div>
        <!-- Button to trigger the Snackbar -->
        <button onclick="showSnackbar()" class="snackbar-button">Show Notification</button>
      </div>
      

The outermost <div> is a container that positions the snackbar and the button within the page. The snackbar itself is a <div> with the id "snackbar". The button, when clicked, will call the showSnackbar() function to display the snackbar notification.

Styling the Snackbar

Next, we will style the snackbar to make it visually appealing. Our snackbar needs to be initially hidden and should animate into view when activated. We will use a combination of CSS transitions and animations to achieve this effect.

      .snackbar-container {
        position: relative;
        margin: auto;
        width: fit-content;
        top: 50px;
      }

      .snackbar {
        visibility: hidden;
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        font-size: 17px;
      }

      .snackbar.show {
        visibility: visible;
        animation: fadeInOut 3.5s;
      }

      @keyframes fadeInOut {
        0%, 100% { opacity: 0; }
        10%, 90% { opacity: 1; }
      }

      .snackbar-button {
        padding: 10px 20px;
        border: none;
        background-color: #4CAF50;
        color: white;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
      }

      .snackbar-button:hover {
        background-color: #45a049;
      }
      

Let's break down each part:

• Container Styling: Within the .snackbar-container, we center align our snackbar using relative positioning and a margin of auto. The top: 50px; value places it appropriately on the page.
• Snackbar Base: The initial styling of the snackbar, defined in .snackbar, keeps it hidden with visibility: hidden;. We add a background color, text color, padding, and similar styling attributes to ensure it looks nice when visible. Importantly, we use position: fixed; and z-index: 1; to make sure it appears above other elements, and center it horizontally with left: 50%; and transform: translateX(-50%);.
• Active Snackbar: With the .snackbar.show class, we change the visibility to visible and apply an animation named fadeInOut to smoothly transition the snackbar in and out of view. The animation, defined in the @keyframes at-rule, adjusts opacity to create the fade effect.
• Button Styling: Our .snackbar-button makes use of padding for a larger clickable area, background color for visibility, and rounds off the corners with a border radius. When hovering over the button, the background color darkens slightly to provide interactive feedback.

JavaScript Functionality

Now that we have the HTML and CSS set up, we need to add JavaScript to handle the display logic. This is accomplished with a simple function that will be triggered when our button is clicked.

      function showSnackbar() {
        let snackbar = document.getElementById('snackbar');
        // Add 'show' class to display the snackbar
        snackbar.className = 'snackbar show';
        // Remove 'show' class after 3 seconds to hide the snackbar
        setTimeout(() => { snackbar.className = 'snackbar'; }, 3000);
      }
      

The showSnackbar() function works as follows:

• We first select the snackbar element using its ID, snackbar.
• The show class is added to the snackbar's class list, making it visible due to the CSS rules defined previously.
• We use setTimeout() to automatically remove the show class after 3 seconds, effectively hiding the snackbar. This creates the auto-dismiss effect commonly associated with snackbars, keeping the notification brief and in the background.

Conclusion

And there you have it! With just a bit of HTML, CSS, and JavaScript, you've created a fully functional, dynamic snackbar notification component. You can easily customize this by changing colors, sizes, and display durations to fit your application's design. Whether you're notifying users about successful form submissions or other actions, snackbars provide a seamless, advantageous way to communicate feedback without disrupting the user experience.

Whole code

<div class="snackbar-container">
  <!-- Snackbar to display notifications -->
  <div id="snackbar" class="snackbar">This is a notification!</div>
  <!-- Button to trigger the Snackbar -->
  <button onclick="showSnackbar()" class="snackbar-button">Show Notification</button>
</div>


<script>
function showSnackbar() {
  let snackbar = document.getElementById('snackbar');
  // Add 'show' class to display the snackbar
  snackbar.className = 'snackbar show';
  // Remove 'show' class after 3 seconds to hide the snackbar
  setTimeout(() => { snackbar.className = 'snackbar'; }, 3000);
}
</script>

<style>
.snackbar-container {
  position: relative;
  margin: auto;
  width: fit-content;
  top: 50px;
}

.snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  font-size: 17px;
}

.snackbar.show {
  visibility: visible;
  animation: fadeInOut 3.5s;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

.snackbar-button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.snackbar-button:hover {
  background-color: #45a049;
}
</style>