Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Rating Card

Vedat Sözen•230
@vedatsozen
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I made design with html and css as i want. But i could not print values that i wanted to get from radio buttons as 1,2,3,4,5. I am waiting your helps. Thank you.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Marija•80
    @Marija-Kov
    Posted about 3 years ago

    Hi there. Your layout/solution looks very close to the design, great!

    Regarding your radio button/submit value problem:

    1. Input type issue

    First thing that can be noticed is that your input type isn't actually radio, it looks like a textbox. This problem was caused in your html where your input type was set to "radio unchecked" - it should be just:

    type="radio"
    

    . Now, this will result in five big radio buttons where your old buttons were. But if you click them, it will show correct radio button functionality.

    To put the style back on your radio buttons, you need to do a few things in your CSS file:

    1-a) in your input tag selector add styling:

         appearance: none;  
    

    which will make the big radio buttons disappear and reveal some of your previously done styling;

    1-b) add a pseudo-element that will have the input value attribute as content and adjust its position:

         input::before {
         content: attr(value);
         position: relative;
          top:  16px;
           }
    

    2. Submitting input value issue

    The reason your submit button function is returning undefined is because your "newnumber" element currently is an HTML collection i.e. containing all your elements that have "btn" class name and you want to show just the one selected value. To do this, you'll first need to convert your HTML collection into an iterable array with a simple method. Maybe also change your variable name to make a little more sense:

      let options = Array.from(document.getElementsByClassName("btn"));
    

    Then create a function that will iterate through the array and also check if an option is "checked". You'll also want to include a function that will initiate the functionality of the submit button conditionally:

            function selectOption() {
               options.forEach(option => {
                  if(option.checked){
                    initSubmit(option)
                   }
               })
            }
    

    Add:

            onClick={selectOption()}   
    

    to your input button parent container (so you don't have to add it to each input element individually).

    Now you'll need to define the initSubmit function that takes the checked option as a parameter and adds a click event listener to your submit button:

    ((Remember to remove the inline onClick event handler from your submit button as that functionality is being taken care of by selectOption function returning initSubmit every time it's called for.))

               function initSubmit(option){
                   document.querySelector(".submit").addEventListener('click', ()=> {
                   document.getElementById("twoo").innerHTML = "You selected " + option.value + " out of 5 ";
                   document.getElementById("card").style = "visibility:hidden";
                   document.getElementById("thankyoucard").style = "visibility:visible";   
                })
             }
    

    Hope all of the above gives you a hint to the solution of your problem and makes it easier in the future. :)

    Additional tips:

    • Use innerText or textContent instead innerHTML to avoid XSS attacks to your website. There are some exceptions where innerText and textContent won't give you the same results as innerHTML (like when you're dynamically adding HTML to your page with javascript), but is perfectly fine in this case.

    • Use "let" or "const" instead of "var". This is an easy google find so I won't go into detail about it.

    • Declutter your code by storing more of the selected elements in variables at the top of your script and using just the variable names in the rest of your code - just like you did with your "newnumber" variable in your original code.

    • Be more descriptive in your id and class names so it's easier to assume what is being shown with your code. ex: instead: <div id="four"> maybe say: <div id="inputContainer">

    Marked as helpful
  • Vedat Sözen•230
    @vedatsozen
    Posted about 3 years ago

    I revised my rating card. Now i can print radio button values easily to second page.

  • Mario Andrés Rosero Saza•50
    @mario994
    Posted about 3 years ago

    Hi, I do a pull request to your project.

  • Pedro Brito•380
    @PedroBritoDEV
    Posted about 3 years ago

    did you already studied javascript?

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
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

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

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