Submitted over 2 years ago

Advice generator with native js and parcel as a simple bundler

turtlecrab•550

@turtlecrab

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

Design comparison

SolutionDesign

Solution retrospective

My first project here! This site is awesome! I'm in my n-th attempt to learn frontend stuff and this community is just perfect for that!

So problems/questions I got during this project:

What's the best way to make a button in a situation like this? Is it ok to just put img inside a button? I suspect the way I did is not great for accessibility.
I couldn't make attribution footer behave normally in mobile view(so i just hid it). I tried to overwrite position: absolute with static, but couldn't find proper flexbox parameters so it would stick to the bottom or scroll when the advice is long. Probably I shouldn't have positioned it absolutely in the desktop view(and should've started with mobile-first approach).

Community feedback

Clément Creusat•1,655
@ccreusatPosted over 2 years ago
Hello and Nice job!

Hope it will help :

For the button, for accessibility purpose, I would add aria-label="text" on the button. "text" could be something like "generate random advice"

For the position of the footer, maybe remove the position:absolute and add a gap:4rem (more or less) on the <body>. I think for the demo of this challenge, would be enough :)

Enjoy coding!
Marked as helpful
0
turtlecrab•550
@turtlecrabPosted over 2 years ago
@ccreusat Thank you for your feedback! I didn't know about aria- properties, will look deeper into them!
0

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