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.
Note: Delete this note and update the table of contents based on what sections you keep.
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 URL: Advice Generator Repo
- Live Site URL: Advice Generator Live URL
I created a centered advic container with a h1 for the advice number and a sibling div for the advice content i then created a div for the diviver image. I used the picture element to contain the dekstop and mobile dividers for each resolution. Then created a button to get a new piece of adivce.
In the JavaScript, i created the code to fetch the advice inside a function. That funcion is called every time the page is loaded, and everytime the button is clicked.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- JavaScript
This was the first time i had written code to call an API. I found a youtube video where he explained how to code the solution. I have never used promises before so did not totally understand how they work, but managed to tweak the code to work for my solution.
I am going to do more research on API calling and also on promises in JavaScript
-
Display Random Advice On Your Website or Web App Using Advice Slip JSON API - I watched this video and tweaked the code to work for my solution.
-
APIs for Beginners - How to use an API - This was a more general look at how API's work and how to use them.
- Frontend Mentor - @MarioLisbona
- Twitter - @MarioLisbona