Simple Toast Message In Javascript | Toast Message Html Css Javascript

 <div class="container">  
  <button class="success" data-message="👊 You got this, kid! 👊">Submit</button>  
  <button class="warning">Delete</button>  
  <button class="info">Agree to Terms</button>  
 </div>  

There is all the HTML code for the Toast Message In Javascript. Now, you can see an output with a Toast Message In Javascript then we write javascript for the Toast Message In Javascript.

output

CSS code

 *, *::before, *::after {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
  font-family: system-ui, sans-serif;  
 }  
 /* Prep code */  
 .container {  
  display: flex;  
  gap: 2rem;  
  flex-wrap: wrap;  
  place-content: center;  
  justify-content: center;  
  min-height: 100vh;  
  background-color: #fffffe;  
 }  
 button {  
  font: inherit;  
  border: none;  
  background-color: white;  
  font-size: 2.5rem;  
  padding: .3em 1em;  
  cursor: pointer;  
  position: relative;  
  transition: all 250ms cubic-bezier(0.99,-0.14, 0.05, 1.07);  
 }  
 button:is(:hover, :focus){  
  transform: translate(10px, 10px);  
  box-shadow: 0px 0px #00214d;  
 }  
 .success {  
  background-color: hsl(171 100% 46.1%);  
  color: hsl(171 100% 13.1%);  
  box-shadow: 10px 10px hsl(171 100% 13.1%);  
 }  
 .warning {  
  background-color: hsl(350 100% 66.5%);  
  color: hsl(350 100% 13.5%);  
  box-shadow: 10px 10px hsl(350 100% 13.5%);  
 }  
 .info {  
  background-color: hsl(51 97.8% 65.1%);  
  color: hsl(51 97.8% 12.1%);  
  box-shadow: 10px 10px hsl(51 97.8% 12.1%);  
 }  

Css Updated output

Javascript code

 const success = document.querySelector('.success');  
 const warning = document.querySelector('.warning');  
 const info = document.querySelector('.info');  
 let toastContainer;  
 function generateToast({  
  message,  
  background = '#00214d',  
  color = '#fffffe',  
  length = '3000ms',  
 }){  
  toastContainer.insertAdjacentHTML('beforeend', `<p class="toast"   
   style="background-color: ${background};  
   color: ${color};  
   animation-duration: ${length}">  
   ${message}  
  </p>`)  
  const toast = toastContainer.lastElementChild;  
  toast.addEventListener('animationend', () => toast.remove())  
 }  
 (function initToast(){  
  document.body.insertAdjacentHTML('afterbegin', `<div class="toast-container"></div>  
  <style>  
 .toast-container {  
  position: fixed;  
  top: 1rem;  
  right: 1.5rem;  
  display: grid;  
  justify-items: end;  
  gap: 1.5rem;  
 }  
 .toast {  
  font-size: 1.5rem;  
  font-weight: bold;  
  line-height: 1;  
  padding: 0.5em 1em;  
  background-color: lightblue;  
  animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;  
 }  
 @keyframes toastIt {  
  0%,  
  100% {  
   transform: translateY(-150%);  
   opacity: 0;  
  }  
  10%,  
  90% {  
   transform: translateY(0);  
   opacity: 1;  
  }  
 }  
  </style>  
  `);  
  toastContainer = document.querySelector('.toast-container');  
 })()  
 success.addEventListener('click', (e) => {  
  generateToast({  
   message: e.currentTarget.dataset.message,  
   background: "hsl(171 100% 46.1%)",  
   color: "hsl(171 100% 13.1%)",  
   length: "5000ms",  
  })  
 })  
 info.addEventListener("click", () => {  
  generateToast({  
   message: "✍️ Write this down… ✍️",  
   background: "hsl(51 97.8% 65.1%)",  
   color: "hsl(51 97.8% 12.1%)",  
   length: "8000ms",  
  });  
 });  
 warning.addEventListener("click", () => {  
  generateToast({  
   message: "⚠️ Ya sure about that? ⚠️",  
   background: "hsl(350 100% 66.5%)",  
   color: "hsl(350 100% 13.5%)",  
  });  
 });  

Final output