CodemySite_Web development

  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 adde...

  Course from Brad Traversy Github code Features: audio play() pause() currentTime duration timeupdate ended e.target  e.clentWidth e.offsetX HTML link the font awesome in the head part for the audio play buttons music-info includes a song title and the progress bar audio embedded the cover image positions  at the left side the navigation is three control buttons CSS The cover image has a white circle inside for good looking. the cover image will rotate 360 degrees when the music is playing. animation-play-state:running/paused  more info MDN music-info hide behind the container first and transform up entirely, and also the opacity from 0 to 1 changing the progress width every millisecond JS select all the DOM needed all the songs name stored in the songs array, and the index init set to a number When loading the page, load the song showing the song title, image, and the audio source when click the play button, checking if the music is playing based on the classname"p...