Toast Notification Using HTML ,CSS, and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Toast Notification Message. We use HTML, CSS, and JavaScript for this Toast Notification.
I 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 the html code for the Toast Notification Message. Now, you can see output without Css and JavaScript. then we write Css for styling Toast Notification and JavaScript for giving the main functionality of Toast Notification Message.
Speech To Text Using HTML,CSS and JavaScript
Html Code Output
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 Styling of Toast Notification using Css. Here is our updated output HTML + CSS.
50+ HTML, CSS & JavaScript Projects With Source Code
Output
Now add javascript for the Toast Notification Message Functionality!
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 Of Toast Notification JavaScript
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Now we have completed our Toast Notification Project. Here is our updated output with JavaScript. Hope you like Toast Notification Message Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Toast Notification Using 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
