Inspiration
Most people struggle to read analogue clocks, so a digital one is considered more convenient.
What it does
It tells time in a readable way that is intuitive for everyone, therefore saving the average person time they would have spent figuring out which hand placement translates to what time.
How I built it
Using CSS, I made the clock not only visible but pleasing to the eye. I used JavaScript to make it functional and passed in a few conditionals to make sure things like meridiem are accounted for and that single-digit times are preceded by a zero. Since we use 24-hour clocks in South Africa, I made the default code display the time in 24-hour format. As added consideration for users more familiar with 12-hour loop clocks, I added an optional conditional statement that could be used instead.
Challenges I ran into
Some of the CSS I used was not supported on the Safari browser, so I had to make adjustments by writing additional styling code to ensure that the styling is uniform across all browsers, therefore giving users the same experience regardless of their browser choice.
Accomplishments that I'm proud of
I'm proud of the fact that I managed to produce a digital clock in React.js.
What I learned
I learned that it is good practice to use CSS to specify window dimensions and behaviour to maintain consistent and aesthetic visual displays, even when the user adjusts the window. I also learned that it is important to anticipate user preferences and accommodate them before putting the website out there.
Log in or sign up for Devpost to join the conversation.