Oppgave 2

Lag en webside med en tekstboks og en knapp. Lag så en array med antall dager i hvermåned. Antall dager i januar skal da være på indeks 0, februar på indeks 1 osv. I tekstboksen skal du så kunne skrive inn nummeret på en måned (1-12), og få ut antall dager i denne måneden. Du kan her se bort i fra skuddår. Utvid så koden til å også gi ut navnet på måneden hentet fra en annen array.

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var output = document.getElementById("o2-output");
    var input = document.getElementById("o2-input");
    var lastInput = 0;

    document.getElementById("o2-run").onclick = function() {
        output.innerHTML = getMonthDays(input.value);
    }

    input.onkeypress = function(e) {
        e.preventDefault(); // Stop vanlig input
        var thisInput = String.fromCharCode(e.which); // Sett gjeldene verdi til trykket tast
        
        // Hvis forrige verdi satt sammen med gjeldene verdi er større enn 12
        if ((lastInput + thisInput) > 12) {
            input.value = thisInput;                       // Sett input til gjeldene verdi
        } else if (input.value.length != 0) {              // Sjekk at feltet ikke var tomt når vi kjørte
            input.value = parseInt(lastInput + thisInput);
        } else {
            input.value = thisInput;                       // Kjører når feltet var tomt
        }

        output.innerHTML = getMonthDays(input.value);

        // Sett forrige input til gjeldene
        lastInput = thisInput;
    }
}

function getMonthDays(month) {
    var date = new Date();
    var months = [];

    for (var i = 1; i <= 12; i++) {
        months[i] = {
            name: getMonthInfo("name", date.getYear(), i),
            days: getMonthInfo("days", date.getYear(), i)
        }
    }

    if (month <= 12 && month >= 1) {
        return "<b>" + months[month].days + "</b> dager i <b>" + months[month].name + "</b> " + date.getFullYear();
    } else {
        return "Skriv inn et gyldig månedsnummer (mellom 1 og 12)"
    }

    return false;
}

function getMonthInfo(get, year, month) {
    var monthNames = [
        "januar",
        "februar",
        "mars",
        "april",
        "mai",
        "juni",
        "juli",
        "august",
        "september",
        "oktober",
        "november",
        "desember"
    ]

    if (get == "days") {
        return new Date(year, month, 0).getDate();
    } else if (get == "name") {
        return monthNames[month-1];
    }

    return false;
}

HTML

                
<div class="row input-field">
    <input id="o2-input" class="col s10" type="number" min="1" max="12" placeholder="Skriv inn et månedsnummer (F.eks. 2)">
    <button id="o2-run" class="btn black col s2">Kjør</button>
</div>
<p id="o2-output"></p>