Submitted about 2 years ago

Marvel quote generator with Marvel API and CSS Grid

Haico Paulussen• 170

@Haico-Paulussen

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Advice generator app

HTML
CSS
JS
API

2junior

View challenge

Design comparison

SolutionDesign

Community feedback

joost elshof• 20

@elsh5544

Posted about 2 years ago

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

Haico Paulussen• 170

@Haico-Paulussen

Posted about 2 years ago

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!

Mark Teekman• 365

@markteekman

Posted about 2 years ago

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

Haico Paulussen• 170

@Haico-Paulussen

Posted about 2 years ago

Hi @markteekman!

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

Thanks!

Please log in to post a comment

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