JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    <h1>Trénujeme počty</h1>
        <div id="prvni"></div>
    
        <div id="druhy"></div>
    
    <div id="uzivatel"><input type="text" id="uzivatelVysledek" placeholder="Napište výsledek"/></div>
        <input type="button" id="tlacitko" value="Výsledek!">
        <br>
            <br>
                <br>
                    <br>
        <input type="button" id="refresh" value="Další !">
</body>

CSS

div
{
    float:left;
    width:100px;
    height:100px;
    border: 3px solid green;
    border-radius:50%;
}
p
{
    margin-top:35px;
    color:blue;
    font-size:150%;
    text-align:center;
}
#uzivatelVysledek
{
    margin-top:35px;
    height:25px;
    max-width:95px;
    border: none;
    
}

JavaScript

$(document).ready(function() {
    var x = Math.floor((Math.random()*100)+1);
    var y = Math.floor((Math.random()*100)+1);
    var z = x + y;
    var uzivatel = $("#uzivatelVysledek").val();
    $("#prvni").add("<p>" + x + "</p>").appendTo("#prvni");
    $("#druhy").add("<p>" + y + "</p>").appendTo("#druhy");
    $("#tlacitko").click(function() {
        if (uzivatel == z)
            { 
               $("#vypis").add("<div>Ano, výsledek se rovná " + z + ", jsi dobrý počtář.</div>").appendTo(document.body);
            }
            else
           {
              $("#vypis").add("<div>Bohužel, výsledek se rovná " + z + ", nezoufej a zkus to znovu.</div>").appendTo(document.body); 
            }
            
        });
});
//        $("#tlacitko").click(function() {
//                var cislo1 = $("#cislo1").val();
//                var cislo2 = $("#cislo2").val();
//                var uzivatel = $("#uzivatel").val();
//                var vysledek = parseInt(cislo1) + parseInt(cislo2);          
//                  if (uzivatel == vysledek)
//            { 
//               $("#vypis").add("<div>Ano, výsledek se rovná " + vysledek + ", jsi dobrý počtář.</div>").appendTo(document.body);
//            }
//            else
//           {
//               $("#vypis").add("<div>Bohužel, výsledek se rovná " + vysledek + ", nezoufej a zkus to znovu.</div>").appendTo(document.body); 
//            }
            
//        });
//});