Vanilla js and css with flexbox

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, It's close to design, responsive and everything works as supposed to. Great work on this one! It's totally fine to use display: none for this challenge. In general you'll end up using display: none and visibility: hidden a lot depending on your need; don't hesitate to use but ofc. we should double check to see if they break the design. As it is user can submit whether a rating is picked or not. You can simply add an if statement to check like:

  submitButton.addEventListener("click", () => {
      if (selectedRatingIndex) {
          ratingCard.classList.add("hidden");
          thankYouCard.classList.remove("hidden");
      }
  });
  

  Also this is where you'd want to use visibility: hidden in most cases. To inform the user you can add a warning text with absolute position so it won't effect rest of the design. And show when the button is clicked without selection.

  For semantic markup, you should use landmark containers instead <div>. To achieve this you can change .container and .attribution to <main class="container"> and <footer class="attribution">

  Lastly, when u use headings always start by level one since the page needs a <h1> for better SEO result. We should limit h1's by 1 per page. But in your case you can change both headings to h1 since one is hidden by default. Nice work on this one again and happy coding :)

  Marked as helpful

  1