Toast Alerts are a useful UI component for displaying important information to users. They are commonly used for notifications, messages, and alerts. In addition to being functional, they can also be designed to fit seamlessly into the overall visual style of a website or application. One popular design choice is a Dark Design, which uses a darker color palette to create a sleek and modern look. In this tutorial, we will walk through the process of creating a Toast Alert with a Dark Design using HTML, CSS, and a little bit of JavaScript. Whether you are new to web development or looking to expand your skills, this tutorial will guide you through the steps needed to create a functional and stylish Toast Alert that will elevate your user experience.
In this project[Toast Alert Dark Design], in the middle of the page there are two buttons as you can see below to show toast notifications. When you click on the green button success message will be shown. If you click on the red button the error message will be shown. If are you unable to understand what am I saying then check the live demo of this project.
You may like these:
- How to Create Random Color Generator with 3D Effect
- How to create a file downloader via URL using pure javascript
- Create Tag Input Box using HTML, CSS, and Javascript
- Custom Select Input with search option in HTML, CSS, and Javascript
Code of HTML, CSS, and JavaScript Files
Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ----------------- Created By Incoder ----------------- -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Toast Alert - InCoderWeb
</title>
<link href="main.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
</meta>
</meta>
</head>
<body>
<div class="mainToastContainer">
<div class="toastWrapper success">
<div class="icon">
<i class="fa-solid fa-circle-check">
</i>
</div>
<div class="alertData">
<h4>
Success Alert
</h4>
<p>
Login Successfully Compeleted
</p>
</div>
</div>
</div>
<button class="alertBtn bg-success" id="successAlert">
Show Success Alert
</button>
<button class="alertBtn bg-danger" id="dangerAlert">
Show Error Alert
</button>
<script>
let mainToastContainer = document.querySelector(".mainToastContainer")
successAlert = document.querySelector("#successAlert")
dangerAlert = document.querySelector("#dangerAlert")
const showAlert = (type) => {
if(!mainToastContainer.classList.contains("show")){
if(type == "success"){
mainToastContainer.innerHTML = `<div class="toastWrapper ${type}">
<div class="icon">
<i class="fa-solid fa-circle-check">
</i>
</div>
<div class="alertData">
<h4>
Success Alert
</h4>
<p>
Login Successfully Compeleted
</p>
</div>
</div>`
console.log(type)
} else{
mainToastContainer.innerHTML = `<div class="toastWrapper ${type}">
<div class="icon">
<i class="fa-solid fa-circle-xmark">
</i>
</div>
<div class="alertData">
<h4>
Error Alert
</h4>
<p>
Login failed due to incorrect username or password
</p>
</div>
</div>`
}
mainToastContainer.classList.add("show")
setTimeout(() => {
mainToastContainer.classList.remove("show")
}, 2500)
} else{
mainToastContainer.classList.remove("show")
}
}
successAlert.addEventListener("click", () => {
showAlert('success')
})
dangerAlert.addEventListener("click", () => {
showAlert('danger')
})
</script>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Amaranth", sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
background: #110526;
justify-content: center;
}
.mainToastContainer {
top: 1rem;
right: -25rem;
position: fixed;
transition: right .6s cubic-bezier(0.25, 0.1, 0.15, 1.42);
}
.mainToastContainer.show {
right: 1rem;
}
.toastWrapper {
width: 20rem;
height: 5rem;
display: flex;
overflow: hidden;
position: relative;
align-items: center;
margin-block: .8rem;
border-radius: .5rem;
background: rgb(255 255 255 / 8%);
}
.toastWrapper::before {
top: 0;
left: -45rem;
width: 52rem;
content: "";
height: 100%;
position: absolute;
}
.toastWrapper.success::before {
background: linear-gradient(to right, rgb(43 198 111 / 80%) 25%, transparent);
}
.toastWrapper.danger::before {
background: linear-gradient(to right, rgb(226 45 59 / 80%) 25%, transparent);
}
.toastWrapper.success .icon {
color: rgb(43 198 111)
}
.toastWrapper.success h4 {
font-size: 1rem;
color: rgb(43 198 111)
}
.toastWrapper.danger .icon {
color: rgb(226 45 59)
}
.toastWrapper.danger h4 {
font-size: 1rem;
color: rgb(226 45 59)
}
.toastWrapper p {
font-size: .79rem;
margin-top: .2rem;
color: rgb(255 255 255 / 50%)
}
.toastWrapper .icon {
font-size: 1.4rem;
margin-right: 1rem;
margin-left: 1.5rem;
}
.alertBtn {
height: 2.5rem;
cursor: pointer;
font-weight: 550;
padding: 0rem 1rem;
letter-spacing: 1px;
border-radius: .5rem;
margin-right: 1rem;
background: transparent;
transition: all .3s ease;
}
.alertBtn:hover {
color: #ffffff;
}
.bg-success {
color: rgb(43 198 111 / 80%);
border: 2px solid rgb(43 198 111 / 80%);
}
.alertBtn.bg-success:hover {
background: rgb(43 198 111 / 80%);
}
.alertBtn.bg-danger:hover {
background: rgb(226 45 59 / 80%);
}
.bg-danger {
color: rgb(226 45 59 / 80%);
border: 2px solid rgb(226 45 59 / 80%);
}
Here is the Final Output of this Code
Hurray! now you've created a Toast Alert 😎. You can download files by clicking on the download button after downloading file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-