Interactive Rating Component using CSS Flexbox and JavaScript

Hello Pogen! Nice work!

I did a quick refactor on your code.

const hideEl  = document.getElementById("hide");
const openEl = document.getElementById("open")
const ratings = document.querySelectorAll('.ratings');
const ratingsContainer = document.getElementById("ratings")
const userRating = document.getElementById("user-rating")

function submitRating(){
  if(userRating.innerText === 'default') return alert("Please select a rating!")
    openEl.classList.toggle("hide")
    hideEl.classList.toggle("hide")
}

function removeActive (){
 ratings.forEach(rating =>   rating.classList.remove('active'))
}

//event delegation
function selectRating (event){ 
  event.preventDefault();
  if(!event.target.classList.contains("ratings")) return;  //if click not on rating element, do nothing.
const chosenRatingEl = event.target
removeActive()
chosenRatingEl.classList.add('active')
 userRating.innerText = chosenRatingEl.innerText
}
ratingsContainer.addEventListener('click', selectRating)

Some improvements I made:

• Instead of selecting element inside the function using document. Move all of the selecting to the top of file, so they are grouped and reusable.
• You don't need to use this on eventListener function. Event listener actually passed an event object that you can use to handle manipulation. more about event
• You should use a technique called Event Delegation, which attach the event listener on the parent and conditionally choose the child.

Hope it helps! Keep learning!