Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Imię Nazwisko</title>
</head>
<body>
    <style> table,tr,th,td {text-align: center;} </style>
    <h1>Skrypt zrealizował Imię Nazwisko</h1>
    <table>
        <caption>Tabela zapotrzebowanie kalorycznego</caption>
        <tr>
            <td colspan="2">Zapotrzebowanie kaloryczne</td>
        </tr>
        <tr>
            <th>Płeć</th>
            <th>Przedział kcal</th>
        </tr>
        <tr>
            <td>Kobiety</td>
            <td>[1800:2400]</td>
        </tr>
        <tr>
            <td>Mężczyźni</td>
            <td>[2500:3500]</td>
        </tr>
        <tr>
            <td colspan="2">Tabela przedstawia mocno uproszczoną wersję.<br> Powinno się jeszcze oczywiście uwzględnić inne czynniki np. masa ciała, wiek, tryb pracy...</td>
        </tr>
    </table>

    <br><br>

    <form action="#">
        <p>Wybierz płeć</p>
        <input type="radio" name="gender" id="female" checked><label for="female">Kobieta</label>
        <br>
        <input type="radio" name="gender" id="male"><label for="male">Mężczyzna</label>
        <p>Twoja dzienna liczba kalorii</p>
        <input type="number" name="kcal" id="kcalAmount">
        <br><br>
        <input type="button" value="Wyświetl wynik" id="submitData">
        <p>Twoja dzienna ilość kcal to: <span class="kcal"></span></p>
        <h3 class="info"></h3>
    </form>
    <script>
        const kcalSpan = document.querySelector('.kcal');
        const infoSpan = document.querySelector('.info');

        const kcalAmount = document.querySelector('#kcalAmount');

        const submitButton = document.querySelector('#submitData');

        const checkAmount = (kcal, kcalMin, kcalMax) => {
            if(kcal <= 500 || kcal >= 10000) {
                infoSpan.innerHTML = 'Niemożliwa wartość';
                return false;
            } else {
                if(kcal < kcalMin) {
                    infoSpan.innerHTML = 'Za mała liczba kcal';
                    return false;
                } else {
                    if(kcal > kcalMax) {
                        infoSpan.innerHTML = 'Za duża liczba kcal';
                        return false;
                    } else {
                        infoSpan.innerHTML = 'Prawidłowa ilość kcal';
                        return true;
                    }
                }
            }
        };
        submitButton.addEventListener('click', () => {
            const femaleRadio = document.querySelector('#female');
            const maleRadio = document.querySelector('#male');
            const gender = femaleRadio.checked ? 1 : 2;

            const kcal = kcalAmount.value;

            switch (gender) {
                case 1:
                    if(checkAmount(kcal, 1800, 2400)) kcalSpan.innerHTML = kcal;
                    break;
                case 2:
                    if(checkAmount(kcal, 2500, 3500)) kcalSpan.innerHTML = kcal;
                    break;
            }
        });
    </script>
</body>
</html>