Relaxer APP with Javascript

 

course from Brad Traversy

Github code

Features:

css animation

setInterval setTimeout

audio control

HTML

circle is a circle with solid color

text is for reminder messages in the center

pointer is the animated circle around the circle

gradient circle is the three sections gradient background behind the circle layer

audio with a control button

CSS

gradient circle is a conic gradient background and larger than the circle . 

the z-index of circle is -1, soo the gradient cicle is -2 (under the circle)

pointer is a small round outside of circle and gradient circle.

the pointer container is like the clock, rotating around

animation rotate infinitly

rotate from 0 to 360 degrees

When the class name contains grow, scale bigger

when the class name contains shrink, scale smaller

JS

select all the element DOM

init the totalTime,breathTime and holdTime

when loading the page, the function breathAnimation runs.

the text shows "breath in" and the circle scale larger with grow class name added

setTimeout breath time, then show"hold". After the hold time end,  it's time to "breath out" and with the shrink class name added

setInterval this one round animation for a total time running

For audio play() set up

when clicking the toggle button, the audio plays or pauses with muted