Interactive rating component using HTML, CSS flexbox & Vanilla JS.

For your alert code, it is better not to touch innerText with js whenever possible in my opinion. Its like all the changes in structure should keep in html, script changes in js, and stylechanges in css .

I would use css {display: none} and {display: block} to show the text by adding active class instead.

<p id="alert">"Please select a number"</p>

#alert{
  display: none;
}

#alert.active {
  display: block {
}

document.querySelector("#alert").classList.add("active")

This should be the way to write this....