Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice generator app

#sass/scss

@Simplyvoda

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first time fetching API's, please any feedback would be appreciated :) Thank you !!

Community feedback

@lyndabelfar

Posted

You did such a great job with this,I really like it ! I've seen your code and I think that it's pretty clean, but I have some notes:

Using asynchronous functions is generally better and more modern to fetch data.

In your HTML, you used a main tag then inside your main tag your added a div with the class of container, and it's pretty useless to add a container div inside a main tag.

Little other detail, you made it slicely bigger but it's clearly not a problem.

but yes bravo for your work :)

Marked as helpful

0

@Simplyvoda

Posted

@lyndabelfar thank you so much for the feedback, I would work on the sizing and would check out asynchronous functions :)

1

@freakyjones

Posted

Hi Vodina,

** congrats on fetching data through API 🎉🎉🎉**

I just saw your code and here is one suggestion for you. Always handle errors on your API calls

    fetch('https://api.adviceslip.com/advice').then((data) => {
        // console.log(data);
        return data.json();
    }).then((adviceData) => {
        // console.log(adviceData.slip.id);
        document.getElementById('advice-id').innerHTML = adviceData.slip.id;
        // console.log(adviceData.slip.advice);
        document.getElementById('advice-box').innerHTML = adviceData.slip.advice;

    }).catch((err)=>{ 
        console.log("do whatever you want with this error", err)
    })

Hope this helps, Thanks Happy coding :)

Marked as helpful

0

@Simplyvoda

Posted

@freakyjones oops I totally forgot that bit , thank you for the feedback would be more careful next time :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord