Rating stars - Real Helper

Majin Dev

2583

Rating stars with CSS and JS

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rating stars</title>

</head>
<body>

    <div class="stars">
        <svg height="25" width="23" class="star" id="star1">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
        </svg>
        <svg height="25" width="23" class="star" id="star2">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
        </svg>
        <svg height="25" width="23" class="star" id="star3">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
        </svg>
        <svg height="25" width="23" class="star" id="star4">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
        </svg>
        <svg height="25" width="23" class="star" id="star5">
            <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
        </svg>
    </div>

</body>
</html>

Try it Yourself >>

  body, html {
            margin: 0;
            padding: 0;
            background-color: black;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        svg {
            fill: #bbbbba;
        }

        #star1 {
            fill: #e2e231;
        }

        .star-color {
            fill: #e2e231;
        }

Try it Yourself >>

var star1 = document.querySelector("#star1");
        var star2 = document.querySelector("#star2");
        var star3 = document.querySelector("#star3");
        var star4 = document.querySelector("#star4");
        var star5 = document.querySelector("#star5");
        stars = [star1, star2, star3, star4, star5]
        function addStyle(n) {
            for (i=1; i {
            element.addEventListener('mouseover', function(){
            addStyle(index+1);
            });
            element.addEventListener('click', function(){
            addStyle(index+1);
            a = index+1;
            removeStyle(a);
            });
            element.addEventListener('mouseout', function(){
            removeStyle(a);
            });
        });

Try it Yourself >>