JSFiddle - React, Tailwind, and code Playground

by Radekzatec

HTML

<!DOCTYPE html>
<html lang="cs_CZ" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <form class="form_hadej" name="form_hadej" action="index.html" method="post">
            <legend><strong><em>Hádej číslo</em></strong></legend>
            <div class="nastav">
                <label for="c1">Vlož rozsah</label>
                <input type="number" id="c1" class="cislo" onkeyup="aktivuj(this);" onchange="aktivuj(this);" name="cislo1" value="">
                <button type="button" id="spust" onclick="hraj(this);" name="spust" disabled>Spusť</button>
            </div>
            <div id="rozsah">

            </div>
            <div id="hraj">
                <label for="c1">Hádej</label>
                <input type="number" id="c2" class="cislo" onkeyup="aktivuj(this, 'hadej');" onchange="aktivuj(this, 'hadej');" name="cislo2" value="">
                <button type="button" id="hadej" onclick="tipuj(this);" name="hadej" disabled>Hádej</button>
            </div>
            <div id="vysledky">

            </div>
        </form>
        <script type="text/javascript"src="main.js"></script>
    </body>
</html>

CSS

#hraj, #rozsah, #vysledky {
    visibility: hidden;
}

JavaScript

'use strict'

const cislo1 = document.getElementById('c1');
const cislo2 = document.getElementById('c2');
const spust = document.getElementById('spust');
const hadej = document.getElementById('hadej');
const hrajem = document.getElementById('hraj');
const napoveda = document.getElementById('vysledky');
const rozsah = document.getElementById('rozsah');
const nova_hra = '<div><button type="button" id="nova_hra" onclick="reset_hry();" name="nova_hra">Hrát znova</button></div>';
let rndcislo;
let pokusy = 0;

let aktivuj = (element, buttonid) => {
    let val = parseFloat(element.value);
    let btn = buttonid !== undefined ? document.getElementById(buttonid) : element.nextElementSibling;
    btn.disabled = isNaN(val) ? true : false;
}

function skryt() {
    hrajem.style.visibility = 'hidden';
    rozsah.style.visibility = 'hidden';
    napoveda.style.visibility = 'hidden';
    spust.disabled = true;
}


function hraj() {
    hrajem.style.visibility = 'visible';
    rozsah.style.visibility = 'visible';
    rndcislo = Math.floor(Math.random() * parseInt(cislo1.value) +1);

    if ((parseInt(cislo1.value)) <= 1) {
        skryt();
        alert('Zadané číslo musí být kladné a větší než jedna');
    } else if ((parseInt(cislo1.value)) !='' || (parseInt(cislo1.value)) != 0) {
        spust.disabled = true;
        rozsah.innerHTML = '<p>Rozsah hledaného čísla je od 1 do ' + (parseInt(cislo1.value)) + '.</p>';
    } else {
        skryt();
        alert('Vyplňte hodnotu rozsahu hledaného čísla.');
    }
    return rndcislo;
}

function reset_hry() {
    cislo1.value = '';
    cislo2.value = '';
    pokusy = 0;
    rozsah.innerHTML = '';
}

function tipuj() {
    console.log(cislo1.value);
    console.log(cislo2.value);
    console.log(rndcislo);
    const mensi = cislo2.value > rndcislo && cislo2.value <= cislo1.value;
    const vetsi = cislo2.value < rndcislo && cislo2.value <= cislo1.value;
    const uhodnuto = cislo2.value == rndcislo;
    napoveda.style.visibility =...