JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="like">    
    <a href="#" class="reset">Reset</a>
    <span class="owl-icon back" title="Click and Hold to increase like!"></span>
    <span class="owl-icon"></span>
    <span class="owl-icon heart-icon"></span>

</div>
<p class="level">Good</p>
<div class="tooltip"></div>

CSS

.owl-icon{
    height:90px;
    width:40px;
    display:block;
    margin:55px auto;
    background:url("http://www.parliamenthq.com/logos/owl-heart.svg") center center no-repeat;
    position:absolute;
    left:80px;
    cursor:pointer;
}
.heart-icon{
    background:url("http://www.parliamenthq.com/logos/solid-heart.svg") center center no-repeat;
}
.back{
    opacity:0.3;
    z-index:-1;
}
.like{
    width:200px;
    height:200px;
    border:1px solid #CCC;
    position:relative;
    border-radius:5px;
}
.level{
    width:200px;
    text-align:center;
    margin:5px 0;
}
.reset{
    position:absolute;
    top:5px;
    right:5px;
    margin:0;
    padding:0;
    font-size:.65em;
    display:block;
}
body{
    font-family:sans-serif;
}


.bigger {
	animation: anim-effect-bigger .3s ease-out forwards;
}
@keyframes anim-effect-bigger {
	0% {
        opacity:.5;
		transform: scale(1, 1);
	}
	50% {
	    opacity:0;
		transform: scale(1.5, 1.5);
	}
	100% {
        opacity:.5;
		transform: scale(1, 1);
	}
}

.tooltip{
    position:absolute;
    padding:5px 10px;
    border:1px solid #CCC;
    border-radius:4px;
    background-color:#F1F1F1;
    display:none;
}

JavaScript

(function($){
    var $owl = $(".owl-icon");
    var $heart = $(".heart-icon");
    var $back = $(".back");
    var time=0;
    var timer;
    var step=0;
    
    $(".reset").on("click",function(e){
        e.preventDefault();
        reset("full");
    });
    
    $owl.mousedown(function(){
        intitialWidth = $(".owl-icon").width();
        timer=setInterval(function(){
            if(time<50){
                time+=1;
                checkIcon(time);
            }else{
                time=0;
            }
        },100);
    }).mouseup(function(){
        reset("mouseup");
    });
    
    function checkIcon(time){
        var width = time + intitialWidth;
        
        if(time % 10 == 0){
            step+=1;
            $back.addClass("bigger");
            setLevel(step);
        } else {
            $back.removeClass("bigger");
        }
        if(width < 90){
            var styles = {
                "width":width + "px",
                "left":(200-width)/2+"px"
            }
            $owl.css(styles);
            $heart.css("opacity",1-(time/10));
        }else{
            reset("full");
        }
    };
    
    function reset(value){
        if(value=="full"){
            step=0;
            time=0;
        }
        var styles = {
            "width":intitialWidth+"px",
            "left":"80px"
        }
        $owl.css(styles);
        $back.css(styles).removeClass("bigger");
        $heart.css("opacity",1);
        setLevel(step);    
        clearInterval(timer);
    }
    
    function setLevel(step){
        var terms=["Good","Great","Awesome","Freakin' Awesome","Kick Ass"];
        $(".level").text(terms[step]);
    }
})(jQuery);