React JS, SASS, Javascript State Variables Into Inline CSS
Solution retrospective
Everything seems to work as I planned. There wasn't any information as far as if the clock should count down or count up from 0, nor if the circular progress bar should start full and go backwards or start at nothing and go to full.
I set it up so the clock counts down and the circular progress bar starts at nothing and goes to full once the clock has counted down to 0.
I utilized a bit of inline CSS styling with Javascript state variables to make the colors, fonts, and circular progress bar change accordingly. I also utilized setInterval to call a function with if/else if statements to evaluate conditions and change the clock accordingly, along with calculating the total number of minutes/seconds remaining by the value remaining on the progress bar to increment the circular progress bar accordingly.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hardy333
Hey, very nice solution, good job, as you sad everything works just fine.
Animations are very cool.
Few thing you can fix:
- On firefox number inputs still shows default up and down arrows on number inputs to fix that use this: input[type=number] { -moz-appearance:textfield; } .
- On both chrome and firefox number inputs has bugs while trying to set inputs by keyboard instead of clicking up/down arrow keys, I don't know what the bug is or why it is happening, so basically if you type 1 or 0 on inputs then thy lock on that value and user cant change by keyboard, but it is working if you click up/down arrows.
Few additional features you can add if you want:
-
localStorage support in order to maintain settings state such es font-family and color even if user refreshes browser.
-
very small thing but very important in my opinion: numbers on circular pomodoro clock are constantly changing their sizes since every second there is different number on screen. so try to gave some fixed width value to number container in order to fix shifting and moving other numbers... hope you will understand what I mean.
Good luck.
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord