Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

interactive rating used JS

Alexei 831

@Batareika007

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


JS script work, but I didn't figure it out how to make it work both, submit form and add class without reload the page..

Community feedback

@Ahmed96Mah

Posted

Hello Alexei,

If you mean that you want the user to be able to submit another review without needing to reload the page, then you should set a timeout function to your thankU function (located at line 14 of script.js) as follows:

// notice that you should write const or let before the function name
const thankU = () => {
    let selected = document.querySelector('input[type=radio]:checked');
    thankUCard.classList.add('active');
    starResult.innerText = selected.value;
    setTimeout( () => {   //  add a setTimeout function to your code
            // Then, remove the 'active' class from the card
            thankUCard.classList.toggle('active');    
     }, 2500);  //  This sets a delay of 2500 millisecond or 2.5 seconds
    return false;
}

So, after the card appears, it will stay there for 2.5 seconds and then disappear which will allow the user to submit another rating.

Hope this helps. If you have another question, don't hesitate to ask.

Have a nice day :)

1

Alexei 831

@Batareika007

Posted

Hi Ahmed :) Thank you very much for help, I am very appreciate it !

With your help it's works! but the card disappears after 2.5 sec, and only then the form submitting automatically for some reason it didn't work via setTimeout function I use a little different code

window.setTimeout(function () {
        mainForm.submit();
    }, 2500);

What I wanted to make, that to submit the form and keep the card on the screen. but cant configure how to do it. Maybe it's impossible to make via JS and need some PHP or something else ?

I use method="get" in form to see if it submitting, and check the url 'interactive-rating-component/?star=5' .

Thanks and have a great day =)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord