Responsive Interactive Card Comp with html, CSS vanilla Javascript.
Design comparison
Community feedback
- @dannyswaggPosted over 2 years ago
Thank you so much for the feedback. I will make appropriate changes an implement the fixes you've suggested. Thanks.
0 - @DreamCoder7Posted over 2 years ago
Great job, Ugiomoh Daniel
But there is a little bit of a problem with your semantics usage. you use a div element whenever you want to use a wrapper or container. The problem with this is it's difficult for screen readers. You can fix or prevent this kind of problem using WAI-ARIA Roles. ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is consistent with user expectations of that type of object. For more
And I also notice that you use two heading element twice and that isn't a good practice. Here are some guidance that should help:
/* This is the two heading that use the same heading element and it's not mandatory but instead of using h1 in this case you can use h4 or h5 because h1 indicates the most important (or highest-level) heading on the page. */ /* <h1>How did we do?</h1> <h1 class="ht">Thank you!</h1> */ /* Instead of using onclick="" you can select the parent element and by using Event propagation you can do the same thing but applying DRY principle.*/ /* <div class="numbers" id="numbers"> <button onclick="star1()" id="A" class="botn">1</button> <button onclick="star2()" id="B" class="botn">2</button> <button onclick="star3()" id="C" class="botn">3</button> <button onclick="star4()" id="D" class="botn">4</button> <button onclick="star5()" id="E" class="botn">5</button> </div> */ const parentBtnEl = document.querySelector('.numbers'); parentBtnEl.addEventlistener('click', function(e) { const btn = e.target; if (btn.closest('A')) { // Do something.... } ...... });
0
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