Simple Toast Message In Javascript | Toast Message Html Css Javascript

Simple Toast Message In Javascript | Toast Message Html Css Javascript

Simple Toast Message In Javascript | Toast Message Html Css Javascript

 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a  Toast Message In Javascript. We use HTML, Css, and javascript for this Toast Message In Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Toast Message In Javascript.
 <div class="container">  
<button class="success" data-message="👊 You got this, kid! 👊">Submit</button>
<button class="warning">Delete</button>
<button class="info">Agree to Terms</button>
</div>

There is all the HTML code for the Toast Message In Javascript. Now, you can see an output with a Toast Message In Javascript then we write javascript for the Toast Message In Javascript.

output

Simple Toast Message In Javascript | Toast Message Html Css Javascript

CSS code

 *, *::before, *::after {  
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, sans-serif;
}
/* Prep code */
.container {
display: flex;
gap: 2rem;
flex-wrap: wrap;
place-content: center;
justify-content: center;
min-height: 100vh;
background-color: #fffffe;
}
button {
font: inherit;
border: none;
background-color: white;
font-size: 2.5rem;
padding: .3em 1em;
cursor: pointer;
position: relative;
transition: all 250ms cubic-bezier(0.99,-0.14, 0.05, 1.07);
}
button:is(:hover, :focus){
transform: translate(10px, 10px);
box-shadow: 0px 0px #00214d;
}
.success {
background-color: hsl(171 100% 46.1%);
color: hsl(171 100% 13.1%);
box-shadow: 10px 10px hsl(171 100% 13.1%);
}
.warning {
background-color: hsl(350 100% 66.5%);
color: hsl(350 100% 13.5%);
box-shadow: 10px 10px hsl(350 100% 13.5%);
}
.info {
background-color: hsl(51 97.8% 65.1%);
color: hsl(51 97.8% 12.1%);
box-shadow: 10px 10px hsl(51 97.8% 12.1%);
}

Css Updated output

Simple Toast Message In Javascript | Toast Message Html Css Javascript

Javascript code

 const success = document.querySelector('.success');  
const warning = document.querySelector('.warning');
const info = document.querySelector('.info');
let toastContainer;
function generateToast({
message,
background = '#00214d',
color = '#fffffe',
length = '3000ms',
}){
toastContainer.insertAdjacentHTML('beforeend', `<p class="toast"
style="background-color: ${background};
color: ${color};
animation-duration: ${length}">
${message}
</p>`)
const toast = toastContainer.lastElementChild;
toast.addEventListener('animationend', () => toast.remove())
}
(function initToast(){
document.body.insertAdjacentHTML('afterbegin', `<div class="toast-container"></div>
<style>
.toast-container {
position: fixed;
top: 1rem;
right: 1.5rem;
display: grid;
justify-items: end;
gap: 1.5rem;
}
.toast {
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
padding: 0.5em 1em;
background-color: lightblue;
animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
@keyframes toastIt {
0%,
100% {
transform: translateY(-150%);
opacity: 0;
}
10%,
90% {
transform: translateY(0);
opacity: 1;
}
}
</style>
`);
toastContainer = document.querySelector('.toast-container');
})()
success.addEventListener('click', (e) => {
generateToast({
message: e.currentTarget.dataset.message,
background: "hsl(171 100% 46.1%)",
color: "hsl(171 100% 13.1%)",
length: "5000ms",
})
})
info.addEventListener("click", () => {
generateToast({
message: "✍️ Write this down… ✍️",
background: "hsl(51 97.8% 65.1%)",
color: "hsl(51 97.8% 12.1%)",
length: "8000ms",
});
});
warning.addEventListener("click", () => {
generateToast({
message: "⚠️ Ya sure about that? ⚠️",
background: "hsl(350 100% 66.5%)",
color: "hsl(350 100% 13.5%)",
});
});

Final output

Simple Toast Message In Javascript | Toast Message Html Css Javascript

Simple Toast Message In Javascript | Toast Message Html Css Javascript

Simple Toast Message In Javascript | Toast Message Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the  password strength checker. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  password strength checkerusing simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Jesse Mykolyn



Leave a Reply