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>

Elemento >> Switch Button Day/Night

HTML

        <label class="switch">
                <input type="checkbox">
                <span class="button"></span>
        </label>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .button {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(day.png);
    background-size: 100%;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50px;
  }
  
  .button:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: yellow;
    box-shadow: 1px 1px 5px yellow;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100px;
  }
  
  input:checked + .button {
    background-image: url(night.png);
  }
  input:checked + .button:before {
    background-color:#fff;
    box-shadow: -1px 1px 5px #fff;
  }
  
  input:checked + .button:before {
    -webkit-transform: translateX(44px);
    -ms-transform: translateX(44px);
    transform: translateX(44px);
    transition-timing-function: ease-in-out;
  }