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 using HTML5, CSS3 and Vanilla js

@Oluwalolope

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


What are you most proud of, and what would you do differently next time?

I'm most proud of the loading animation is put and also fetching data from the Advice Slip Api.

Community feedback

@DanijelAdrinek

Posted

Hey Adeleye, your solution doesnt match the design, as a frontend developer, it is a good practice to take a look at the size of the design, lower the size of your browser to that specific size, and then take a screenshot, put if over the design, and lower the opacity to 50% to make sure it matches. you also forgot the box shadow and didnt make the button get a box-shadow on hover, also your code doesnt return a random advice, it returns the same one every time, I encountered that same bug myself too, its the server, but there is still a way you can fix it:

const id = Math.floor(Math.random() * 200);
const response = await fetch(`https://api.adviceslip.com/advice/${id}`);

this way you will fetch an ID with a random id between 1 and 200, since the API has a bit over 200 advices, this will work in returning a random advice every 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