Design comparison
SolutionDesign
Solution retrospective
- Did I use the aria attributes correctly? I need to learn a lot more about this.
- I'm still fuzzy on the times to employ min-width, max-width, or width? It works, but could it better? More flexible?
- JavaScript - is there a difference between accessing an element directly and creating a variable then referencing the variable?
- What about getElementById versus querySelector? Anything else you can suggest is much appreciated.
Cheers!
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Jason Greenwald! 👋
It's great to see you completing another challenge! So, congratulations! 🎉
Regarding your questions:
- In general, you want to do some testing after to see whether everything is correct or not. Have you tried using screenreader on the site? In this case, it's good that you have added
aria-label
to theinput
and the social media links. But for the social media links, all of them say the same thing ("Share the news on Facebook"). Also, I would recommend removing thelabel
because it has theinput
already have thearia-label
. - For the
width
, I rarely use it. Also, I rarely usemin-width
either. Formax-width
, in this case, I would set amax-width
on the container (an element that wraps the page content) to make sure that they won't fill the entire page. I think for the logo, it's okay to set awidth
since it won't cause any issue. - Variable in programming is used to store data. This way, you won't have to type the same code over and over again. You can just reference it by declare the name of the variable. In this case, I notice that
document.getElementById("btn-rounded")
is repeated twice. So, you might want to create a variable. This way, if you change theid
of the button for some reason, then you just need to change the code on the variable itself. Then, everything will get updated. - I would suggest using
querySelector
. Also, I recommend using all classes begin withjs-
to select DOM elements within the JavaScript. Keep in mind, that only use thejs-
classes only for JavaScript purposes. This is important to separate the classes for CSS and JavaScript. This will make sure that if you change the styling, you don't accidentally destroy or disturb the functionality. This practice is known as separation of concerns.
// Example const form = document.querySelector(".js-form");
Some suggestions.
- Always specify the
type
of thebutton
. In this case, set the type of them astype="submit"
. It's going to prevent the button from behaving unexpectedly. - Why does when I submit a wrong email, the input filled with
example@email/com
? I would only expect the warning message to appear.
I hope this helps! Happy coding! 😁
Marked as helpful0@jaycgreenwaldPosted over 2 years ago@vanzasetia Thank you for the thorough feedback! I really appreciate it. In answer to the last question about the "example@email/com" - I saw it in the design photo and thought it was needed. I didn't realize it was in the field to demonstrate the error caused by an invalid email. I'll take it out when I resubmit. Thanks again!
0 - In general, you want to do some testing after to see whether everything is correct or not. Have you tried using screenreader on the site? In this case, it's good that you have added
Please log in to post a comment
Log in with GitHubJoin 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