HenryAgu / adviceGen

Frontend Mentor - 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

• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Continued development
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

Links

• Solution URL: (https://github.com/HenryAgu/adviceGen.git)
• Live Site URL: (https://gorgeous-churros-93d3a2.netlify.app/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• json
• javaScript

What I learned

I was able to practice async and await and also the fetching of json data

    const res = await fetch("https://api.adviceslip.com/advice")
    const data = await res.json()

Continued development

I will like to do more projects using json in order to master it properly.

Author

• Frontend Mentor - @HenryAgu
• Twitter - @_henryi