This is a solution to the Clock app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- View the current time and location information based on their IP address
- View additional information about the date and time in the expanded state
- Be shown the correct greeting and background image based on the time of day they're visiting the site
- Generate random programming quotes by clicking the refresh icon near the quote
- Solution URL: Solution here
- Live Site URL: Demo here
- Semantic HTML5 markup (JS generated)
- CSS custom properties and media queries
- Flexbox
- Web-first workflow
- Vanilla JavaScript
- Vite
This challenge helped me understand better how to work with fetching data from REST APIs but also allowed me to start learning about asynchronous programming and using the async await keyword instead of the fetch then.
My goal is to improve my asynchronous programming skills and start to apply some error handling, especially in these cases where we are dealing heavily with external information and servers.
This project might be refactored in the future to be a Chrome extension.