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
- Solution: Frontend Mentor - Advice Generator App 🛠️
- Live Site: View Live Site - Advice Generator App 🌐✨
- Advice Slip API: The API used to fetch random advice dynamically.
- Tailwind CSS: A utility-first CSS framework to streamline styling.
- Handling API JSON Data: I explored using the Fetch API to retrieve and process JSON data from an api dynamically.
- Fetch API Cache Option: I utilized the cache option of the Fetch API to override the default API behavior and request a fresh quote on each button click.
- Request Debouncing: I applied a debouncing technique to efficiently manage API requests, preventing multiple requests from firing simultaneously.
- Quoting in HTML: Quotations, Citations, and Blockquotes: Helped understand semantic HTML for quotes.
- W3Schools: JavaScript Fetch API: A beginner-friendly guide to understanding the Fetch API.
- W3Schools: JavaScript Promises: Excellent explanation of promises and their usage.
- W3Schools: JavaScript Async/Await: A handy reference for simplifying asynchronous JavaScript.
- Frontend Mentor - Advice Generator App - Rebecca Padgett 🛠️
Created by Fortune Iyoha. 🌟 Connect with me on my Frontend Mentor profile or follow me on 𝕏 (formerly Twitter) for updates and web development discussions. 💬
A huge thanks to @bccpadge for her effective method of cache setup, which inspired me to implement a reliable fetching process in this project.