Oppgave 5

En spådame ønsker å reise vekk på ferie, og vil derfor automatisere sine tjenester via en nettside. Du har fått i oppgave å lage denne funksjonaliteten. Lag en nettside for å gi en spådom, hvor man kan skrive inn verdier i tekstbokser for navn, alder og høyde. I tillegg skal det være en nedtrekksliste for kjønn. Spådommen skal vises på nettsiden når brukeren trykker på en knapp, og vil være basert på en magisk verdi. Denne verdien vil regnes ut forskjellig, avhengig av om det er en gutt eller en jente

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    document.getElementById("get-future").onclick = getFuture;
}

function getFuture() {
    var name = document.getElementById("o5-name").value;
    var age = document.getElementById("o5-age").value;
    var height = document.getElementById("o5-height").value;
    var gender = document.getElementById("o5-gender").value;

    if (name.length === 0 || age.length === 0 || height.length === 0 || gender.length === 0) {
        return false;
    }

    var magic = magicFormula(gender, name.length, parseInt(age), parseInt(height));

    var output = document.getElementById("the-future");
    var outputMsg;

    function magicFormula(gender, name, age, height) {
        if (gender == 1) {
            return name * age - height
        } else if (gender == 2) {
            return age * height - 3;
        } else {
            return false;
        }
    }

    if ((magic%2) == 0) {
        outputMsg = "Det vil gå deg godt her i verden...<br>";
        outputMsg += "For at spådommen skal gå i oppfyllelse, må du betale inn 100 kr til følgende kontonummer: 1234.12.12345";
    } else {
        outputMsg = "Stakkars deg! Alt kommer til å gå deg galt...<br>";
        outputMsg += "For at spådommen ikke skal gå i oppfyllelse, må du betale inn 100 kr til følgende kontonummer: 1234.12.12345";
    }

    output.innerHTML = outputMsg;
}

HTML

                
<div class="row input-field">
    <label for="o5-name" class="col s1"><i class="icon-user-2"></i></label>
    <input type="text" id="o5-name" class="col s11" placeholder="Navn">
</div>
<div class="row input-field">
    <label for="o5-age" class="col s1"><i class="icon-cake-2"></i></label>
    <input type="number" id="o5-age" class="col s11" placeholder="Alder">
</div>
<div class="row input-field">
    <label for="o5-height" class="col s1"><i class="icon-ruler-1"></i></label>
    <input type="number" id="o5-height" class="col s11" placeholder="Høyde">
</div>
<div class="row input-field">
    <label for="o5-gender" class="col s1"><i class="icon-gender"></i></label>
    <select type="text" id="o5-gender" class="col s11">
        <option value="0" disabled selected>Kjønn</option>
        <option value="1">Gutt</option>
        <option value="2">Jente</option>
    </select>
</div>
<div class="row input-field">
    <button id="get-future" class="btn black">Min spådom</button>
</div>
<p id="the-future"></p>