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.
https://codepen.io/hbar1st/full/vzXOxK/
(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).
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.
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…
I just tried it on my phone and both the sound and animations work correctly. 
Well done!
thanks! I must have gotten lucky! It doesn’t work well on iphone or ipad…
Yep, I’ve had many troubles with iPhones and iPads. Android phones however replicate the desktop behavior pretty well.
Thank you for showing me your thought process. It’s appreciated, big thanks.
Forgot to ask:
Css clocks or real clocks? As in table clocks Swiss clocks etc …
all of it! 
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)
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