Interactive rating App using Html/CSS/JavaScript

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Bryan, congrats on finishing the challenge! your component looks really good, let me see if I can help you with your questions

  1. You could add a validation to make the user select a rating before submitting, instead of just displaying 0 (imagine that the user clicked submit by mistake, the rating will be 0). You can do this easily in your Javascript:

  function displayRating() {
      if(note === 0) return alert('Please select a rating before submitting!')
      if(userNote == 0) return;
      displayMainContainers();
  }
  

  Another advice is that you should never use html onclicks, they are a bad practice that can cause a lot of bugs, instead of that use an addEventListener to that element in your JS file:

  const submitButton = document.querySelector('#submit-button')
  submitButton.addEventListener('click', () => {
            if(note === 0) return alert('Please select a rating before submitting!')
            userNote.innerText = note;
            displayMainContainers();
  })
  

  2. Just use Javascript, with CSS it can clash with your other pseudoelements like :hover and can get buggy, also with :focus if the user clicks outside the button it will lose the focus, you can select all your buttons and remove / add styles at the same time.

  Just take as an important part of this feedback that you should never use html functions calls like onclick, onsubmit.

  Hope my feedback helps you, if you have any questions don't hesitate to ask! great work

  0
• 

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  this one is a little bit tricky but it's actually a javaScript it could by done with css but it's easier with js I will share with you the js solution if you want the css approach let me know ok so you need to modify the inside of your js and html a liitle bit you need to do what's called a dom manipulation basically what you will do is

  1. call the rating divs as a list of dom element like so cosnt list = document.querySelectorAll('.note')
  2. then you will loop throught them and add an event listener like so

  list.forEach(note=>{
  note.addEventListener('click', handleClick)
  })
  function handleClick(clickedNote){
      list.forEach(e=>{e.style.backgroundColor = "#7C8798"})
      clickedNote.style.backgroundColor = '#FC7614'
    }
  

  if you want an in depth description how this work or want to know how to do it in pure css please let me know I will help if you have any question just let me know if this comment was useful consider marking it as helpful

  0