JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<header>
<h3>Doggy clicker</h3>
<div id="counter">Treats:<span class="counter">0</span></div>
</header>
<div id="bg"></div>
<div class="dog"><img class="dog_png" src="http://bit.ly/1gwYjnf" height="150px"/></div>

CSS

/*
http://bit.ly/1iGxPza
http://bit.ly/1gwYjnf
*/
body{
    font-family:comic sans MS;
}
header {
border-bottom: solid 2px darkblue;
background: rgba(47, 39, 230, 0.72);
height: 3em;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
}
h3{
    position:absolute;
    left:25%;
    z-index:1;
}
#bg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgb(207, 253, 255);
overflow: hidden;
z-index: 0;
}
.dog{
    position:absolute;
    top:50%;
    left:35%;
}#counter{
    position:absolute;
    z-index:1;
}.treat{
  position: absolute;
  animation: move 3s ease;
}

@keyframes move {
  to{
     transform:translate(100px, 1000px);
  }
}

JavaScript

$(document).ready(function(){
    var treats = 1;
    
    $('.dog').mouseover(function(){
        $('.dog_png').css('height','165px');
    }).mouseout(function(){
        $('.dog_png').css('height','150px');
    }).mousedown(function(){
        $('.dog_png').css('height','160px');   
    }).mouseup(function(){
        $('.dog_png').css('height','165px');
    });
    
    $('.dog').click(function(){
        
            var min = 5;
            var max = 400;
            var xpos = Math.floor(Math.random() * (max - min + 10)) + min;
            var ypos = Math.floor(Math.random() * (max - min + 10)) + min;
        
        
        $('#bg').append('<div class="treat" style="left:'+ xpos +'px;top:'+ ypos +'px;"><img src="http://bit.ly/1iGxPza" /></div>');
        $('.counter').html(treats++);
    });
    $('#bg').click(function(){
        $('.counter').html(treats-1);
    });
});