Skip to content

Inhala y Exhala uses CSS, HTML, and JavaScript to lead the user through a calming breathing exercise.

Notifications You must be signed in to change notification settings

jssckbl/relaxer-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Inhala y Exhala Breathing App

Take a breath or two and see it in action at Inhala y Exhala App.

The Inhala y Exhala Breathing App visually guides the user through an unlimited number of breath cycles. The circle increases in size for about 5 seconds, holds for 3 seconds, and decreases in size for another 5 seconds. The circle dynamically responds to each of the 3 stages. The white dot moving around the circumference also provides a visual queue for the user.

One full cycle will take just over 13 seconds.

CSS, HTML, and JavaScript are used.

Images below show the three stages.

Inhale

circle at inhale stage

Hold

circle at hold breath stage

Exhale

circle at exhale stage

This project is built off of the Relaxer App found in the 20 Web Projects With Vanilla JavaScript tutorials by Brad Traversy.

About

Inhala y Exhala uses CSS, HTML, and JavaScript to lead the user through a calming breathing exercise.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published