Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
4
Franck
@SFN98

All comments

  • José•250
    @Tr0nskimack
    Submitted over 1 year ago

    interactive rating component main using react and tailwind css

    #react#tailwind-css#vite
    1
    Franck•180
    @SFN98
    Posted over 1 year 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

  • Kadem•10
    @ooKademoo
    Submitted over 1 year ago

    Blog preview card

    #animation
    1
    Franck•180
    @SFN98
    Posted over 1 year 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;
    }
    
  • jimmylee•150
    @jimmylee2021
    Submitted over 1 year ago

    Responsive Qr Code

    1
    Franck•180
    @SFN98
    Posted over 1 year 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
  • HTorike•30
    @HTorike
    Submitted over 1 year ago

    social link profile

    1
    Franck•180
    @SFN98
    Posted over 1 year 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub