Skip to content

Commit 64d5827

Browse files
FinnFinn
Finn
authored and
Finn
committed
holly grail and toast notification
1 parent d5766f0 commit 64d5827

File tree

7 files changed

+213
-0
lines changed

7 files changed

+213
-0
lines changed

‎toast-notification/style.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,17 @@ body {
4949
border-radius: 5px;
5050
padding: 1rem 2rem;
5151
margin: 0.5rem;
52+
animation: toastStart .5s ease-in;
53+
}
54+
@keyframes toastStart{
55+
from{
56+
transform: scale(1,0);
57+
opacity: 0.5;
58+
}
59+
to{
60+
transform: scale(1);
61+
opacity: 1;
62+
}
5263
}
5364

5465
.toast.info {

‎workout/day2-toast-notification/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div id="finnui-toast"></div>
12+
<button class="btn">toast notification</button>
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

‎workout/day2-toast-notification/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const btn = document.querySelector('.btn');
2+
const toastContainer = document.querySelector('#finnui-toast');
3+
4+
const randomTextArr = ['message one', 'message two', 'message three', 'message four'];
5+
const randomTypeArr = ['warning', 'success', 'error'];
6+
7+
function createToast(text,type){
8+
const toastDom = document.createElement('div');
9+
const toastText = text || randomText()
10+
const toastType = type || randomType();
11+
toastDom.classList.add('finn-toast')
12+
toastDom.classList.add(toastType)
13+
toastDom.innerText = toastText
14+
return toastDom
15+
}
16+
17+
function randomText(){
18+
return randomTextArr[Math.floor(Math.random()*randomTextArr.length)]
19+
}
20+
function randomType(){
21+
return randomTypeArr[Math.floor(Math.random()*randomTypeArr.length)]
22+
}
23+
24+
function showToast(duration = 5){
25+
const toastNode = createToast();
26+
toastContainer.appendChild(toastNode)
27+
setTimeout(()=>{
28+
toastNode.remove()
29+
},duration*1000)
30+
}
31+
32+
btn.addEventListener('click',()=>showToast())

‎workout/day2-toast-notification/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
#finnui-toast{
20+
width: 200px;
21+
position: absolute;
22+
top: 10px;
23+
bottom: 10px;
24+
right: 10px;
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: flex-end;
28+
}
29+
30+
.btn {
31+
background-color: #ffffff;
32+
color: rebeccapurple;
33+
font-family: inherit;
34+
font-weight: bold;
35+
padding: 1rem;
36+
border-radius: 5px;
37+
border: none;
38+
cursor: pointer;
39+
}
40+
41+
42+
@keyframes toast-show{
43+
from{
44+
transform: scale(1,0);
45+
}
46+
to{
47+
transform: scale(1);
48+
}
49+
}
50+
51+
@keyframes toast-leave{
52+
from{
53+
transform: scale(1,0);
54+
}
55+
to{
56+
transform: scale(1);
57+
}
58+
}
59+
60+
.finn-toast{
61+
min-width: 200px;
62+
margin-bottom: 10px;
63+
font-size: 16px;
64+
line-height: 20px;
65+
background-color: #ffffff;
66+
animation: toast-show .5s ease-in;
67+
padding: 5px;
68+
border-radius: 3px;
69+
}
70+
71+
.warning{
72+
color: #F2C037;
73+
}
74+
.success{
75+
color: green;
76+
}
77+
.error{
78+
color: red;
79+
}

‎workout/grial-holly-layout/grail-holly-layout-with-flexbox.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.container{
10+
display: flex;
11+
height: 200px;
12+
}
13+
.main{
14+
background-color: aqua;
15+
flex-grow: 1;
16+
}
17+
.left{
18+
width: 100px;
19+
background-color: bisque;
20+
flex: 0 0 auto;
21+
justify-self: left;
22+
}
23+
.right{
24+
width: 100px;
25+
background-color: chartreuse;
26+
flex: 0 0 auto;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<div class="left colume">left</div>
33+
<div class="main colume">main</div>
34+
<div class="right colume">right</div>
35+
</div>
36+
</body>
37+
</html>

‎workout/grial-holly-layout/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="main colume">main</div>
13+
<div class="left colume">left</div>
14+
<div class="right colume">right</div>
15+
</div>
16+
</body>
17+
</html>

‎workout/grial-holly-layout/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.container{
2+
height: 100px;
3+
padding: 0 100px;
4+
}
5+
.colume{
6+
float: left;
7+
height: 100%;
8+
}
9+
.main{
10+
background-color: aquamarine;
11+
width: 100%;
12+
}
13+
.left{
14+
width: 100px;
15+
background-color: antiquewhite;
16+
margin-left: calc( -100% - 100px);
17+
}
18+
.right{
19+
background-color:cornflowerblue;
20+
width: 100px;
21+
margin-right: -100px;
22+
}

0 commit comments

Comments
 (0)