Just Breathe... is a responsive webpage that run a 5-2-5 breathing exercise to help you relax. Sit down in a comfortable position and take five seconds to fill up your lungs, hold your breath for two seconds, and take five seconds to breathe out. George Alonso, an anxiety coach, recommends repeating this exercise for three to ten minutes while paying attention to the way the air feels moving in and out of your body (Morgan C, 12 breathing exercises to help you relax in minutes, https://www.readersdigest.com.au/healthsmart/12-breathing-exercises-to-help-you-relax-in-minutes).
This webpage has a relaxing background music to assist you unwind.
-
This project is inspired by one of the Traversy Media's tutorial(https://www.youtube.com/watch?v=l-1ZrU6avzI&t=634s). Thanks Brad😊
-
I want to add an extra hold period after exhale so I added another setTimeout() but somehow the timing just didn't work... Finally I realized I need to update the math formulas after I tweaked the total time🤦♀️
-
First I only used a simple white circle but I found it quite boring, so I used Figma to draw a wavy circle to make it a little more interested. This is my first time to use Figma to create something, thanks Dev Ed's Figma Crash Course(https://www.youtube.com/watch?v=4W4LvJnNegA) so I can learn the basic in only 40 minute.
-
I want to add a selection page for people to choose how long they want to do this breathing exercise for, like 1min, 3mins or 5mins. Also an alert to let them know it's finish after the exercise.
Music by enrique27naveda from Pixabay