CSS Flexbox & Vanila JS

Hello Aurel!

I am going to leave you your code modified to achieve the same functionality but with a for loop and using the querySelectorAll as you had in mind. I just added the loop and removed the listener events for the buttons and also removed the buttons that were located by the "id"

const submitBtn = document.getElementById('submitBtn');
const cardItems = document.querySelector('.card-items');
const cardThankYou = document.querySelector('.card-thank-you');
const ratingButtons = document.querySelectorAll('.card-thank-you');
submitBtn.disabled = true;

submitBtn.onclick = () => {
  cardItems.style.display = 'none';
  cardThankYou.style.display = 'flex';
};

const allBtns = document.querySelectorAll('.ratingBtn');
const span = document.getElementsByTagName('span')[0];

for (let btn of allBtns) {
  btn.addEventListener('click', () => {
    span.innerHTML = btn.innerHTML;
    submitBtn.disabled = false;
  });
}

I would like you to try it and tell me if it works correctly for you.

Cheers!

Hi!

According to your question: select them by const buttons = document.querySelectorAll('.buttons-class'). You will get the Node-list of them. Add event listener to all of them and write a function which on the click:

1. removes class active from all the buttons
2. on the button that is an event target will add class active
3. will provide data for your span dynamically, e. g const spanValue = e.target.innerContent; and then you can use it like this ${spanValue}

You can also check my solution with different approach. Hope this helps:)

You did very good on the layout!

Happy coding!