Untitled


<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Karkausvuodet</title>
    <!-- Bootstrap CSS file -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body class="bg-light" style="max-width: 600px; margin: auto;" onload="init();">
<div class="container">
    <div class="py-2 text-center">
        <h1 class="h1 mb-3 font-weight-normal">Karkausvuodet</h1>
        <div class="justify-content-center text-center">
            <form>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label" for="fromYear">Vuodesta</label>
                    <div class="col-sm-4">
                        <input class="form-control text-center" type="number" min="0" max="9999" id="fromYear">
                    </div>
                        <label class="col-sm-2 col-form-label" for="toYear">Vuoteen</label>
                    <div class="col-sm-4">
                        <input class="form-control text-center" type="number" min="0" max="9999" id="toYear">
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" onclick="getLeapYears()" class="btn btn-primary btn-block">Hae karkausvuodet</button>
            </div>
        </div>
        <hr />
        <div class="form-outline text-left">
            <label class="form-label" for="leapYears">Karkausvuodet</label>
            <textarea wrap="hard" class="form-control" id="leapYears" rows="10"></textarea>
        </div>
    </div>
</div>
<!-- JS files: jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const HOST = "http://192.168.250.99:3333";
const PATH = "karkausvuodet";

let from = "1901";
let to = "2000";

const getLeapYears = () => {
    from = document.getElementById("fromYear").value;
    to = document.getElementById("toYear").value;
    const URL = HOST+'/'+PATH+'/'+from+'/'+to;
    fetch(URL)
    .then(response => response.json())
    .then(json => {
        let leapYears = "";
        if (json.karkausvuodet.length == 1) {
            leapYears = json.karkausvuodet[0];
        } else {
            for (let i in json.karkausvuodet) {
                leapYears += json.karkausvuodet[i];
                if (i < json.karkausvuodet.length - 2) {
                    leapYears += ", ";
                }
                if (i == json.karkausvuodet.length - 2) {
                    leapYears += " ja ";
                }

            }
        }
        document.getElementById("leapYears").value = leapYears;
    })
    .catch(err => console.log('Request Failed', err));
}

const init = () => {
    document.getElementById("fromYear").value = from;
    document.getElementById("toYear").value = to;
    getLeapYears();
}

</script>
</body>
</html>