Vineeth• 110
@callmeVineeth
Posted
Really nice work, love your design , codes where well executed. I think you can also set a default quote if the api fails to load, then you can avoid the error message.
0
Design comparison
Solution retrospective
Hi All,
Disclaimer: The quote API stopped working for some reason while I'm submitting this challenge, so it may not load correctly in this app!
I've been yearning to do this project for a while now. It was a good practice for working with thunks in React. In my opinion, this clock app would be perfect as a screen saver for a more complex application.
This app uses three different APIs for:
- Motivational quotes (the programming ones were not working). Users can generate a new quote each time the refresh icon is clicked.
- Timezone and location based on their IP address.
- Time details once they expand the side panel.
The overall application look is dependent on the current time:
- Between 5AM and 6PM - bright colors, daytime background and a sun icon
- Between 6PM and 5AM - dark colors, nighttime background and a moon icon
For getting the current time, I used the Date object as it would be irrelevant to get it from the API as well. I also decided to implement 12 hour time format since it can be understood by every user.
I also added some loading bar components for better UX.
As always, I'd be grateful for any tips or suggestions.
Happy Coding!
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