Practice makes a man perfect.
Learning JavaScript is not something that can be accomplished overnight or by just watching some tutorial, one thing that every skill requires you to do if you want to be a master at it, is definitely practice. After going through the JavaScript section of the course, I decided to put my freshly learned skills to practice.
A friend of mine shared a Dribble design for a clock app, so I decided to clone that app as close as possible. Initially, I was unaware that HTML and CSS can be such powerful tools when creating a UI. When I first looked at the app design, I didn't even think it was possible to make such UI with just HTML and CSS but when I started working on it, it all just came naturally to me.
After I was done adding the content and styling it, it was time to make the clock work like clockwork :D. I tried but I couldn't come up with my own logic to make the clock work so I had to take help from a YouTube tutorial. Even after watching the tutorial, I was unable to figure out how the logic was actually working because I had never seen any of the methods being used in the tutorial such as Date(), getSeconds(), getMinutes() and getHours(), so, I decided to write the logic by coding along and after the app was working I printed out each of the methods with console.log() to how each method was contributing to the working of the app and after that, I was completely able to understand the logic of the app.
App link: https://amazing-curran-015dd1.netlify.app/
Source code on Github: https://github.com/saqibs3291/myClock_APP
Top comments (6)
ah, nice design here. Only thing to refactor is the opacity in the background, should be more subtle so it looks real as in material design concept.
Thanks for the suggestion brother. I will consider it.
Good luck :)
Looks pretty spot on to me. Good job.
Looking colorful man ! ;)
Thanks bro. 🙂