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 Component

Saulius K. 560

@TH3RIV

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


Pretty cool challenge to jump into JS. Not too hard if you gone through JavaScript basics and are familiar with for loops and eventListener.

Now I would love to ask for any feedback on the finished challenge and/or how to improve my code so it is as easy to read as possible.

Had a little issue in VSC with "ts2451: cannot redeclare block-scoped variable" so had to add "1" at the end of all my variables to get that to go away... How do I avoid it in the future?

Thank You!

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Saulius K., how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

to make the submit button only available when the user selects a number we can do the following:

function showOption() {
    for (i = 0; i < options1.length; i++) {
        if (options1[i].checked) {
            selectedOpt1.innerText = `You selected ${options1[i].value} out of 5`;
        }
    }
    sbtn1.addEventListener('click', function (e) {
        e.preventDefault();
        rtg1.style.display = 'none';
        tks1.style.display = 'flex';
        showOption();
    }); 
};

The rest is great!

I hope it helps... 👍

0

Saulius K. 560

@TH3RIV

Posted

@AdrianoEscarabote hi, thanks for your suggestion! While it works to disable the button until a number is selected, it also seems to create an issue of refreshing the page on submission as it has nowhere to send the data.

1

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