interactive rating

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  I forgot to talk about js but there is a way to reduce it a lot!

  First, let's change the way you are taking the buttons, it will look like this:

  let buttons = document.querySelectorAll(".rating-button")
  

  we take one by the class, and inside this variable, we have a NodeList, which allows us to use the forEach method, which loops over each element of our list!

  buttons.forEach((btn) => {
      btn.addEventListener("click", () => {
          document.getElementById("rating-number").innerHTML = btn.innerText
      })
  })
  

  so it was like this for each element of our list btn will receive a click event and this event will perform the same function as the other 5 did! but with a much cleaner and more readable code!

  Marked as helpful

  0
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi Zaynab Odusote, how are you?

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

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Zaynab Odusote•130

  @ifedapo4Posted about 2 years ago

  Thank you

  0