JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<p class="helper tap">Hover over the tap to fill the mug</p>
<h1>Fill the mug <span id="target">0</span>%</h1>
<h2 id="percent-filled"></h2>
<h3 id="result"></h3>
<div id="tap-container">
    <div id="tap"></div>
    <div id="handle"></div>
    <div id="pour"></div>
</div>

<div id="mug-container">
    <div id="mug">
        <div id="beer"></div>
    </div>  

    <p class="helper mug">Click the mug to reset</p>
    
    
https://codepen.io/ElJefe/pen/vEERrW

CSS

html {
    font-size:16px;
}
body {
    font-family: 'Roboto Condensed', sans-serif;
}
h1,h2,h3,h4 {
    font-family: 'Germania One', Arial,sans-serif;
}
#tap-container {
    position:absolute;
    top:0;
    left:0;
}
#tap {
    width:120px;
    background: #ddd;
    height:35px;
    margin:140px 0 0 0;
    position:relative;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
#tap:after {
    content:"";
    display:block;
    position:absolute;
    border-top: 70px solid #ddd;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-radius:0 0 40px 40px;
    height: 0;
    width: 20px;
    top:10px;
    right:10px;
    transform:rotate(-20deg);
    z-index:2;
}
#tap:before {
    content:"";
    display:block;
    position:absolute;
    width:70px;
    height:60px;
    background:grey;
    left:-20px;
    top:-15px;
    border-radius: 0px 20px 20px 0px;
}
#handle {
    border-top: 100px solid black;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    width:20px;
    position:absolute;
    top:30px;
    left:80px;
    border-radius: 10px 10px 0 0;
    z-index:3;
}
#handle:before {
    content:"";
    display:block;
    width:30px;
    height:30px;
    background:lightgrey;
    position:absolute;
    bottom:-20px;
    left:-5px;
    border-radius:20px 20px 10px 10px
}
#handle:hover {
    transform:rotate(6deg);
    transform-origin: center bottom;
}
#handle:hover:before {
    transform:rotate(0deg);
}
#pour {
    position:absolute;
    left:92px;
    top:210px;
    width:16px;
    height:0px;
    z-index:1;
    background:rgba(229,197,57,1);
    transition:0s;
}
#pour.pouring {
    height:230px;
    transition:800ms ease;
}



#mug-container {
    position:absolute;
    top:180px;
}
#mug {
    margin:60px 0  0 40px;
    border:20px solid #eee;
    border-bottom-width:30px;
    width:120px;
    height:200px;
    border-top:none;
    border-radius: 0 0 10px 10px;
   ...

JavaScript

var mugHeight;
var beerHeight;
var percentFilled;
var roundedPercent;
var game = 100;

function getHeights(){
    mugHeight = $('#mug').height();
    beerHeight = $('#beer').height();
    percentFilled = (beerHeight / mugHeight) * 100;
    roundedPercent = Math.round(percentFilled);
    $('#percent-filled').html('Percent Filled: ' + roundedPercent + '%');
};

$('#handle').hover(
    function(){
        $('#beer').addClass('fill');
        $('#beer').css('animation-play-state', 'running');
        $('#pour').addClass('pouring');
    },
    function(){
        getHeights();
        $('#beer').css('animation-play-state', 'paused');
        $('#pour').removeClass('pouring');
        if (roundedPercent === 0) {
            // do nothing
        } else if (roundedPercent === game) {
            $('#result').html('Nailed it! Good job!');
        } else if((game - roundedPercent) < 15 && (game - roundedPercent) > -15 ){
            $('#result').html('Eh. Close enough.');
        } else {
            $('#result').html('You stink');
        }
    }
);

$('#mug').click(function(){
    $('#beer').removeClass('fill');
    getHeights();
    $('#result').html('');
    game = 100;
    $('#target').html(game);  
})

$(document).ready(function(){
    $('#target').html(game);  
});