Oppgave 7

Lag en kalkulator som utfører beregninger basert på selvvalgt brukerdata (ikke BMI som er benyttet som eksempel i kurset). Kalkulatoren skal minst inneholde en tekstboks og en nedtrekksliste. Tips: I nedtrekkslisten har du satt tallverdier som "value". Disse benyttes som en del av beregningen.

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    document.getElementById("o7-input").onkeyup = calculate; // Gjør utregning når bruker skriver inn noe
    document.getElementById("o7-unit").onchange = calculate; // Gjør utregning når bruker skifter måleenhet.
}

function calculate() {
    var outputs;
    // Ready...
    // Get set...
    switch (document.getElementById("o7-unit").value) {
        // Go!
        case "mm":
            outputs = {mm: 1, cm: 0.1, m: 0.001, km: 0.000001, mil: 0.0000001};
            break
        case "cm":
            outputs = {mm: 10, cm: 1, m: 0.01, km: 0.00001, mil: 0.000001};
            break
        case "m":
            outputs = {mm: 1000, cm: 100, m: 1, km: 0.001, mil: 0.0001};
            break
        case "km":
            outputs = {mm: 1000000, cm: 100000, m: 1000, km: 1, mil: 0.1};
            break
        case "mil":
            outputs = {mm: 100000000, cm: 10000000, m: 100000, km: 0.1, mil: 1};
            break
        default:
            alert("Du må velg en enhet");
            break
    }

    // Loop gjennom objektet
    for (var key in outputs) {
        if (outputs.hasOwnProperty(key)) {
            // Sett hver output
            document.getElementById("o7-output-" + key).value = document.getElementById("o7-input").value * outputs[key];
        }
    }
}

HTML

                
<div class="row">
    <div class="input-field col s12 m6">
        <input id="o7-input" type="number" placeholder="Skriv et tall, f.eks: 100">
    </div>
    <div class="input-field col s12 m6">
        <select id="o7-unit">
            <option value="mm">Millimeter</option>
            <option value="cm">Centimeter</option>
            <option value="m" selected>Meter</option>
            <option value="km">Kilometer</option>
            <option value="mil">Mil</option>
        </select>
    </div>
    <div class="s12 row">
        <div class="input-field s12">
            <input type="text" id="o7-output-mm" class="col s7" disabled>
            <label class="col s4 right" for="o7-output-mm">Millimeter</label>
        </div>
        <div class="input-field s12">
            <input type="text" id="o7-output-cm" class="col s7" disabled>
            <label class="col s4 right" for="o7-output-cm">Centimeter</label>
        </div>
        <div class="input-field s12">
            <input type="text" id="o7-output-m" class="col s7" disabled>
            <label class="col s4 right" for="o7-output-m">Meter</label>
        </div>
        <div class="input-field s12">
            <input type="text" id="o7-output-km" class="col s7" disabled>
            <label class="col s4 right" for="o7-output-km">Kilometer</label>
        </div>
        <div class="input-field s12">
            <input type="text" id="o7-output-mil" class="col s7" disabled>
            <label class="col s4 right" for="o7-output-mil">Mil</label>
        </div>
    </div>
</div>