Hey friends, I'm CodingPorium and today let's see how you can easily make a cool toast/snackbar notification. The reason why this called a toast notification is because this notification pops up from the bottom of the screen like how a toast would pop up from a toaster.

This is made possible mainly with WebKit animations, KeyFrames animations, visibility property in CSS. In our JavaScript code, we added code to make the toast notification pop up only when the button is clicked.

Below is the full source code of this project. You may also watch the tutorial at my youtube channel . There is a button on the bottom of the page to copy the code automatically when clicked.

PASTE THIS CODE IN YOUR index.html FILE:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toast/SnackBar Notification using JS | CodingPorium</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
  background:dodgerblue;
}

.center{
text-align: center;
}
button{
  position: absolute;
  top: 50%;

  border:none;
  padding:10px;
  background:#FFD300;
  font-family:poppins;
  color:black;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition:0.3s;
}
button:hover{
  background:orange;
  color:white;
}
#toast {
  font-family:poppins;
  visibility: hidden;
  min-width: 250px;
  margin-left: -200px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  color: black;
  text-align: center;
  border-radius: 10px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.checkicon i{
    font-size: 40px;
    color: #47d764;
}
</style>
</head>
<body>
<div class="center">
<button style="text-align:center;" onclick="toastFunction()">Show Toast</button>
</div>

<div id="toast">
  <div class="checkicon"> <i class="fas fa-check-square"></i> </div>
SUCCESS: We have received your registration. Thanks!</div>

<script>
function toastFunction() {
  var x = document.getElementById("toast");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

</body>
</html>
 

And that's all for this post. I hope you enjoyed it and do support us by subscribing to our YouTube channel and watching our tutorials which we provide FREE source code.

Post a Comment

Post a Comment

Previous Post Next Post