Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

50Projects-HTML-CSS-JavaScript : Just relax #40

Merged
merged 2 commits into from
Dec 19, 2024
+183 −0
Merged

50Projects-HTML-CSS-JavaScript : Just relax #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f27832
Add the project
tajulafreen Dec 19, 2024
825e5b1
update the with the project
tajulafreen Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Just Relax</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/JustRelax/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/JustRelax">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
24 changes: 24 additions & 0 deletions Source-Code/JustRelax/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Just Relax App</title>

</head>

<body>
<h1>Just Relax !!</h1>
<div class="container">
<div class="circle"></div>
<p id="text"></p>
<div class="pointer-container">
<span class="pointer"></span>
</div>
<div class="gradient-circle"></div>
</div>
</body>
<script src="script.js"></script>
</body>
</html>
32 changes: 32 additions & 0 deletions Source-Code/JustRelax/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/* eslint-disable no-use-before-define */
const container = document.querySelector('.container');
const text = document.querySelector('#text');

const TOTAL_TIME = 7500;
const BREATHE_TIME = (TOTAL_TIME / 5) * 2;
const HOLD_TIME = TOTAL_TIME / 7;

// Start the animation
const startBreathingAnimation = () => {
animateBreathing();
setInterval(animateBreathing, TOTAL_TIME);
};

const animateBreathing = () => {
text.textContent = 'Breathe In!';
container.classList.add('grow');
container.classList.remove('shrink');

setTimeout(() => {
text.textContent = 'Hold...';

setTimeout(() => {
text.textContent = 'Breathe Out!';
container.classList.add('shrink');
container.classList.remove('grow');
}, HOLD_TIME);
}, BREATHE_TIME);
};

// Initialize the animation
startBreathingAnimation();
116 changes: 116 additions & 0 deletions Source-Code/JustRelax/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap');

* {
box-sizing: border-box;
}

body {
background: linear-gradient(90deg, #5567b7, #53a0ad);
color: rgb(243, 250, 235);
font-family: 'Dancing Script', sans-serif;
font-size: large;
font-weight: 500;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
margin: 0;
}

.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
width: 300px;
margin: auto;
position: relative;
transform: scale(1);
}

.gradient-circle {
background:
conic-gradient(
#5567b7 0%,
#954ca4 40%,
#fff 40%,
#fff 60%,
#53afb3 60%,
#53a0ad 100%
);
height: 320px;
width: 320px;
position: absolute;
top: -10px;
left: -10px;
z-index: -2;
border-radius: 50%;
}

.circle {
background-color: rgb(2, 16, 43);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
}

.pointer-container {
position: absolute;
top: -40px;
left: 140px;
width: 20px;
height: 190px;
animation: rotate 7.5s linear forwards infinite;
transform-origin: bottom center;
}

.pointer {
background-color: lavender;
border-radius: 50%;
height: 20px;
width: 20px;
display: block;
}

.container.grow {
animation: grow 3s linear forwards;
}

.container.shrink {
animation: shrink 3s linear forwards;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

@keyframes grow {
from {
transform: scale(1);
}

to {
transform: scale(1.2);
}
}

@keyframes shrink {
from {
transform: scale(1.2);
}

to {
transform: scale(1);
}
}