From c57c12f69eb3f7b24d05319c30b616529715b928 Mon Sep 17 00:00:00 2001
From: Srishti Soni <92056170+shimmer12@users.noreply.github.com>
Date: Sat, 11 Oct 2025 21:11:12 +0530
Subject: [PATCH] Breathing Pacer App

---
 Projects/1-Beginner/Breating-Pacer-App.md | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 Projects/1-Beginner/Breating-Pacer-App.md

diff --git a/Projects/1-Beginner/Breating-Pacer-App.md b/Projects/1-Beginner/Breating-Pacer-App.md
new file mode 100644
index 00000000..801bb1e0
--- /dev/null
+++ b/Projects/1-Beginner/Breating-Pacer-App.md
@@ -0,0 +1,48 @@
+# Breathing Pacer App 🧘
+
+**Tier:** 2-Intermediate
+
+In our fast-paced world, mindfulness and relaxation have become essential for mental well-being.  
+The **Breathing Pacer App** provides a simple, web-based tool to help users focus on breathing exercises.  
+It visually guides the user through cycles of *inhale*, *hold*, and *exhale* phases using smooth animations and text prompts.  
+
+This project helps developers learn how to synchronize CSS transitions with JavaScript timing functions (`setTimeout`, `setInterval`) — key concepts for interactive and time-based web experiences.  
+
+## User Stories
+
+- [ ] User can see a large, central visual element (e.g., a circle or bubble) on the screen.
+- [ ] User can click a **Start Session** button to begin the breathing exercise.
+- [ ] User can see the circle **expand** smoothly during the “Breathe In” phase.
+- [ ] User can see the circle remain **static** during the “Hold” phase.
+- [ ] User can see the circle **shrink** smoothly during the “Breathe Out” phase.
+- [ ] User can see a text prompt update with each phase (e.g., “Breathe In”, “Hold”, “Breathe Out”).
+- [ ] User can see the breathing cycle **repeat automatically** in a continuous loop.
+- [ ] User can click a **Stop Session** button to end the exercise.
+- [ ] User can experience a calm and fluid visual rhythm without any external libraries.
+
+## Bonus Features
+
+- [ ] User can adjust the duration of the **inhale**, **hold**, and **exhale** phases using sliders or input fields.  
+- [ ] User can choose from predefined breathing patterns such as:
+  - Box Breathing (4–4–4–4)
+  - Relaxing Breath (4–7–8)
+  - Simple Calm (5–5–5)
+- [ ] User can enable a gentle **sound cue** at the start of each phase.
+- [ ] User can toggle between **Light** and **Dark Mode**.
+- [ ] User preferences (selected pattern, durations, theme) are saved in **localStorage**.
+- [ ] User can view a minimal stats display showing total cycles completed.
+
+## Useful links and resources
+
+- [MDN: Using CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+- [MDN: `setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+- [MDN: `setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+- [Calm App’s Breathe Bubble](https://www.calm.com/)
+- [Headspace Breathing Exercises](https://www.headspace.com/meditation/breathing-exercises)
+
+## Example projects
+
+- [Simple Breathing Exercise (CodePen)](https://codepen.io/search/pens?q=breathing+exercise)
+- [Mindful Breathing Animation (CodePen)](https://codepen.io/search/pens?q=mindful+breathing)
+- [Interactive Breathing Exercise in JS](https://codepen.io/search/pens?q=breathing+circle)
+