Responsive Interactive Card Comp with html, CSS vanilla Javascript.

Community feedback

• 

  Ugiomoh Daniel•200

  @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
• 

  Abreham Nigussie•470

  @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