how to make toast in html css and javascript

by
Join Our Official Freshers Jobs Telegram Channel

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will make toast in html css and javascript .So let’s go to our to.

HTML :-

<div class='toast' style='display:none'>I did something!</div>
<button>Do something!</button>

 

CSS:-

body, html {
    height:100%;
    width:100%;
    min-height:100%;
    padding:0;
    margin:0;
}
.toast {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #35bc7a;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 7px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

Javascript:-

$('button').click(function () {
    $('.toast').stop().fadeIn(400).delay(3000).fadeOut(500); //fade out after 3 seconds
});

    $('.toast').stop().fadeIn(400).delay(3000).fadeOut(500); //fade out after 3 seconds

Related posts:

 

  1.  tudo app using html and css javascript

  2. how to create age calculator in html project

  3. how to make toast in html css and javascript

  4. how to make copy to clipboard in javascript

  5. how to create email validation in javascript

     

 

So I hope that you learn about the how to make toast in html css and javascript And if you have any more queries about progrmming ,web Devlopment ,tech,computer relegated then feel free to discuss your problem in the comment section.Thank you so much and come back for more updates about Techgsr.co .