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

javalzu 420

@jaalzu

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


What are you most proud of, and what would you do differently next time?

im proud of the way i make the functions of js. i make really nice the swap but i can't make the values of inputs appears on screen

What challenges did you encounter, and how did you overcome them?

i can't make selected numbers of rating appears is next page

What specific areas of your project would you like help with?

with the js area. most exact in the selected numbers when i rating. also i will like help with media queries. how do i make responsive without have to make a lot of media queries

Community feedback

EFEELE 350

@EFEELE

Posted

Good job!!! I share with you how I did the Js part

With innerHTML you can replace the content of an HTML element and thus make the final message ** dynamic**

let optionSelected;
const container = document.getElementById('container');
const thanks = document.getElementById('thank-state');

const showValue = document.getElementById('our-selection');

function checkValue(){
    const options = document.getElementsByName('option');
    
    for (let i=0; i < options.length; i++ ){
        if(options[i].checked){
            optionSelected = options[i].value
        }
    }

    if(optionSelected){
        container.style.display = 'none';
        thanks.style.display = 'flex';
        showValue.innerHTML = 'You selected ' + optionSelected + ' of 5';
    }else{
       alert('You have not selected any options')
    }
}

I share my repository with you in case you like to test: GitHub Repo

I hope that helps!!

0

@VCarames

Posted

@EFEELE

Unfortunately, that is the incorrect way of doing this challenge. Since a form is absolutely necessary to create this challenge all you need to do is add an eventListener to the form as a submit to obtain the value you will add const rating = form.rating.value; (this assumes that your radios are named "rating").

Essentially, it should look like this;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const rating = form.rating.value;
  userSelection.textContent = `You selected ${rating} out of 5`;
 
(Any additional code)
});
1
EFEELE 350

@EFEELE

Posted

@VCarames

Excellent friend, thank you very much!!

0
javalzu 420

@jaalzu

Posted

@VCarames i still can't do it :( What sould i put in the html ?

0

@VCarames

Posted

@jaalzu

You haven't update the code (I did not see any changes to your GitHub)... I can't help if I don't see any updates.

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