Day 5: Box Breathing Exercise

About This Project

This application is a guided box breathing tool designed to help users practice mindful breathing for relaxation, focus, and stress reduction. Box breathing is a simple technique where you inhale, hold, exhale, and hold again for equal counts, visualized as moving along the four sides of a box.

The app provides a clear, animated visual using a canvas, color-coded cues for each phase, and a round-based structure to encourage completion of a full breathing cycle. The design is minimal, accessible, and works on both desktop and mobile.

How it Works

1. Begin: Press the “Begin” button to start the exercise.
2. Breath Rounds: Each session consists of 5 full box breaths. The current breath number is displayed.
3. Phases: Each breath has four phases:
   • Inhale (green): Breathe in for 5 seconds as the box animates along one side.
   • Hold (yellow): Hold your breath for 5 seconds as the animation moves up.
   • Exhale (red): Breathe out for 5 seconds as the animation moves across.
   • Hold (purple): Hold again for 5 seconds as the animation completes the box.
4. Visual Cues: The phase name and a countdown timer are shown, with colors matching the current phase.
5. Completion: After 5 breaths, a “Congrats!” message appears and you can restart the exercise.

The app uses large fonts, high-contrast colors, and a simple layout for maximum accessibility.

Creation Process

Create a visually guided box breathing app.
Instructions:
1. Show a "Begin" button to start.
2. Animate a box on a canvas, drawing one side per phase (inhale, hold, exhale, hold).
3. Each phase lasts 5 seconds, with a countdown and color-coded phase label.
4. Display the current breath number (e.g., "Breath: 1/5").
5. After 5 breaths, show a "Congrats!" message and allow restarting.
6. Use Tailwind CSS for styling, large fonts, and clear, accessible buttons.
7. Ensure the app is responsive and works on desktop and mobile.

- Used HTML5 canvas for smooth box animation.
- Color-coded each phase for clarity: green (inhale), yellow (hold), red (exhale), purple (hold2).
- Managed breathing state and timing with JavaScript intervals.
- Provided a single "Begin" button that toggles to "Again?" after completion.
- Ensured accessibility with large text, high contrast, and keyboard-friendly controls.