Nedtellingskalender: HTML, CSS og JavaScript

OLYMPUS DIGITAL CAMERA

Akkurat NÅ er det 18 dager og 21 timer til jeg og Øystein skal hente katten vår. Wow, litt overkill å telle ned hver eneste time eller?, tenker du kanskje. Men grunnen til at jeg har så god oversikt er fordi jeg lagde en nedtellingskalender som en øvingsoppgave på jobb! 

Kalenderen spør først start- og slutt-dato for når den skal begynne og slutte (hvis det er irriterende er det bare å fjerne dette, og heller sette en fast dato uansett). Deretter lager den så mange “bokser” som dager det er mellom start- og slutt-dato. For hver dag som går blir en av boksene farget. I tillegg har den en nedteller nederst, som teller dager, timer, minutter og sekunder. Når tiden er ute kommer teksten “Nå har du fått katten <3”. 

Og ja, jeg har brukt skrifttypen Comic Sans. Du har lov til å bytte den ut, haha! Selv om den er en veldig forhatt skrifttype (med rette ifølge disse punktene) syns jeg den er komisk og sjarmerende. 

 

Legg forresten merke til den fete hovereffekten jeg la til. Ah, jeg elsker hovereffekter. Jeg får bruke altfor lite av det på jobb!

 

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”>
</head>
<body>

<!– Innholdet i h1-tagen kan byttes ut med noe passende –>
    <h1>
        Nedtelling til overtakelse av katt
    </h1>
<main id=”main”>

</main>

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

<!– Her blir script.js-fila inkludert –>
<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: “Comic Sans MS”, cursive, sans-serif;
}

main
{
    background-color: white;
    width: 80%;
    margin: 50px auto;
    padding: 50px;
    border: 10px solid teal;
}

div
{
    display: inline-block;
    padding: 20px;
    width: 100px;
    margin: 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-color: tomato;
    border-color: tomato;
}

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

span.usynlig
{
        display:none;
}

h1
{
    text-align: center;
    color: tomato;
    font-size: 40px;
}

 

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;

// Spør brukeren om start og sluttdato for kalender-nedtellingen. Her kan eksempeldatoene byttes ut
var dateTo = prompt(“Dato og klokkeslett for overtakelse:”, “Sep 16, 2018 13:00:00”);
var dateFrom = prompt(“Startdato:”, “Aug 22, 2018 15: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. 

 

Fikk du noe ut av kodene her? 

 

4 thoughts on “Nedtellingskalender: HTML, CSS og JavaScript

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