/Timer-

Timer with functions play/pause/stop/removeall/archive/change-colors/help

Primary LanguageCSS

Timer-not-finished-yet

Timer

Hello everyone! There, I'd like to show you project, which I made ON MY OWN, but the design and functionality was simply an inspiration from a course video from MMC SCHOOLS' course.


Functionality

*** Play button - after clicking it timer runs, counting up the current time every second (it's secured from being triggered more than one time by adding css class on timer's parent and it's watching it if contains that on every click)

*** Pause button - after clicking it timer stops, but keeps current time with the value present in click-time

*** Stop button - after clicking it, resets timer, interval function and adds measurement to measurement-container

*** Reset button - after clicking it, resets every element to the start, including removing measurements from measurements-container

*** Archive button - toggles a view on measurements-container

ALSO, THERE ARE TWO ADDITIONAL FEATURES AT RIGHT TOP:

*** Brush icon - simply allows user to change PRIMARY COLOR ROOT CSS VALUE by getting color of the circle, and then applying it to all element with this variable (5 colors included)

*** Help icon - contains descriptions of all buttons

///////////////////////////////////// todo: localstorage, more than 6 measurements on list rather than elements of div, all in english

MORE SOON :)