Advice generator app solution
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.
Table of contents
Overview
The challenge
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
Screenshot
- Desktop version
- Active
- Mobile version
Links
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
What I learned
Through this project, I have practiced Axios, a promised based HTTP client for node.js and the browser, the Async function. And how to scale a text to fit inside an element.
06-08-22 added fetch()
method, and {catch : no catch}
which solved the problem of no response of browsers (in my case, firefox). The cache property. Special thanks to @elaineleung and @anas-cd for Advice.
Continued development
I am not sure I used correctly Axios and the async function.
- [x] The page is working in Chrome but not responding in firefox after the first request. 06-08-22 Resolved.
- [ ] Some advice contains spcial charactors that can't be present correctly. There must be a solution for this.
Useful resources
- Text Scaling - Some advice has too much text that may cross the divider, this site helps me to fit the text inside the container.
Author