Responsive Rating Component Cards

Community feedback

• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted over 2 years ago

  Hi darkknight1975, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  I will try to help you and explain why you are selecting only the first one.

  And I realized that what is causing the error was actually the problem that you made another html page, so every time we change pages the content reloads leaving nothing saved!

  To fix this I took the content of the other page and passed it to one, I created a parent div around the content that will be hidden when the user doesn't choose a button!

  I'll send the code I made:

  <section id="firstCard">//content</section>

  <section id="thanksCard">//content</section>

  I changed the thanksCard display:

  #thanksCard { display: none;}

  And this was the js code I used:

  let submit = document.querySelector("#button");
  let rateAgain = document.querySelector("#rate-again");
  let ratings = document.querySelectorAll(".btn"); //btn
  let actualRating = document.getElementById("rating");
  
  rateAgain.addEventListener("click", function () {
      document.getElementById("firstCard").style.display = "block"
      document.getElementById("thanksCard").style.display = "none"
  })
  
  ratings.forEach((element) => {
      element.addEventListener("click", () => {
          actualRating.innerText = element.innerText;
          submit.addEventListener("click", function () {
              document.getElementById("thanksCard").style.display = "block"
              document.getElementById("firstCard").style.display = "none"
          })
      })
  })
  

  Remembering that I also made a scheme for the submit button to work only when the user selects a rating.

  if you want I can open a pull request on github for you to have access to the code! or call me on twitter and I'll send you! The rest is great!

  I hope it helps... 👍

  12

  Marked as helpful