Lag din egen digitale adventskalender!

Nååå har endelig nedtellingen til julaften begynt, og jeg har gledet meg såå mye til i dag! 

Huset er pyntet i lilla farger, adventskalenderen er dratt fram og åpnet og julekoppene er brukt. Nå er vi endelig i gang, og julestemningen kan endelig begynne å komme snikende. 

Jeg har prøvd å ikke gjøre noen julegreier og holde julestemningen i sjakk, nettopp fordi den blir så ekstra sterk om man bare avventer med den til det er tid. Jeg har fortsatt ikke tatt fram alt av julepynt, først må jeg nemlig kose meg med den fine tiden som advent er. Nedtellingen syns jeg nemlig er noe av det koseligste med desember, og gjør at jeg klarer å glede meg ekstra mye til det endelig blir ordentlig jul!

Som en ekstra liten kalender har jeg videreutviklet denne nedtellingskalenderen jeg hadde før huskjøp og katteovertakelse. Nå er den tilpasset JUL og advent, og teller ned for hver eneste dag i desember! 

 

 

Koden

Dersom du ikke har satt opp en enkel, statisk html-side før, kan det være lurt å gå gjennom denne leksjonen. Der går jeg gjennom det å bruke tekst-editor og å skille html og css i forskjellige dokumenter i samme mappe. Kjapp og enkel leksjon!

Du skal altså her ha tre forskjellige dokumenter i samme mappe. Jeg anbefaler å kalle mappa noe lignende “Nedtellingskalender”, for eksempel. De tre filene du skal lage er index.html, style.css og script.js. Den første er fila du skal ha html-koden i. Den andre skal du ha css-koden i. I den siste fila skal du ha JavaScript-kode. Det er et kodespråk for å få enda mer til å skje på nettsiden din, enn hva css og html kan klare alene, og det inngår også i frontend-yrket. 

Jeg må også presisere at dette her ikke er en av mine webleksjoner, da ville jeg gått litt mer gjennom JavaScript til å begynne med. Dette er for alle nyskjerrigperer som vil se hva som ligger bak en slik nedtellingskalender, og som kanskje vil lage en selv. 

 

HTML 

I index.html skriver du:

<!DOCTYPE html>
<html>
<head>
    <title>Nedtellingskalender</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>

<!-- Innholdet i h1-tagen kan byttes ut med noe passende -->
    <h1>
        Adventskalender
    </h1>
<main id="main">

</main>

<!-- Inne i disse p-tagene kommer nedtelleren -->
<p id="bunntekst"></p>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

Det som er skrevet inne i <!– –>-klammene her er kommentarer. Det er slik du kommenterer html-kode for at ikke nettleseren skal lese det og tolke det som kode. 

 

CSS

I style.css skriver du:

body {
    font-family: 'Fredericka the Great', cursive;
}

main {
    background-color: white;
    width: 80%;
    margin: 50px auto;
    padding: 50px;
    border: 10px solid crimson;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 20px;
}

div {
    display: inline-block;
    padding: 20px;
    border: 1px solid grey;
    background-color: grey;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    transition: 0.3s;
    text-align: center;
}

div:hover {
    transform: scale(1.2,1.2);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.done {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/fa/Happy_new_year_06463.jpg');
    background-size: cover;
    border-color: forestgreen;
}

div.done:last-child {
    background-image: url('https://torange.biz/photofx/94/8/mirror-blur-frame-claus-christmas-santa-foreground-banner-market-94949.jpg');
}

p#bunntekst {
    text-align: center;
    font-size: 40px;
    color: forestgreen;
}

span.usynlig {
        display:none;
}

h1 {
    text-align: center;
    color: forestgreen;
    font-size: 50px;
    font-weight: 400;
}

@media screen and (max-width: 750px) {
    main {
        grid-template-columns: auto auto;
    }

    h1 {
        font-size: 30px;
    }
}

 

JavaScript

I script.js skriver du:

// Henter alle div-elementene på siden
var element = document.getElementsByTagName("div");

// Deklarerer variabelen "id"
var id = 0;

// Finner tidsstempel for tid akkurat nå
var now = Math.floor(Date.now())/1000;

// Setter start- og sluttdato. Her kan eksempeldatoene byttes ut
var dateTo = "Dec 24, 2018 24:00:00";
var dateFrom = "Dec 01, 2018 00:00:00";

// Lager tidsstempel av start- og sluttdato + lager tidsstempel for et døgn
var countDownDate = new Date(dateTo).getTime() / 1000;
var startDate = new Date(dateFrom).getTime() / 1000;
var oneDay = 60*60*24;

// Regner ut antall dager det er mellom start- og slutt-datoer
var daysCount = (countDownDate - startDate) / oneDay;

// Lager én div for hver dag i "daysCount"
for (var i = daysCount - 1; i >= 0; i--) {
  var div = document.createElement("div");
  document.getElementById("main").appendChild(div);
}

// Looper gjennom div-elementene
for(var i = 0; i < element.length; i++){

    // Setter tall i hver div. Går opp med én for hver div.
    element[i].innerHTML = i + 1;

    // Setter ID = tidsstempel av den datoen diven gjelder for
    element[i].id = ( countDownDate - (oneDay * ( element.length - i ))) ;

    // Henter ID, sjekker om id(tidsstempelet) er mer eller mindre enn nå-tidsstempelet. Er det mindre betyr det at den er ferdig. Da får den satt klassen "ferdig"
    id = element[i]['attributes'][0]['nodeValue'];
    var div = document.getElementById(id);
    if ( id <= now )
    {
        div.classList.add("done");
    }
}

// Koden nedenfor er hentet fra nett. Den lager nedtelleren nederst i kalenderen.

// For at utregningene nedenfor skal fungere, ganger vi tidstempelet for avslutningsdatoen med 1000
countDownDate = countDownDate * 1000;

// Lager funksjonen "updateTimer"
var updateTimer = setInterval(function() {

  // Setter nå-tidsstempelet til å oppdatere med nyeste tid hvert sekund
  now = new Date().getTime();

  // Finner differansen mellom nå og avslutning
  var distance = countDownDate - now ;

  // Kalkulerer dager, timer, minutter og sekunder
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Setter bunnteksten
  document.getElementById("bunntekst").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Når nedtellingen er ferdig settes det en ny tekst. Denne kan du endre på til noe valgfritt
  if (distance < 0) {
    clearInterval(updateTimer );
    document.getElementById("bunntekst").innerHTML = "Nå har du fått katten <3";
  }
}, 1000);

Her er alt som er skrevet etter // kommentarer. Jeg har prøvd å forklare for hvert trinn hva som skjer. 

 

Kom veldig gjerne med konstruktiv kritikk til koden! Jeg slang dette sammen på jobb for å ha en nedtellingskalender da jeg skulle kjøpe første leilighet, og siden har ikke kalenderen fått så mye kjærlighet. Det er alltid nyttig å få vite hva som burde vært gjort annerledes. 

 

Q: Fikk du noe ut av kodene her? Hva slags kalender har du?

#jul #desember #advent #julekalender #kode #programmering #web #webutvikling #javascript #html #css #diy

 

2 thoughts on “Lag din egen digitale adventskalender!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top