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 using flex

@mostafa93sh

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

Community feedback

Dytoma 570

@Dytoma

Posted

Hey👋 Good job on completing this challenge.

However I do have some suggestions to improve your solution. -The dice is supposed to on Click get provide a new advice to the user so instead of using a div to wrap it I will suggest using a button and add some accessibility to it. Instead of <div class="green-circle"><i class="fa-solid fa-dice-five black"></i></div> I will suggest this code <button class="green-circle" aria-label="new advice"><i class="fa-solid fa-dice-five black" aria-hidden="true"></i></button>.

You can read more about accessibility on MDN ARIA Docs 📚

  • You can also select this button element in your main.js file and add an event listener (click) and trigger the function that fetches the advice as a call back.

Code: document.queryselector(button).addEventListener('click', () => getQuotes()

Happy coding😇

Marked as helpful

0

@mostafa93sh

Posted

@Dytoma Great idea , thanks for your time .

0
Dytoma 570

@Dytoma

Posted

@mostafa93sh You're welcome😇

0

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