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
- React - JS library
- Tailwind CSS - For styles
- Expand the time details with animation
Here are the API resources I used while working on this project:
- https://api.ipify.org?format=json
- http://www.geoplugin.net/json.gp?ip=xxx.xxx.xxx.xxx
- http://worldtimeapi.org/api/ip/xxx.xxx.xxx.xxx
- https://api.quotable.io/random
- https://corsproxy.io
- https://api.codetabs.com
-
Frontend Mentor - @vyonizr
- Afternoon background by Harry Burk on Unsplash