FlexBox, JavaScript, 3D

Hi Jair Rodriguez, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

I will try to help you with your problem!

I analyzed your code! To start I will get the buttons by the class so it will look like this:

const numbers = document.querySelectorAll(".span");

I removed this:

// const uno = document.querySelector("#uno")
// const dos = document.querySelector("#dos")
// const three = document.querySelector("#three")
// const four = document.querySelector("#four")
// const five = document.querySelector("#five")

and also removed the function called scaner!

I added this:

numbers.forEach((element) => {
    element.addEventListener("click", () => {
        selected.innerText = `You selected ${element.innerText} out of 5`
        submit.addEventListener("click", () => {
            wrapper.style.transform = "rotateY(-180deg)";
        });
    })
})

I added the submit event inside the other, to create a scheme that as long as the user doesn't click on the number, the submit button won't work!

Another tip is about the color of the buttons:

instead of using this function:

numbers.forEach((num) => {
    num.addEventListener("click", function click() {
        num.setAttribute("style", "background : hsl(217, 12%, 63%); color: white");
    });
});

use this:

.span::focus { background-color: white; }

Tell me if it was easy to understand ahuauahuah

The rest is great!

I hope it helps... 👍