Rating Component with JS

cause you set the margin-left to 500px. that's probably why. use this if you want to center an element. .wrapper { display: grid; place-items: center; min-height: 100vh; }

An easy way you can do this is by giving an ID of the exact number for each of the buttons in the html file, then you store the ID in a variable to get the ID of the button clicked, and then you output the variable in the result part

Example:

<button id="1" class="rate">1<button >

<button class="btn">submit<button >

const btn = document.queryselector('.btn');

const rate= document.queryselector('.rate');

btn.addEventListener("click", ( ) => {

const rateValue = rate.id;

result.innerHTML = ${rateValue};

});

That's just a demo code to show you what i was talking about, let me know if you got it!

Hi Faybas

Offering another option in addition to @Toheeb345 suggestion. Take a look at my forked repo for alternative. I've seen more than one take this approach @llr3v0ll & @beveroni

TL:DR - Instead of using buttons for each score, create a group of radio buttons and utilize the pseudo class selector

input:checked

to update the page.

Hope this helps!