All solutions

Thanks for any feedback!

To get rid of the browser validation messages, I left out the required from the input tag and changed type: "email" to type: "text". This way, only my validation messages appear when not typing anything or when typing an invalid email address. Is this the correct approach or is there a way to hide the browser messages while keeping the required and the type: "email"?

This is my second project using JavaScript so any feedback is welcome!

Great exercise, but I had issues with the "you selected * out of 5" text:

At first, I tried to approach this by using JavaScript to create a <p> element called dynamicTextEl so it can then be appended to its parent through an event listener. I modified its inner HTML to add a new <span> element within the <p> element :

dynamicTextEl.innerHTML = "You selected <span id=\"dynamic-number\"></span> out of 5";

However, I wasn't able to access the new span element, never mind change its text content based on the rating that the user gives. When console.logging it (is that a word?), it appeared as "null", even though the new span element was already showing in the dev tools. This previous version can be viewed in the Initial commit in the GitHub repository.

At the end, I solved this by simply having the span element with its parent p element already in the HTML file, but with a display: none property in CSS. This property changes via JavaScript so that the text is visible when the user submits their rating. This way I could easily access the span element and change its attributes since it was already part of the HTML.

Nonetheless, I'd still like to know why my other approach did not work in the first place. Does it have something to do with the DOM not recognizing new elements created by changing another element's inner HTML or something similar? If so, why do we have the option to add new tags using this method?

Thanks in advance!