Danger, Warning, Alert Messages Notification Source Code: Hi dear, programmers in this article we are going to create Danger, Warning, Alert Messages Notification using Html, CSS, and Javascript code. So friends it’s very simple code you can easily make this notification. There are many type of notification we covered in this article. All source code of HTML, CSS and Javascript you will found here and easily execute. so without delaying time let’s get start how we will make this notification.
| Article Name | Danger, Warning, Alert Messages Notification Source Code |
| Publish Date | 25/10/24 |
| Language Used | Html, Css, & Javascript |
| Example of Notificarion | Danger, Warning, Alert Messages, Error, Success |
| Tools Required | Code Editor (e.g., VS Code), Browser (e.g., Chrome) |
| Mobile Responsive | Use media queries and percentage-based sizing for responsiveness |
| Source Code | Available Link Below |
What Tools You Need To Run This Danger, Warning, Alert Messages Notification Source Code
- HTML: For the structure.
- CSS: To design and animate the notification.
- JavaScript (JS): To add interactivity.
- Code Editor: Any editor like Visual Studio Code, Sublime, or even Notepad.
- Browser: Chrome, Firefox, or any browser that can render HTML, CSS, and JavaScript.
How To Create Danger, Warning, Alert Messages Notification Source Code
Dear friends, A notification involves creating the shape of a heart using CSS and adding animation effects. CSS allows us to style and attractive, while JavaScript enables interactivity. we will create Danger, Warning, Alert Messages Notification Source Code following three steps:
Top 10 Notification Alert Source Code
In first step we will write html code for Danger, Warning, Alert Messages Notification in code editor
HTML Code for the Danger, Warning, Alert Messages Notification The focus here is on providing a clean, simple framework for our CSS and JavaScript to work on.
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-check-circle state-icon" id="state-icon"></i>
<p class="error-message">Danger ! Don't Touch It.</p>
</div><i class="fas fa-times x" id="X1"></i>
</div>
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-check-circle state-icon" id="state-icon"></i>
<p class="error-message">Error Found You Miss The Task.</p>
</div>
<i class="fas fa-times x" id="X2"></i>
</div>
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-check-circle state-icon" id="state-icon"></i>
<p class="error-message">Sucsess Your Task Is Completed.</p>
</div><i class="fas fa-times x" id="X3"></i>
</div>
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-times-circle state-icon" id="state-icon"></i>
<p class="error-message">warning! Your Program Is Courupted.</p>
</div><i class="fas fa-times x" id="X4"></i>
</div>
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-exclamation-circle state-icon" id="state-icon"></i>
<p class="error-message">Alert! Your line Is Not completed.</p>
</div><i class="fas fa-times x" id="X5"></i>
</div>
<div class="alert">
<div class="messge-wrapper">
<i class="fas fa-exclamation-circle state-icon" id="state-icon"></i>
<p class="error-message">Congratulation You Win This Match.</p>
</div><i class="fas fa-times x" id="X6"></i>
</div>Second Step We will Beautify Danger, Warning, Alert Messages Notification Source Code Using CSS
body{
margin: 0;
padding: 0;
font-family: "Open Sans";
font-weight: 600;
display: flex;
align-items: center;
flex-direction: column;
background-color: rgb(223, 223, 223);
}
.alert{
display: flex;
justify-content: space-between;
width: 550px;
padding: 5px 5px;
margin-top: 25px;
border-radius: 10px;
}
.alert:nth-of-type(1){
color: rgb(161, 161, 161);
background: blue;
border-left: 12px solid rgb(161, 161, 161);
}
.alert:nth-of-type(2){
color: rgb(36, 173, 93);
background: rgb(195, 243, 215);
border-left: 12px solid rgb(36, 173, 93);
}
.alert:nth-of-type(3){
color: rgb(61, 181, 255);
background: yellow;
border-left: 12px solid rgb(61, 181, 255);
}
.alert:nth-of-type(4){
color: Black;
background: Red;
border-left: 12px solid rgb(255, 72, 88);
}
.alert:nth-of-type(5){
color: black;
background: orange;
border-left: 12px solid rgb(206, 133, 1);
}
.alert:nth-of-type(6){
color: white;
background: black;
border-left: 12px solid rgb(52, 52, 52);
}
.messge-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.alert p{
margin-left: 20px;
align-self: start;
}
.alert:nth-of-type(1) .x{
margin: 5px;
color:rgb(161, 161, 161);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(1) .x:hover{
cursor: pointer;
color:rgba(161, 161, 161, 0.46)
}
.alert:nth-of-type(2) .x{
margin: 5px;
color:rgb(36, 173, 93);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(2) .x:hover{
cursor: pointer;
color:rgba(36, 173, 93, 0.48)
}
.alert:nth-of-type(3) .x{
margin: 5px;
color:rgb(61, 181, 255);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(3) .x:hover{
cursor: pointer;
color:rgba(61, 181, 255, 0.48)
}
.alert:nth-of-type(4) .x{
margin: 5px;
color:rgb(255, 72, 88);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(4) .x:hover{
cursor: pointer;
color:rgba(255, 72, 87, 0.48)
}
.alert:nth-of-type(5) .x{
margin: 5px;
color:rgb(206, 133, 1);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(5) .x:hover{
cursor: pointer;
color:rgba(206, 134, 1, 0.48)
}
.alert:nth-of-type(6) .x{
margin: 5px;
color:rgb(204, 204, 204);
width: 10px;
height: 10px;
transition: 0.2s ease-in;
}
.alert:nth-of-type(6) .x:hover{
cursor: pointer;
color:rgba(204, 204, 204, 0.48)
}
.alert .state-icon{
align-self: center;
margin-left: 10px;
font-size: 25px;
}
.fead{
animation-duration: 0.5s;
animation-name: slidein;
}
@keyframes slidein {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hide{
transition: visibility 0s, opacity 0.5s linear;
visibility: hidden;
opacity: 1;
display: none;
}
Third Step We will Using Javacript
The JavaScript code listens for a click event, making the heart pulse faster or stop altogether. This allows for user engagement, such as a like button that gets a visual cue when clicked.
const hideIcon = document.querySelectorAll(".x")
hideIcon.forEach((elem) => {
elem.addEventListener("click", () => {
const alert = elem.parentElement
alert.classList.add("fead")
setTimeout(() => { alert.classList.add("hide") }, 495)
})
})Combining HTML, CSS, and JS
When we combine all three files (HTML, CSS, and JavaScript), we have a fully functional, interactive heart animation that beats continuously and responds to user interaction.
Output
See the Pen Danger, Error, Success, Warning and Alert Messages Using HTML CSS JS by Codeswithsam (@Codeswithsam) on CodePen.
Danger, Warning, Alert Messages Notification Source Code Mobile Responsiveness
Don’t forget about mobile! To ensure your alert notification works well on smaller screens, consider setting the width and height in percentages or using media queries to adjust the size on mobile devices.
Important Links
| Danger, Warning, Alert Messages Notification Source Code Link | Click Here |
| Check Out Other Source Code | Cick Here |
| Our Website | Codeswithsam.com |
| Join Telegram | Click Here |
If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Thanks! 🙏 for visiting Codeswithsam.com ! Join telegram (link available in bottom) for source code files , pdf and
Any Promotion queries 👇
info@codeswithsam.com
FAQ
Can I use this Danger, Warning, Alert Messages Notification Source Code for commercial projects?
Yes, you can use this code
Is JavaScript necessary for this animation?
No, the animation can work without JavaScript, but JS adds interactivity.
