interactive rating component

Hi Charles,

Your design looks great :)

Few tips about JS:

Instead of using addEventListener for each button, you could create:

1. static NodeList with querySelectorAll on your num-btn class,
2. variable (e.g. let scoreValue) to keep clicked value (but you have to set a value on each of your button)
3. use forEach method to iterate through your NodeList

const btns = document.querySelectorAll('.num-btn)

let scoreValue = '';

const score = () => {
	btns.forEach(score => {
		score.addEventListener('click', e => {
			scoreValue = e.target.value
		})
	})
}

Then you can use your scoreValue to put it in your sub-container, but you won't need to put the index of your numArr array.

thankEl.textContent = 'You selected ${scoreValue} out of ${btns.length}'

You could also add an error message in case of not choosing any score. To do this you need to create e.g. if...else statement.

In case of any questions feel free to ask :)

Hi @charlesmambo,

Congrats on completing the challenge

I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's empty when you click submit without selecting a rating.

Replace you body rule with the one below to center the card.

body {
    margin: 0;
    padding: 30px;
    font-family: 'Overpass', sans-serif;
    background-color: hsl(216, 12%, 8%);
    color: #fff;
    justify-content: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

Hope this is helpful, let me know if you have any other question.