JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    <div class="scene">
        <div id="cloud1">
            <img src="https://raw.githubusercontent.com/Kleofas86/Math-Rain/master/Img/008.png" />            
        </div>
        <div id="sea">
            <img id="wave1" src="https://raw.githubusercontent.com/Kleofas86/Math-Rain/master/Img/sea_wave1.png" />
            <img id="wave2" src="https://raw.githubusercontent.com/Kleofas86/Math-Rain/master/Img/sea_wave2.png" />            
        </div> 
    </div>
    <input id="usSol" type="text" autofocus="autofocus">
        <p id="Solution"></p>
        
</body>

<!--

-->

CSS

body{
    margin:0;
    padding:0;
}
.scene{
    position:relative;
    margin:10px;
    width:600px;
    height:500px;
    border:1px solid black;
    overflow:hidden;
    background-image: linear-gradient(to bottom, #CAC3FA 0%, #FFFFFF 100%);
}

#cloud1{
    position:absolute;
    top:0px;
    left:0px; 
}

#sea{
    position:absolute;
    bottom:0px;
    left:0px;
}
#ball{
    position:absolute;
    height:30px;
    width:50px;
    line-height:30px;
    text-align:center;
    border:3px solid blue;
    /*border-radius: 50%;*/
    background-color:lightBlue;
}

#wave1, #wave2{
    position:absolute;
    bottom:0px;
    left:0px; 
}

#usSol{
    margin:10px;
}

JavaScript

$(document).ready(function(){
    
    function play (){
        function createBall(){
            var n1 = Math.floor((Math.random() * 20) + 1);
            var n2 = Math.floor((Math.random() * 5) + 1);
            var nZnam = Math.floor((Math.random() * 4) + 1);
            switch (nZnam) {
              case 1:
                    var example = n1+" + "+n2;
                    var solution = n1 + n2;
                    break;
              case 2:
                    var example = n1+" - "+n2;
                    var solution = n1 - n2;
                    break;
              case 3:
                    var example = n1+" * "+n2;
                    var solution = n1 * n2;
                    break;
              case 4:
                    var example = n1+" / "+n2;
                    var solution = n1 / n2;
                    break;      
            };
            
            $(".scene").append('<div id="ball">'+example+'</div>');
                var top = Math.floor((Math.random() * 50) + 1);
                var left = Math.floor((Math.random() * 550) + 1);
                    $("#ball").css({'top': ''+ top +'px', 'left': ''+ left +'px'});
            
            $("#usSol").focusin(function(){
                $(this).keypress(function(even){
                    if ( event.which == 13 ) {
                         var number = $(this).val();
                        if (solution == number){
                            $("#ball").remove();
                            //alert("Skvele vysledek je spravne");
                            $("#usSol").replaceWith('<input id="usSol" type="text" autofocus="autofocus">');
                            createBall();
                            animation();
                            $("#usSol").focus();
                            
                            $("#Solution").replaceWith('<p id="Solution">Velice správně Jaromíre!</p>');                            
                        } else {
                   ...