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

Responsive Advice generator app with rotating dice usin vanilla css

@motuncoded

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


All feedbacks are welcome

Community feedback

@asbhogal

Posted

Hi Motunrayo,

Great job! The app functions well and matches the mockups nicely

Just a few things I think are worth mentioning here:

  • I've looked at your JS code, and you should ideally have a catch() method in your API call to catch any errors that may be thrown during the function parse. A common catch() block, added underneath the then() method, includes logging this error to the console to help with debugging. Here's a good article by MDN explaining this (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful)
  • Your button should be an element of its own and not nested in a div. This makes it inaccessible to keyboard users. I tried accessing it using mine, and wasn't able to.
  • It might be worth also formatting some of your code so its easier to read (some of your end parenthesis aren't indented, which can make it difficult for other developers to follow your code.) If you use VS Code, the Prettier extension can automatically do this for you. Here's a link to it Link
  • You should locally host your Google Fonts for privacy and performance reasons. Here's a good link explaining why and how to do this Link

Hope this helps!

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