[code still needs review] Animated Pomodoro clock with React.js and SCSS

[code still needs review] Animated Pomodoro clock with React.js and SCSS
0

#1

I just started using React.js for the first time and I plan to try it again for the calculator project (which i’ve left till last). But in the meantime, i would appreciate any feedback on the code I wrote for this Pomodoro Timer project.

(Note that the audio doesn’t play on some mobile browsers. Also i have noted that the animation fails to stop on some mobile as well when stop or reset buttons are clicked).


#2

I always question myself why didn’t think of that when see something like your project. Most of my time is spent on beautifying things. Should i do that like this or like that? What i’m trying to ask is: What is your thought process? Do you see something and say: " It looks cool, i’ll replicate that with lil’ of my own flair added" or get idea on top of your head? I honestly just asking. I’m asking 'cause i can do fast functionality and responsiveness. Beautifying, if i’m not told that something has to look certain way, i simply don’t have an eye for that stuff. My projects although functional “up to spec” so to speak, they always look plain compared to others.


#3

Fair question. Sometimes when i like the concept, i delay starting the project to brainstorm ideas on how it should look. This is what happened here. I started out by looking online for how people make clocks and timers. Nothing really clicked because either it was too simple and i wasn’t inspired, or too fancy and i could never make anything like that! So i procrastinated a bit and kept thinking in the meantime. I was watching a movie which started out listing the logos of the production companies and one of the logos seemed to look like a plain circle with their initials inside but then it started to move with the circles moving around in a concentric manner. I was impressed and immediately thought that i could try to replicate the motion in css. And once i did that, i tried sticking the time in the middle and again, liked the way that looked so i just made use of it in my project.
After that i spent a long time figuring out the remaining elements. Their shape and location took a lot of trial and error till i felt satisfied. I also got lucky and inspired when i saw the curly google font, it made me want to tilt it to make it look like leaves of a tomato. I don’t know if i achieved that but i thought it at least added some fun to the circles. Anyway, i usually start with the way i want something to look because that is the hardest for me. I should probably spend more time designing the backend!!
Hope this helps…


#4

I just tried it on my phone and both the sound and animations work correctly. :slight_smile:

Well done!


#5

thanks! I must have gotten lucky! It doesn’t work well on iphone or ipad…


#6

Yep, I’ve had many troubles with iPhones and iPads. Android phones however replicate the desktop behavior pretty well.


#7

Thank you for showing me your thought process. It’s appreciated, big thanks.


#8

Forgot to ask:
Css clocks or real clocks? As in table clocks Swiss clocks etc …


#9

all of it! :smile: I looked up stuff on codepen and general stuff on google (just basically looking for inspiration).
for eg. there’s a clock that wakes you up slowly and changes its hue slowly too until it is very bright, I thought about trying that (but adjusted for the web)


#10

could you help me with my clock project, i used react and i have been stuck on it for over a week. here’s the codepen link https://codepen.io/iamrc1/pen/NLLMBY/?editors=0010