Testing my HTML, CSS anb JavaScript skills!

Hello guys!

This project was the hardest and longest project that I've ever done ultil now.

I took the liberty of creating a button to the users change their rating, if they want to.

Some problems that I had to figure it out:

1º - The rating buttons are not really buttons. They are an input with "none" display inside a container shaped as button. This way I was able to "hold" the clicked rating in the button! If you have a better solution, tell me please, because it took me more than 5 hours to discover it!

<div>
   <input type="radio" name="rating" id="button1" class="checkbox__class" value="1">
       <label for="button1">
          <div class="container__button"><span>1</span></div>
  </label>
</div>

2º - The second problem was to create only 1 hover to change the style of 2 classes. But I didn't manage to do it, so I created 2 codes with one hover for each part:

.redo__button-container:hover .redo__button-text {
    color: var(--Orange);
}

.redo__button-container:hover .redo__button {
    color: var(--Orange);
}

3° - How to put a transition time when the JavaScript change the styles of the pages?

/* Main page state - here the JS will change the display to none when SUBMIT button is clicked*/
.rating__state {
    display: block;
    transition: 1s; /* Didn't work, I'll try to fix it with toogle */
}

/* Thank you page state - here the JS will change the display to flex when SUBMIT button is clicked */
.thankyou__state {
    display: none;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: all 1.5s ease;
}

4º - I used a lot of tags to create the HTML, but I'm not sure if all of them are being used correctly. So, feel free to correct me in all of them!

5º - The JS code! As I'm a beginner, I don't know if I'm using the best paths to get the variables and values. So, if there's a better way to do it, let me know!

var buttons_container = document.getElementsByName("buttons_container")
var submit = document.querySelector("[data-button]")
var place_rating = document.querySelector("[data-rating]")
var mainPage = document.querySelector("[data-mainPage]")
var thanksPage = document.querySelector("[data-thanksPage]")
var redo = document.querySelector("[data-redo]")

submit.addEventListener('click', () => {
    getRating ()
    changePage ()
})


function getRating () {
    let checkbox = document.querySelector('input[name="rating"]:checked');
    let rating = checkbox.value
    console.log(rating)
    place_rating.innerText = rating
}

function changePage () {
    mainPage.style.display = "none"
    thanksPage.style.display = "block"

}

redo.addEventListener('click', () => {
    mainPage.style.display = "block"
    thanksPage.style.display = "none"
})