Advice Generator app using HTML5, CSS3 and Vanilla js
Design comparison
Solution retrospective
I'm most proud of the loading animation is put and also fetching data from the Advice Slip Api.
Community feedback
- @DanijelAdrinekPosted 7 months ago
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 GitHubJoin 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