Skip to content

Commit a2e3aac

Browse files
solygambassolygambas
committed
add relaxer app
1 parent 35c7acd commit a2e3aac

File tree

4 files changed

+182
-0
lines changed

4 files changed

+182
-0
lines changed

‎74-relaxer app/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Relaxer</title>
8+
</head>
9+
<body>
10+
<h1>Relaxer</h1>
11+
<div class="container" id="container">
12+
<div class="circle"></div>
13+
<p id="text"></p>
14+
<div class="pointer-container">
15+
<span class="pointer"></span>
16+
</div>
17+
<div class="gradient-circle"></div>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎74-relaxer app/script.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const container = document.getElementById("container");
2+
const text = document.getElementById("text");
3+
4+
// The 4-7-8 breathing technique: https://www.medicalnewstoday.com/articles/324417
5+
const totalTime = 19000;
6+
const breatheTime = 4000;
7+
const holdTime = 7000;
8+
9+
function breatheAnimation() {
10+
text.innerText = "Breathe In!";
11+
container.className = "container grow";
12+
13+
setTimeout(() => {
14+
text.innerText = "Hold";
15+
16+
setTimeout(() => {
17+
text.innerText = "Breathe Out!";
18+
container.className = "container shrink";
19+
}, holdTime);
20+
}, breatheTime);
21+
}
22+
23+
setInterval(breatheAnimation, totalTime);
24+
25+
// Init
26+
breatheAnimation();

‎74-relaxer app/style.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
2+
3+
:root {
4+
--background-color: #224941;
5+
--large-circle-color: #010f1c;
6+
--light-color: #dcebfe;
7+
--gradient-color-light: #5fa0ac;
8+
--gradient-color-light-border: #65a3ad;
9+
--gradient-color-dark: #004a54;
10+
--gradient-color-dark-border: #03505a;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
background: var(--background-color) url('https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
19+
color: var(--light-color);
20+
font-family: "Montserrat", sans-serif;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
height: 100vh;
26+
overflow: hidden;
27+
margin: 0;
28+
}
29+
30+
h1 {
31+
position: absolute;
32+
top: 1rem;
33+
left: 2rem;
34+
font-size: 1.5rem;
35+
}
36+
37+
.container {
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
margin: auto;
42+
width: 300px;
43+
height: 300px;
44+
position: relative;
45+
transform: scale(1);
46+
}
47+
48+
.circle {
49+
background-color: var(--large-circle-color);
50+
width: 100%;
51+
height: 100%;
52+
border-radius: 50%;
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
z-index: -1;
57+
}
58+
59+
.gradient-circle {
60+
background: conic-gradient(
61+
var(--gradient-color-light) 0%,
62+
var(--gradient-color-light-border) 21%,
63+
var(--light-color) 21%,
64+
var(--light-color) 58%,
65+
var(--gradient-color-dark-border) 58%,
66+
var(--gradient-color-dark) 100%
67+
);
68+
width: 320px;
69+
height: 320px;
70+
border-radius: 50%;
71+
position: absolute;
72+
top: -10px;
73+
left: -10px;
74+
z-index: -2;
75+
}
76+
77+
.pointer {
78+
background-color: var(--light-color);
79+
width: 20px;
80+
height: 20px;
81+
border-radius: 50%;
82+
display: block;
83+
}
84+
85+
.pointer-container {
86+
position: absolute;
87+
top: -40px;
88+
left: 140px;
89+
width: 20px;
90+
height: 190px;
91+
animation: rotate 19s linear forwards infinite;
92+
transform-origin: bottom center;
93+
}
94+
95+
@keyframes rotate {
96+
from {
97+
transform: rotate(0deg);
98+
}
99+
to {
100+
transform: rotate(360deg);
101+
}
102+
}
103+
104+
.container.grow {
105+
animation: grow 4s linear forwards;
106+
}
107+
108+
@keyframes grow {
109+
from {
110+
transform: scale(1);
111+
}
112+
to {
113+
transform: scale(1.2);
114+
}
115+
}
116+
117+
.container.shrink {
118+
animation: shrink 8s linear forwards;
119+
}
120+
121+
@keyframes shrink {
122+
from {
123+
transform: scale(1.2);
124+
}
125+
to {
126+
transform: scale(1);
127+
}
128+
}

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,13 @@
7777
| 69 | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/69-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) |
7878
| 70 | [Typing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/70-typing%20game) | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq) |
7979
| 71 | [Speech Text Reader](https://github.com/solygambas/html-css-fifty-projects/tree/master/71-speech%20text%20reader) | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM) |
80+
| 72 | [Memory Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/72-memory%20cards) | [Live Demo](#) |
81+
| 73 | [Lyrics Search App](https://github.com/solygambas/html-css-fifty-projects/tree/master/73-lyrics%20search%20app) | [Live Demo](#) |
82+
| 74 | [Relaxer App](https://github.com/solygambas/html-css-fifty-projects/tree/master/74-relaxer%20app) | [Live Demo](#) |
83+
| 75 | [Breakout Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/75-breakout%20game) | [Live Demo](#) |
84+
| 76 | [New Year Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/76-new%20year%20countdown) | [Live Demo](#) |
85+
| 77 | [Sortable List](https://github.com/solygambas/html-css-fifty-projects/tree/master/77-sortable%20list) | [Live Demo](#) |
86+
| 78 | [Speak Number Guessing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/78-speak%20number%20guessing%20game) | [Live Demo](#) |
8087

8188
This repository is mostly based on 2 courses by Brad Traversy (2020):
8289

0 commit comments

Comments
 (0)