Breathing Pacer App

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)
+