Skip to content

Commit 36eebc8

Browse files
solygambassolygambas
committed
add toast notification
1 parent 2edafca commit 36eebc8

File tree

6 files changed

+115
-11
lines changed

6 files changed

+115
-11
lines changed

‎24-content placeholder/script.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const animated_bg_texts = document.querySelectorAll(".animated-bg-text");
2525

2626
const getData = () => {
2727
header.innerHTML =
28-
'<img src="https://images.unsplash.com/photo-1610729681715-1d22287e7b67?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="" />';
28+
'<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />';
2929
title.innerHTML = "Lorem ipsum dolor sit amet";
3030
excerpt.innerHTML =
3131
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis";

‎26-double vertical slider/index.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@
1515
<body>
1616
<div class="slider-container">
1717
<div class="left-slide">
18-
<div style="background-color: #6b7d67">
19-
<h1>Accessories</h1>
20-
<p>new collection</p>
21-
</div>
22-
<div style="background-color: #2aa6c0">
18+
<div style="background-color: #b99f8a">
2319
<h1>Pareos</h1>
2420
<p>new collection</p>
2521
</div>
@@ -31,26 +27,30 @@ <h1>Swimsuits</h1>
3127
<h1>Crop Tops</h1>
3228
<p>new collection</p>
3329
</div>
30+
<div style="background-color: #2b2e32">
31+
<h1>Accessories</h1>
32+
<p>new collection</p>
33+
</div>
3434
</div>
3535
<div class="right-slide">
3636
<div
3737
style="
38-
background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
38+
background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
3939
"
4040
></div>
4141
<div
4242
style="
43-
background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
43+
background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
4444
"
4545
></div>
4646
<div
4747
style="
48-
background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
48+
background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
4949
"
5050
></div>
5151
<div
5252
style="
53-
background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
53+
background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
5454
"
5555
></div>
5656
</div>

‎27-toast notification/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Toast Notification</title>
8+
</head>
9+
<body>
10+
<div id="toasts"></div>
11+
<button class="btn" id="button">Show Notification</button>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎27-toast notification/script.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const button = document.getElementById("button");
2+
const toasts = document.getElementById("toasts");
3+
4+
const messages = [
5+
"Message One",
6+
"Message Two",
7+
"Message Three",
8+
"Message Four",
9+
];
10+
const types = ["info", "success", "error"];
11+
12+
const getRandomMessage = () =>
13+
messages[Math.floor(Math.random() * messages.length)];
14+
15+
const getRandomType = () => types[Math.floor(Math.random() * types.length)];
16+
17+
const createNotification = (message = null, type = null) => {
18+
const notif = document.createElement("div");
19+
notif.classList.add("toast");
20+
notif.classList.add(type ? type : getRandomType());
21+
notif.innerText = message ? message : getRandomMessage();
22+
toasts.appendChild(notif);
23+
setTimeout(() => notif.remove(), 3000);
24+
};
25+
26+
button.addEventListener("click", () => createNotification());

‎27-toast notification/style.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: rebeccapurple;
9+
font-family: "Poppins", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
}
18+
19+
.btn {
20+
background-color: #fff;
21+
color: rebeccapurple;
22+
font-family: inherit;
23+
font-weight: bold;
24+
padding: 1rem;
25+
border-radius: 5px;
26+
border: none;
27+
cursor: pointer;
28+
}
29+
30+
.btn:focus {
31+
outline: none;
32+
}
33+
34+
.btn:active {
35+
transform: scale(0.98);
36+
}
37+
38+
#toasts {
39+
position: fixed;
40+
bottom: 10px;
41+
right: 10px;
42+
display: flex;
43+
flex-direction: column;
44+
align-items: flex-end;
45+
}
46+
47+
.toast {
48+
background-color: #fff;
49+
border-radius: 5px;
50+
padding: 1rem 2rem;
51+
margin: 0.5rem;
52+
}
53+
54+
.toast.info {
55+
color: rebeccapurple;
56+
}
57+
58+
.toast.success {
59+
color: green;
60+
}
61+
62+
.toast.error {
63+
color: red;
64+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/24-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/pen/ExgGzaX) |
3333
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/25-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/VwKqJmw/) |
3434
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/26-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/pen/wvzNwqB) |
35-
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/toast-notification) | [Live Demo](/toast-notification/) |
35+
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/27-toast%20notification) | [Live Demo](https://codepen.io/solygambas/pen/YzGBNgW) |
3636
| 28 | [Github Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/github-profiles) | [Live Demo](/github-profiles/) |
3737
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-click-heart) | [Live Demo](/double-click-heart/) |
3838
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/auto-text-effect) | [Live Demo](/auto-text-effect/) |

0 commit comments

Comments
 (0)