JSFiddle - React, Tailwind, and code Playground

by mannejkumar

HTML

<div id="rateWidget"></div>

CSS

span{
        font-size : 30pt;
        cursor:pointer;
    }

JavaScript

var isRated = false;
var i = 0;
function displayRateWidget(id)
{
    var container = document.getElementById(id);
    for(var i = 0; i < 5; i++){        
        var spanElement = document.createElement('span');
        spanElement.id = i;
        container.appendChild(spanElement);
        var starSymbol = document.createTextNode('*');
        spanElement.appendChild(starSymbol);
        var changeColor = function(){
            isRated = false;
            for(var i = 0; i <container.childNodes.length; i++){
                if(container.childNodes[i].nodeType == 1) {
                    container.childNodes[i].style.color = 'red';
                    if(container.childNodes[i].id == this.id)
                        break;
                }
            }
        }
        var removeColor = function(){
            if(isRated == false){
                for(var i = 0; i <container.childNodes.length; i++){                                                                     if(container.childNodes[i].nodeType == 1) {
                        container.childNodes[i].style.color = '';
                    }
                }
            }
        }
        spanElement.onclick= function(){
            i = this.id
            isRated = true;
        }
        spanElement.onmouseover = changeColor;
        spanElement.onmouseout = removeColor;

    }
}
displayRateWidget('rateWidget');