Oppgave 4

Følgende kodebit gir deg en variabel som inneholder hvilken time i døgenet det er (0-23):

var tid = new Date(); var timer = tid.getHours();

Lag en nettside som reflekterer hvilken tid på døgnet det er. Dette kan for eksempel være meldinger slik som "God morgen", "God ettermiddag", grafikk og bakgrunnsfarge. For de som ønsker litt mer utfordring kan det også tas høyde for om det er mørkt/lyst ute basert på dato.

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var currentHour = new Date().getHours();
    setScene(currentHour);

    // For hver child i scene-chooser skal kjøre setScene
    for (var i = 0; i < document.getElementById("scene-chooser").children.length; i++) {
        document.getElementById("scene-chooser").children[i].onclick = function() {
            setScene(this.getAttribute("data-hour"));
        }
    }
}

function setScene(hour) {
    var scene = document.getElementById("scene");

    if (hour <= 12 && hour >= 5) {                       // Fra og med 5 til og med 12
        morning();
    } else if (hour > 12 && hour < 18) {                 // Fra 12 til 18
        afternoon();
    } else if (hour >= 18 && hour < 23) {                // Fra og med 18 til 23
        evening();
    } else if ((hour >= 23 && hour <= 24) || hour < 5) { // Fra og med 23 til og med 24, og før 5.
        night();
    } else {                                             // Tid som ikke finnes...
        magic();
    }

    function morning() {
        scene.style.color = "white";
        scene.style.backgroundColor = "lightyellow";
        scene.style.backgroundImage = "url('oppgave-4-materiale/morning.jpg')"
        setMessage("God morgen <i class='icon-sun'></i>");
    }

    function afternoon() {
        scene.style.color = "white";
        scene.style.backgroundColor = "lightblue";
        scene.style.backgroundImage = "url('oppgave-4-materiale/afternoon.jpg')"
        setMessage("God ettermiddag <i class='icon-sun-cloud'></i>");
    }

    function evening() {
        scene.style.color = "white";
        scene.style.backgroundColor = "grey";
        scene.style.backgroundImage = "url('oppgave-4-materiale/evening.jpg')"
        setMessage("God kveld <i class='icon-waning-crescent-moon'></i>");
    }

    function night() {
        scene.style.color = "white";
        scene.style.backgroundColor = "black";
        scene.style.backgroundImage = "url('oppgave-4-materiale/night.jpg')"
        setMessage("God natt <i class='icon-full-moon'></i>");
    }

    function magic() {
        scene.style.color = "white";
        scene.style.backgroundImage = "linear-gradient(135deg, #FF5254, #745cc4, #5CACC4, #8CD19D, #f4de7c, #FCB859)";
        setMessage("Wait what <i class='icon-pacman'></i>");
    }

    return true;
}

function setMessage(msg) {
    document.getElementById("msg").innerHTML = msg;
}

HTML

                
<div id="scene" class="space-a-small">
    <div id="scene-inner-wrapper">
        <h1 id="msg" class="center-v-h center-align no-margin"></h1>
        <div id="scene-chooser" class="row center-align font-small">
            <div data-hour="5" class="col s3"><i class="icon-sun"></i></div>
            <div data-hour="13" class="col s3"><i class="icon-sun-cloud"></i></div>
            <div data-hour="18" class="col s3"><i class="icon-waning-crescent-moon"></i></div>
            <div data-hour="23" class="col s3"><i class="icon-full-moon"></i></div>
        </div>
    </div>
</div>