DOWNLOAD

BUERGE CODE » The most powerful Front-end Framework.


ELEMENTO >> Valutatore a stelline

star review html css javasript star review html css javasript star review html css javasript star review html css javasript star review html css javasript
star review html css javasript star review html css javasript star review html css javasript star review html css javasript star review html css javasript

HTML

 <!-- stelle gialle-->
    <div class="valutatore">
        <img class="star yellow-star" id="yellow-star1" src="star.png" alt="">
        <img class="star yellow-star" id="yellow-star2"src="star.png" alt="">
        <img class="star yellow-star" id="yellow-star3"src="star.png" alt="">
        <img class="star yellow-star" id="yellow-star4"src="star.png" alt="">
        <img class="star yellow-star" id="yellow-star5"src="star.png" alt="">
    </div>


    <!-- stelle grige-->
    <div class="valutatore">
            <img class="star-grey click-star" id="grey-star1" src="star-grey.png" alt="">
            <img class="star-grey click-star" id="grey-star2" src="star-grey.png" alt="">
            <img class="star-grey click-star" id="grey-star3" src="star-grey.png" alt="">
            <img class="star-grey click-star" id="grey-star4" src="star-grey.png" alt="">
            <img class="star-grey click-star" id="grey-star5" src="star-grey.png" alt="">
        </div>

CSS

.valutatore {
    width: 200px;
    height: auto;
    border-radius: 10px;
}
.star {
    width: 20px!important;
    height: 20px;
    float: left;
    margin-left: 2px;
    display: none;
}
.star-grey {
    width: 20px!important;
    height: 20px;
    float: left;
    margin-left: 2px;
}
.star-grey:hover {
    box-shadow: 1px 1px 8px 0.2px grey;
    border-radius: 20px!important;
}

JAVASCRIPT

<script>

        let count;
        function Initializer(){
            let obj = localStorage.getItem("review");
            if(obj == 1){
                $("#yellow-star1").show();
                $(".star-grey").hide();
            }
            if(obj == 2){
                $("#yellow-star1, #yellow-star2").show();
                $(".star-grey").hide();
            }
            if(obj == 3){
                $("#yellow-star1, #yellow-star2, #yellow-star3").show();
                $(".star-grey").hide();
            }
            if(obj == 4){
                $("#yellow-star1, #yellow-star2, #yellow-star3, #yellow-star4").show();
                $(".star-grey").hide();
            }
            if(obj == 5){
                $("#yellow-star1, #yellow-star2, #yellow-star3, #yellow-star4, #yellow-star5").show();
                $(".star-grey").hide();
            }
            if (obj == null || obj == ''){
                $('.yellow-star').hide();
                $('.star-grey').show();
            }
        }
        function SaveRewiew(){
            localStorage.setItem("review", count);
        }
        $('document').ready(function(){
            Initializer();
        });
        $("#grey-star1").click(function(e){
            e.preventDefault();
            $("#yellow-star1").show();
            $(".star-grey").hide();
            count=1;
            SaveRewiew();
        });
        $("#grey-star2").click(function(e){
            e.preventDefault();
            $("#yellow-star1, #yellow-star2").show();
            $(".star-grey").hide();
            count=2;
            SaveRewiew();
        });
        $("#grey-star3").click(function(e){
            e.preventDefault();
            $("#yellow-star1, #yellow-star2, #yellow-star3").show();
            $(".star-grey").hide();
            count=3;
            SaveRewiew();
        });
        $("#grey-star4").click(function(e){
            e.preventDefault();
            $("#yellow-star1, #yellow-star2, #yellow-star3, #yellow-star4").show();
            $(".star-grey").hide();
            count=4;
            SaveRewiew();
        });
        $("#grey-star5").click(function(e){
            e.preventDefault();
            $("#yellow-star1, #yellow-star2, #yellow-star3, #yellow-star4, #yellow-star5").show();
            $(".star-grey").hide();
            count=5;
            SaveRewiew();
        });
    </script>