Style a ul list of radio buttons to a responsive star rating JS, CSS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hey, need a little help to style a star rating site.

The star size should be responsive
Found this http://codepen.io/rogie/pen/jgrIu but don't know how to apply this for my code

Ok heres what i have so far:

<script>
function redirectpage() {
    var radios = document.getElementsByName('rating');
    var length = radios.length;
    var selected_value = false;
    for (var i = 0; i < length; ++i) {
        if (radios[i].checked) {
            selected_value = radios[i].value;
            break;
        }
    }

switch(selected_value) {
    case "1":
        window.location = "page1.html";
        break;
    case "2":
        window.location = "page2.html";
        break;
    case "3":
        window.location = "page3.html";
        break;
    case "4":
        window.location = "page4.html";
        break; 
    case "5":
        window.location = "page5.html";
        break;       
    default:
        document.getElementById('notice-message').innerHTML = "Please select one";
        break;
}

}
</script>

<ul>
    <li><input type="radio" name="rating" value="1" />1 star</li>
    <li><input type="radio" name="rating" value="2" />2 star</li>
    <li><input type="radio" name="rating" value="3" />3 star</li>
    <li><input type="radio" name="rating" value="4" />4 star</li>
    <li><input type="radio" name="rating" value="5" />5 star</li>
</ul>
<div id="notice-message"></div>

<button onclick="redirectpage()">SUBMIT RATING</button>
In addition to making it responsive, what are you trying to do that the codepin example doesn't achieve? do you just need that example modified to redirect to a different page upon clicking a rating?
skram almost 5 years ago
it is just a star rating looking radio button menu. that sends the user to a different page depending on her rating. no actual rating values are sent. would be useful if you could remove this part of dead code also. only function of this site is to work as a radio button menu.
Oliver almost 5 years ago

Crowdsource coding tasks.

2 Solutions

Winning solution

Hello oliver,

I just add your code with the reference code you showed.
you can click share and export zip from codepen and use the code.
if you need assistance I am happy to help you. My skype id bhuvan530531

here is the codepen fork
http://codepen.io/zebrawebdesigns/pen/JDnbd


Here it is with responsively sized stars. This also uses a form to simplify the redirect code:
http://codepen.io/anon/pen/HzvhI

View Timeline