In the previous tutorial, we learnt how to create some toast notification UI designs using HTML and CSS. Now let us take that tutorial a step further. In today’s tutorial, we will learn how we can add functionality to the toast notifications.
Before we move forward, what are toast notifications? In simple terms, they are boxes that carry some information, warning, success/error message etc. These boxes pop up on the corners of the screen, stay there for a while and then disappear in 4-5 seconds. Sometimes, depending on the use, these notifications/messages are provided with a close button. Instead of waiting 4-5 seconds for the toast messages to disappear on their own, the user can choose to click on the close button and make these notifications go away.
Now for the disappearing part, there is usually some kind of animation. Fade Out, slide-out are some common animations you will find on the toast message. For this tutorial, we will use the slide-out animation. And instead of these messages suddenly popping up, let us add a similar slide-in animation.
If you are interested in checking out the Toast UI design tutorial, check it out here. For today’s tutorial, we will be using HTML, CSS and Javascript. Now let us get started.
Video Tutorial:
You can watch the youtube video for this tutorial here:
Â
HTML:
Let us start by creating an HTML file called “index.html”. Now simply copy the code below and paste it into the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast Notification</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="toast">
<div class="container-1">
<i class="fas fa-check-square"></i>
</div>
<div class="container-2">
<p>Success</p>
<p>Your changes are saved successfully.</p>
</div>
<button id="close" onclick="closeToast()">
×
</button>
</div>
</div>
<button id="show-toast" onclick="showToast()">Show Toast Message</button>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
To make these notifications beautiful, we add some CSS. Create a file named “style.css”. Paste the code below into the CSS file.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
font-size: 14px;
border: none;
}
body{
background-color: #f9f9f9;
}
.wrapper{
width: 420px;
padding: 30px 20px;
position: absolute;
bottom: 50px;
right: 0;
overflow: hidden;
}
#show-toast{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
background-color: #101020;
color: #ffffff;
padding: 20px;
border-radius: 5px;
cursor: pointer;
}
#toast{
width: 380px;
height: 80px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 10px 20px rgba(75, 50, 50, 0.05);
border-left: 8px solid #47d764;
border-radius: 7px;
display: grid;
grid-template-columns: 1.2fr 6fr 0.5fr;
transform: translate(400px);
transition: 1s;
}
.container-1,.container-2{
align-self: center;
}
.container-1 i{
font-size: 40px;
color: #47d764;
}
.container-2 p:first-child{
color: #101020;
font-weight: 600;
font-size: 16px;
}
.container-2 p:last-child{
font-size: 12px;
color: #656565;
font-weight: 400;
}
#toast button{
align-self: flex-start;
background-color: transparent;
font-size: 25px;
line-height: 0;
color: #656565;
cursor: pointer;
}
Â
Javascript:
The last part is to add functionality to these notifications. Create a file called “script.js”. Now all you have to do is paste the code below into that file.
let x;
let toast = document.getElementById("toast");
function showToast(){
clearTimeout(x);
toast.style.transform = "translateX(0)";
x = setTimeout(()=>{
toast.style.transform = "translateX(400px)"
}, 4000);
}
function closeToast(){
toast.style.transform = "translateX(400px)";
}
Â
That’s it for this tutorial. Do comment below your doubts, suggestions and feedbacks. For more such tutorials check out my youtube channel.
