ADVERTISEMENT

Toast Notification Using HTML ,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Toast Notification Using HTML ,CSS, and JavaScript

Toast Notification Using HTML ,CSS and JavaScript
Toast Notification Using HTML,CSS and JavaScript

 

ADVERTISEMENT

 

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Speech To Text Using HTML,CSS and JavaScript

Html Code Output

 

ADVERTISEMENT

Toast Notification Using HTML ,CSS and 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 Styling of Toast Notification using Css. Here is our updated output HTML + CSS.

50+ HTML, CSS & JavaScript Projects With Source Code

Output

ADVERTISEMENT

 

ADVERTISEMENT

Toast Notification Using HTML ,CSS and JavaScript

 

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

 

Toast Notification Using HTML ,CSS and JavaScript

 

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

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.

ADVERTISEMENT

Thank you!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT