Skip to content

Commit 7620df4

Browse files
Himma08Himma08
committed
Toast Notification
1 parent 0cb2fd8 commit 7620df4

3 files changed

Lines changed: 162 additions & 0 deletions

File tree

‎Toast Notification/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Toast Notification</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://kit.fontawesome.com/4b4180deff.js" crossorigin="anonymous"></script>
9+
</head>
10+
<body>
11+
<div class="buttons">
12+
<button id="S" onClick=showToast(successMsg)>Success</button>
13+
<button id="E" onClick=showToast(errorMsg)>Error</button>
14+
<button id="I" onClick=showToast(invalidMsg)>Invalid</button>
15+
</div>
16+
17+
<div id="toastBox"></div>
18+
19+
<script src="script.js"></script>
20+
</body>
21+
</html>
22+

‎Toast Notification/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
let toastBox = document.getElementById("toastBox");
3+
let successMsg = '<i class="fa-solid fa-circle-check"></i> Successfully submitted';
4+
let errorMsg = '<i class="fa-solid fa-circle-xmark"></i> Lets Fix This Error';
5+
let invalidMsg = '<i class="fa-solid fa-circle-exclamation"></i> Invalid Input, Try Again';
6+
7+
function showToast(msg){
8+
let toast = document.createElement("div");
9+
toast.classList.add("toast");
10+
toast.innerHTML = msg;
11+
toastBox.appendChild(toast);
12+
13+
if(msg.includes('Error')){
14+
toast.classList.add("error");
15+
}
16+
if(msg.includes('Invalid')){
17+
toast.classList.add("invalid");
18+
}
19+
20+
setTimeout(()=>{
21+
toast.remove();
22+
},6000)
23+
24+
25+
}
26+
27+
28+
29+

‎Toast Notification/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body{
9+
background: #f7edff;
10+
}
11+
12+
.buttons{
13+
margin: 50px;
14+
}
15+
16+
.buttons button{
17+
color: #fff;
18+
background: #333;
19+
border: 0;
20+
outline: 0;
21+
width: 120px;
22+
height: 40px;
23+
margin: 5px;
24+
cursor: pointer;
25+
}
26+
27+
#toastBox{
28+
position: absolute;
29+
bottom: 30px;
30+
right: 30px;
31+
display: flex;
32+
align-items: flex-end;
33+
flex-direction: column;
34+
overflow: hidden;
35+
padding: 20px;
36+
}
37+
38+
#S{
39+
background: rgb(24, 226, 24);
40+
color: #000;
41+
}
42+
43+
#E{
44+
background: rgb(226, 24, 24);
45+
color: #000
46+
}
47+
48+
#I{
49+
background: rgb(226, 226, 24);
50+
color: #000;
51+
}
52+
53+
.toast{
54+
width: 400px;
55+
height: 80px;
56+
background: #fff;
57+
margin: 15px 0;
58+
font-weight: 500;
59+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
60+
display: flex;
61+
align-items: center;
62+
position: relative;
63+
transform: translateX(100%);
64+
animation: moveleft 0.3s linear forwards ;
65+
}
66+
67+
@keyframes moveleft{
68+
100%{
69+
transform: translateX(0);
70+
}
71+
}
72+
73+
.toast i{
74+
font-size: 35px;
75+
margin: 0 20px;
76+
color: green;
77+
}
78+
79+
.toast.error i{
80+
color: red;
81+
}
82+
83+
.toast.invalid i{
84+
color: orange;
85+
}
86+
87+
.toast::after{
88+
content: '';
89+
position: absolute;
90+
left: 0;
91+
bottom: 0;
92+
width: 100%;
93+
height: 5px;
94+
background: green;
95+
animation: anim 6s linear forwards;
96+
97+
98+
}
99+
@keyframes anim{
100+
100%{
101+
width: 0;
102+
}
103+
}
104+
105+
.toast.error::after{
106+
background-color: red;
107+
}
108+
109+
.toast.invalid::after{
110+
background-color: orange;
111+
}

0 commit comments

Comments
 (0)