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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS
• SCSS
• CSS Grid
• Mobile-first workflow
• React - JS library
• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

What I learned

I learned to use an API, used Hooks of react like useEffect and useState, also I practice the async-await to fetch the api

    useEffect(() => {
        fetch('https://api.adviceslip.com/advice')
        .then(response => response.json())
        .then(data => {
            setQuote(data.slip.advice)
            setId(data.slip.id)
        })
    }, []
    )

    const fetchRandomQuote = async () => {
        try{
            const response = await fetch('https://api.adviceslip.com/advice')
            const data = await response.json()
            setQuote(data.slip.advice)
            setId(data.slip.id)
        }
        catch(err){
            setQuote(err)
            setID("0")
        }
    }

Continued development

I want to continue development in React JS, I'm going to learn how to improve the order of my folders so that it's not so confusing.

Useful resources

• Fetching an API - This help to learn how I can use fetch.

Author

• Website - Alejandro Sunuc
• Frontend Mentor - @AlejandroIMP
• Twitter - @AlejandroRtw