Skip to content

Commit 2b557a8

Browse files
tajulafreentajulafreen
authored
Merge pull request #40 from tajulafreen/Just_Relax
50Projects-HTML-CSS-JavaScript : Just relax
2 parents 5d01f91 + 825e5b1 commit 2b557a8

File tree

4 files changed

+183
-0
lines changed

4 files changed

+183
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,17 @@ In order to run this project you need:
419419
</details>
420420
</li>
421421

422+
<li>
423+
<details>
424+
<summary>Just Relax</summary>
425+
<p>The Just Relax App is a breathing exercise web application built with HTML, CSS, and JavaScript (ES6+). It guides users through a breathing exercise by animating visual cues and displaying text prompts such as "Breathe In," "Hold," and "Breathe Out." This helps users relax and practice mindfulness.</p>
426+
<ul>
427+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/JustRelax/">Live Demo</a></li>
428+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/JustRelax">Source</a></li>
429+
</ul>
430+
</details>
431+
</li>
432+
422433
</ol>
423434

424435
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/JustRelax/index.html

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

‎Source-Code/JustRelax/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* eslint-disable no-use-before-define */
2+
const container = document.querySelector('.container');
3+
const text = document.querySelector('#text');
4+
5+
const TOTAL_TIME = 7500;
6+
const BREATHE_TIME = (TOTAL_TIME / 5) * 2;
7+
const HOLD_TIME = TOTAL_TIME / 7;
8+
9+
// Start the animation
10+
const startBreathingAnimation = () => {
11+
animateBreathing();
12+
setInterval(animateBreathing, TOTAL_TIME);
13+
};
14+
15+
const animateBreathing = () => {
16+
text.textContent = 'Breathe In!';
17+
container.classList.add('grow');
18+
container.classList.remove('shrink');
19+
20+
setTimeout(() => {
21+
text.textContent = 'Hold...';
22+
23+
setTimeout(() => {
24+
text.textContent = 'Breathe Out!';
25+
container.classList.add('shrink');
26+
container.classList.remove('grow');
27+
}, HOLD_TIME);
28+
}, BREATHE_TIME);
29+
};
30+
31+
// Initialize the animation
32+
startBreathingAnimation();

‎Source-Code/JustRelax/style.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(90deg, #5567b7, #53a0ad);
9+
color: rgb(243, 250, 235);
10+
font-family: 'Dancing Script', sans-serif;
11+
font-size: large;
12+
font-weight: 500;
13+
min-height: 100vh;
14+
overflow: hidden;
15+
display: flex;
16+
align-items: center;
17+
flex-direction: column;
18+
margin: 0;
19+
}
20+
21+
.container {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
height: 300px;
26+
width: 300px;
27+
margin: auto;
28+
position: relative;
29+
transform: scale(1);
30+
}
31+
32+
.gradient-circle {
33+
background:
34+
conic-gradient(
35+
#5567b7 0%,
36+
#954ca4 40%,
37+
#fff 40%,
38+
#fff 60%,
39+
#53afb3 60%,
40+
#53a0ad 100%
41+
);
42+
height: 320px;
43+
width: 320px;
44+
position: absolute;
45+
top: -10px;
46+
left: -10px;
47+
z-index: -2;
48+
border-radius: 50%;
49+
}
50+
51+
.circle {
52+
background-color: rgb(2, 16, 43);
53+
height: 100%;
54+
width: 100%;
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
z-index: -1;
59+
border-radius: 50%;
60+
}
61+
62+
.pointer-container {
63+
position: absolute;
64+
top: -40px;
65+
left: 140px;
66+
width: 20px;
67+
height: 190px;
68+
animation: rotate 7.5s linear forwards infinite;
69+
transform-origin: bottom center;
70+
}
71+
72+
.pointer {
73+
background-color: lavender;
74+
border-radius: 50%;
75+
height: 20px;
76+
width: 20px;
77+
display: block;
78+
}
79+
80+
.container.grow {
81+
animation: grow 3s linear forwards;
82+
}
83+
84+
.container.shrink {
85+
animation: shrink 3s linear forwards;
86+
}
87+
88+
@keyframes rotate {
89+
from {
90+
transform: rotate(0deg);
91+
}
92+
93+
to {
94+
transform: rotate(360deg);
95+
}
96+
}
97+
98+
@keyframes grow {
99+
from {
100+
transform: scale(1);
101+
}
102+
103+
to {
104+
transform: scale(1.2);
105+
}
106+
}
107+
108+
@keyframes shrink {
109+
from {
110+
transform: scale(1.2);
111+
}
112+
113+
to {
114+
transform: scale(1);
115+
}
116+
}

0 commit comments

Comments
 (0)