This is a solution to the Advice generator 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 app depending on their device's screen size
☑ See hover states for all interactive elements on the page
☑ Generate a new piece of advice by clicking the dice icon
☑ Scripts using both the XMLHttpRequest object and the Fetch API.
☑ Disabled the button for the duration of caching to allow for better UX.
☑ Added loading animation to the button during its disabled period.
☑ Smooth transitions of advice text content.
- Live Site URL: Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS
- 7-1 SASS Architecture
- Mobile-first workflow
- XMLHttpRequest
-
This is the first project I have worked on involving external API's. I understand that the XMLHttpRequest object is a somewhat outdated solution to asynchronous data retrieval, but I wanted to understand how it all works from the ground up.
-
I learned about the
Cache-ControlHTTP headerfield and its correspondingmax-agedirective.
- MDN Web Docs Cache-Control HTTP Header
- Website - Jake Godsall
- Frontend Mentor - @jakegodsall
- LinkedIn - @godsalljake
I received significant advice regarding the caching of API responses from Alexander Morse on Frontend Mentor.
This project was originally completed on 23rd September 2022.
This repository is part of a series of repositories that have recently been cleaned and updated as part of an overhaul of my GitHub profile. The purpose of this overhaul was to ensure that each repository reflects my current development standards and practices, and to provide a cleaner, more professional appearance.
The project is updated as of 28th December 2023.
This project is open source and available under the MIT License.