This is a Codedamn guided project where you will build a digital clock screensaver app. This Project is build in react and uses external apis to get some additional data.
Your challenge is to design this page and integrate quotable api to get random quote and ipv6 with geolocation to get city name (Also can be done using HTML Geolocation API).
This Project focuses on React, but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
- Landing page should have a random quote at the top with a refresh button.
- It should have a dynamic background image according to the time.
- It should have a clock at the bottom of the screen with some other information like Day, Month, Date
- It should also show a dynamic greeting message.
- Finally it should show user's location with a More information toggle button.
- You can either use given 3rd party apis to get user location or also can use JS Geolocation API and get data after user's consent which is more precise then using apis.
- It should show a bottom panel on button click.
- Bottom panel should have some additional date time information.
- React.js
- Javascript
- HTML/CSS
- Quotable API to get random quote.
- JSONIP to get user's ipv6.
- Geolocation DB to get user's location information.
Your task is to build out the project as per the provided screenshots. You will find both a mobile and a desktop version of the design.
The designs are in image formats can be found in /designs.
You will find all the required images in the /public folder.