Responsive and interactive rating component

Hello! The design is really good and works smoothly! To your question about how you could improve the javascript:

Adding an event listener works for each input works, however, that takes a lot more code and if you ever added more inputs, then you have to manually add another,

A better practice is to use a 'for' loop that goes over all the input inside a listener event.

for (let i = 0; i <input.length; i++){ //input is selected with 'queryselectorAll'

then an if statement

if (input[i].checked ) { rating.innerHTML = input[i].value } //rating is a getElementById }

This will allow any of the input buttons that are checked to change the innerHTML to the input value (value is labeled in html).

Try this method out if you want some extra learning.

Hey @Zakariyacee. nice try and good output from you as well. So regarding your solution, first lets solve your second problem, that is about scroll, right? here's the solution, add this and check:

.card-container {
      overflow:hidden;
}

Now for the javascript part, nobody is expert in the industry, you are writing your code what you've to figure out is how to use effective code, and what features you should use. As mostly features are already present in javascript as methods. So what i'll suggest is keep coding and keep looking for the resources it can be googling your issues or methods, it can be documents , it can be articles from medium, you will learn with time.

Hope my solution will solve your issue and is helpful. Keep Coding!