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

Marvel quote generator with Marvel API and CSS Grid

#accessibility

@Haico-Paulussen

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

@elsh5544

Posted

Hey haico. Nice idea to make use of a Marvel quote API.

I have spotted an issue though. This API sometimes returns a very large quote and because of this the button for the next quote falls off the screen within my desktop browser. I can't scroll to reach the button when the text gets to large but i have been able to reach it again by using the zoom functionality. Consider allowing to scroll when the quote becomes to large.

Good job!

Marked as helpful

1

@Haico-Paulussen

Posted

Hi @elsh5544.

Thanks for your comment. I was a bit to fast with testing the app so i didn't get to see a very large quote. But now I have and I fixed the issue.

Thanks and happy coding!

0

@markteekman

Posted

Hey Haico! Love your use of Marvel quotes, big fan of Marvel myself 🙂 Don't know if it's possible with the API you've used, but it would be cool to see the person behind the quote e.g. "You took everything from me." - Wanda. Just an idea though.

To improve the accessibility and the usability of your solution a bit, consider using cursor: pointer; for when you're hovering over the randomization button.

Great work Haico!

Marked as helpful

0

@Haico-Paulussen

Posted

Hi @markteekman!

Thanks for your comment. I fixed the 'issue' and added the pointer.

Thanks!

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