Skip to content
OverviewSolutions
13
Comments
4
Franck
@SFN98

All comments

  • Franck•180
    @SFN98Posted 9 months ago

    Hello, your solution looks good and i have some suggestions that may improve your code:

    when the user choose a number this one should be on focus

    I saw that when user choose a number, this one doesn't appear on the thank you page, try to fixe it.

    /// This function let us to choose  a number
function choosenumber(){
    let numbers = document.querySelectorAll(".number div")
    
    for(let i=0; i<numbers.length;i++){
        numbers[i].addEventListener("click", ()=>{
            // Remove "active" class of all elements
            numbers.forEach(element => {
                element.classList.remove("active");
            });

            // Add "active" class of clicked element
            numbers[i].classList.toggle("active");

                let choice = document.querySelector("span")
            if(numbers[i].classList.contains("active")){
                choice.innerText=numbers[i].innerText
            }
            
        }) 
        
    }
}

    There's an other way to do this, but this is how me i understood it.

    you can also do that if the user click on submit without choosing a number, he receive an error message and disabled button

    1
  • Franck•180
    @SFN98Posted 9 months ago

    Hello @ooKademoo your solution looks good, but i have some changes that you can make for the next solution. first of all try to use semantic HTML the more possible, so you can use <main></main>

    then using margin to center an element is not the right practice. To center correctly an element on the page you can use this css code on the body:

    body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
    1
  • Franck•180
    @SFN98Posted 9 months ago

    your solution looks good, but i have some changes that you can make for the next solution. first of all try to use semantic HTML the more possible, so you can use <main></main> for your container.

    Then to center correctly an element on the page you can use this css code on the body:

    body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
    Marked as helpful
    1
  • Franck•180
    @SFN98Posted 9 months ago

    your solution looks good, but i have some changes that you can make for the next solution. first of all try to use semantic HTML the more possible, so you can use <main></main> then to center correctly an element on the page you can use this css code:

    body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

    Also you forgot to insert the favicon

    Marked as helpful
    0