Making Toast Message using HTML CSS JS
Making Toast Message using HTML CSS JS
HTML CODE
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body> <button id="btn"> Click </button> <div id="toast"> </div> <script src="script.js"></script></body></html>CSS CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="btn">
Click
</button>
<div id="toast">
</div>
<script src="script.js"></script>
</body>
</html>
*{ margin: 0; padding: 0; box-sizing: border-box;}
#btn{ padding: 14px 17px;}
.toast{ min-width: 250px; margin-left: -125px; background: #333; color:#fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; top:30px; animation: fadein 0.5s;}
@keyframes fadein{ from{top:0;opacity:0;} to{top:30px;opacity: 1;}}JAVASCRIPT
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#btn{
padding: 14px 17px;
}
.toast{
min-width: 250px;
margin-left: -125px;
background: #333;
color:#fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
top:30px;
animation: fadein 0.5s;
}
@keyframes fadein{
from{top:0;opacity:0;}
to{top:30px;opacity: 1;}
}
const btn=document.getElementById("btn");
const container =document.getElementById("toast");
btn.addEventListener('click',show);
function show(){
const box =document.createElement("div");
box.innerText="Message Display ...";
box.classList.add("toast");
btn.disabled=true;
container.appendChild(box);
btn.innerText="wait...";
setTimeout(()=>{
box.remove();
btn.disabled=false;
btn.innerText="Click";
},3000)
}
Comments
Post a Comment