Create a Snackbar for Notification Prompts& Add the Ability to Copy and Paste – with CSS and Javascript

Published: March 28, 2023

Introduction: A snackbar is a simple and effective way to display brief messages or notifications to users. In this article, we’ll explore a code snippet that demonstrates how to create a snackbar using CSS and JavaScript. We’ll break down the CSS code and explain its purpose in simple terms, followed by an explanation of how the snackbar can be used in conjunction with the provided JavaScript function.

Creating the Snackbar with CSS: The CSS code defines the styling and behavior of the snackbar. It positions the snackbar at the bottom and in the middle of the screen using fixed positioning. The code sets the snackbar’s width, background color, text color, border radius, padding, and box shadow to create an appealing visual appearance. Additionally, animations are included to fade the snackbar in and out, giving it a smooth transition effect.

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden;
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #13a761; /* Black background color */
  box-shadow: 0em 0.5em 2em em rgba(0,0,0,0.3);
  color: white; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 100px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 99999; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 130px; /* 30px from the bottom */
}


/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 130px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 130px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 130px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 130px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

Using the Snackbar with JavaScript: The provided JavaScript function, CopyToClipboard(), demonstrates how the snackbar can be used in conjunction with an action, such as copying text to the clipboard. After performing the desired action, the function shows the snackbar by adding the “show” class to the snackbar element. This triggers the visibility of the snackbar, making it visible to the user. After 3 seconds, the “show” class is removed, causing the snackbar to fade out and disappear.

function CopyToClipboard() {
  var selectText = document.getElementById('text').innerText;
  var input = document.createElement('textarea');
  input.value = selectText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
   // Get the snackbar DIV
  var x = document.getElementById("snackbar");

  // Add the "show" class to DIV
  x.className = "show";

  // After 3 seconds, remove the show class from DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

Conclusion: By combining CSS and JavaScript, you can easily create a snackbar to display notifications or messages to users. The CSS code defines the snackbar’s appearance and animation, while the JavaScript function demonstrates how the snackbar can be triggered and displayed in response to an action. Whether it’s copying text, submitting a form, or performing any other user interaction, incorporating a snackbar can provide valuable feedback and enhance the user experience on your website or web application.