Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Clock App React with TypeScript and SCSS

react, sass/scss, vite, typescript
CaceresCallieri•360
@CaceresCallieri
A solution to the Clock app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What challenges did you encounter, and how did you overcome them?

This project presented a great challenge in working with multiple APIs that depend on each other. The biggest hurdle was ensuring everything worked together seamlessly while maintaining organized and concise files. I found the original design somewhat lacking, especially regarding the background images. To enhance the style, I opted to use pixel art gifs to introduce movement to the app. Additionally, I employed a monospace font to better complement this new aesthetic.

In terms of extra features, I implemented a system that identifies four possible times of day (morning, day, afternoon, and night) and dynamically changes the background to correspond with each time period.

Looking ahead, there are a couple of things I would like to improve. Firstly, I aim to create an animation for displaying and returning from the 'More' section, perhaps using a simple scroll while keeping the background static. Additionally, I would like to devise a method for programmatically determining the number of background images available in the app files for the same time of day and selecting one at random. This would help keep the app more interesting and fresh over time.

What specific areas of your project would you like help with?

I eagerly await any recommendations or tips regarding this project. Thank you!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on CaceresCallieri's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License