Toast Notification code | Toast Notification make by html css javascript

Toast Notification code | Toast Notification make by html css javascript







Toast Notification code | Toast Notification make by html css javascript



Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Toast Notification. We use HTML & CSS and javascript for this Toast Notification. Hope you enjoy our blog so let's start with a basic HTML structure for a Toast Notification.

HTML code for Toast Notification

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Toast Notification</title>  
  </head>  
  <body>  
   <div id="toasts"></div>  
   <button class="btn" id="button">Show Notification</button>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all HTML code for the Toast Notification. Now, you can see output without CSS, then we write CSS for our Toast Notification.
output
Toast Notification code | Toast Notification make by html css javascript

CSS Code for Toast Notification

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');  
 * {  
  box-sizing: border-box;  
 }  
 body {  
  background-color: rebeccapurple;  
  font-family: 'Poppins', sans-serif;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  overflow: hidden;  
  margin: 0;  
 }  
 .btn {  
  background-color: #ffffff;  
  color: rebeccapurple;  
  font-family: inherit;  
  font-weight: bold;  
  padding: 1rem;  
  border-radius: 5px;  
  border: none;  
  cursor: pointer;  
 }  
 .btn:focus {  
  outline: none;  
 }  
 .btn:active {  
  transform: scale(0.98);  
 }  
 #toasts {  
  position: fixed;  
  bottom: 10px;  
  right: 10px;  
  display: flex;  
  flex-direction: column;  
  align-items: flex-end;  
 }  
 .toast {  
  background-color: #fff;  
  border-radius: 5px;  
  padding: 1rem 2rem;  
  margin: 0.5rem;  
 }  
 .toast.info {  
  color: rebeccapurple;  
 }  
 .toast.success {  
  color: green;  
 }  
 .toast.error {  
  color: red;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Toast Notification code | Toast Notification make by html css javascript


Now add javascript for the Toast Notification!

Javascript code for Toast Notification

 const button = document.getElementById('button')  
 const toasts = document.getElementById('toasts')  
 const messages = [  
   'Message One',  
   'Message Two',  
   'Message Three',  
   'Message Four',  
 ]  
 const types = ['info', 'success', 'error']  
 button.addEventListener('click', () => createNotification())  
 function createNotification(message = null, type = null) {  
   const notif = document.createElement('div')  
   notif.classList.add('toast')  
   notif.classList.add(type ? type : getRandomType())  
   notif.innerText = message ? message : getRandomMessage()  
   toasts.appendChild(notif)  
   setTimeout(() => {  
     notif.remove()  
   }, 3000)  
 }  
 function getRandomMessage() {  
   return messages[Math.floor(Math.random() * messages.length)]  
 }  
 function getRandomType() {  
   return types[Math.floor(Math.random() * types.length)]  
 }  
Final output



Toast Notification code | Toast Notification make by html css javascript

Now we have completed our javascript section
,  Here is our updated output with javascriptHope you like Toast Notification. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

Check out more.....









In this post, we learn how to create a Toast Notification using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post