Merge pull request #40 from tajulafreen/Just_Relax

50Projects-HTML-CSS-JavaScript : Just relax
tajulafreen · Dec 19, 2024 · 2b557a8 · 2b557a8
2 parents 5d01f91 + 825e5b1
commit 2b557a8
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -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>

diff --git a/Source-Code/JustRelax/index.html b/Source-Code/JustRelax/index.html
@@ -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>
diff --git a/Source-Code/JustRelax/script.js b/Source-Code/JustRelax/script.js
@@ -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();
diff --git a/Source-Code/JustRelax/style.css b/Source-Code/JustRelax/style.css
@@ -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);
+  }
+}