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.
Build out a clock application and get it looking as close to the design as possible. Use the following APIs to retrieve the necessary data:
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.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- axios - Gets around some quirks with the built-in WindowOrWorkerGlobalScope.fetch() method.
- Luxon - Makes working with the date and time simpler.
- Ad Blockers can prevent
XMLHttpRequestsorfetch()from succeeding even when the site otherwise works in a browser or at the command line. This was something I struggled with for the Free IP Geolocation API. - I switched from using the built in
fetch()method for HTTP requests toaxiosbecauseaxioswas less picky about the setup.
- A Modern CSS Reset
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- CSS: Cascading Style Sheets
- Fun with Viewport Units
- How to Scale SVG
- SVG Attribute reference > viewBox
- How to make a background blur in CSS with one line of code
- How to Use CSS Grid for Sticky Headers and Footers
- Website - www.richardcyrus.com
- Frontend Mentor - @richardcyrus