<div class="container">
    <div class="smileybox">	
        <h1>Rating Stars</h1>
        <label for="r1" class="check"><input type="checkbox" id="r1" onchange="ratingStar(event)"/><i class="em em-weary"></i></label>
        <label for="r2" class="check"><input type="checkbox" id="r2" onchange="ratingStar(event)"/><i class="em em-worried"></i></label>
        <label for="r3" class="check"><input type="checkbox" id="r3" onchange="ratingStar(event)"/><i class="em em-blush"></i></label>
        <label for="r4" class="check"><input type="checkbox" id="r4" onchange="ratingStar(event)"/><i class="em em-smiley"></i></label>
        <label for="r5" class="check"><input type="checkbox" id="r5" onchange="ratingStar(event)"/><i class="em em-sunglasses"></i></label>
    </div>
</div>

*{margin:0;padding:0;}
body{
	background:#f1f1f1;
	font-size:20px;
}
.container{
	width:1170px;
	margin:20px auto;
	text-align:center;
}
h1{
	font-family: 'Playfair Display', serif;
	font-size: 5em;
    color: #9e9ba4;
    text-transform: capitalize;
    margin-bottom: 50px;
}
input[type="checkbox"]{
	width:100%;
	height:100%;
	opacity:0;
	cursor:pointer;	
}
label{
	position:relative;
	width: 50px;
    height: 50px;
    display: inline-block;	
}
.check::before, .rated::after{
	content:'\2605';
	font-size:60px;
	position:absolute;
	color:#777;
	left:0;
	bottom:0;
    line-height: 50px;	
}
.rated::after{
	color:orange;
}
.check:hover::before{
	color:orange;
}
label i{
	position:absolute;

	font-size:35px;
}
label i.em{
	display:none;	
}

function ratingStar(event){
    var checkValue = document.querySelectorAll("input");
    var checkStar = document.querySelectorAll("label");
    var checkSmiley = document.querySelectorAll("i");
    var checkCount = 0;
    for(var i=0; i<checkValue.length; i++){
        if(checkValue[i]==event.target){
            checkCount = i+1;
        }
    }
    for(var j=0; j<checkCount; j++){
        checkValue[j].checked = true;
        checkStar[j].className = "rated";
        checkSmiley[j].style.display = "none";
    }
    
    for(var k=checkCount; k<checkValue.length; k++){
        checkValue[k].checked = false;
        checkStar[k].className = "check"
        checkSmiley[k].style.display = "none";	
    }
    if(checkCount == 1){
        document.querySelectorAll("i")[0].style.display = "block";
    }
    if(checkCount == 2){
        document.querySelectorAll("i")[1].style.display = "block";
    }
    if(checkCount == 3){
        document.querySelectorAll("i")[2].style.display = "block";
    }
    if(checkCount == 4){
        document.querySelectorAll("i")[3].style.display = "block";
    }
    if(checkCount == 5){
        document.querySelectorAll("i")[4].style.display = "block";
    }
}