JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<div>
    <canvas id="platno" width="500px" height="300px"></canvas>
</div>    
<input id="odpoved">
    <p id="spravne"></p>
    <p id="uzivatel"></p>

CSS

#platno{
    float:down;
    border:1px solid red;
}
#odpoved{
    
    margin:10px 0px;
}

JavaScript

$(document).ready(function(){
    var ctx = document.getElementById("platno");
    var c = ctx.getContext("2d");
    var cx = 50;           
    var cy = 50;
    var rad = 20;
    var width = 0;
    var height = 0;
    var ver = 1;
    var hor = 1;    
    var cislo = Math.floor((Math.random() * 100) + 1);
    
    
    function move (){
            
            c.clearRect(0,0,ctx.width,ctx.height);
            c.strokeStyle='blue';
                   
            c.beginPath();              
            c.fillText(cislo, cx - 10 , cy +6);
            c.font = "bold 20px sans-serif";
            c.fillStyle = "red";
            
            c.arc(cx, cy, rad, 0,2*Math.PI, true);  
            c.stroke();                   
            
            cx += hor;
            //cy += ver;
        
        /*if (cy > (ctx.height - height -rad) || cy - rad < 0){
             ver *= -1;
             cislo = Math.floor((Math.random() * 100) + 1);
                       
        }*/
        
        if (cx > (ctx.width - width - rad) || cx - rad < 0){
             hor *= -1; 
             cislo = Math.floor((Math.random() * 100) + 1);
             $("#spravne").replaceWith('<p id="spravne">'+cislo+'</p>');
             
            //alert(vraceneCislo);
        }   
        
        
        setTimeout(move, 5);
    }
        move();
    
    $("#odpoved").focusin(function(){
        $(this).keyup(function(){
           var a = $("#odpoved").val();
           var b = $("#spravne").text();  
                var c = a.length;
                if ( a == b ){
                    alert("Vysledek je spravne");
                    return;
                }
        });
                
    });
                        

    
});