← Tilbake

JavaScript Modul 3: Fra skript til mini-app

Nå går vi fra “kode som funker” til “kode som er ryddig og lett å bygge videre på”. Du skal bruke funksjoner, objekter og localStorage – og lage en mini To-Do-app.

Nye konsepter

Functions

Ryddig kode

Vi deler opp koden i små biter med function, så det blir lettere å forstå og feilsøke.

Objects

Samle data

Vi lager objekter som samler info om én “ting”, f.eks. en bruker eller en oppgave.

LocalStorage

Husk det!

Nettleseren kan lagre data lokalt, så nettsiden “husker” selv etter refresh.

1. Funksjoner: Unngå repetisjon

Hvis du har mye “lik kode”, er det et tegn på at du bør bruke en funksjon. Her er et eksempel med tema (mørkt/lyst) slik som i Modul 2. 

// 1) Lag en funksjon som gjør jobben
function settTema(bakgrunn, tekst) {
  document.body.style.backgroundColor = bakgrunn;
  document.body.style.color = tekst;
}

// 2) Bruk funksjonen når du klikker
document.getElementById("darkBtn").addEventListener("click", function () {
  settTema("#222", "white");
});

document.getElementById("lightBtn").addEventListener("click", function () {
  settTema("white", "black");
});
Hint: En funksjon er som en “oppskrift”. Du skriver den én gang og bruker den mange ganger.

2. Objekter: Lag en “brukerprofil”

I stedet for mange løse variabler, kan du samle alt i ett objekt. 

// Eksempel: ett objekt som samler info om brukeren
const bruker = {
  navn: "Ukjent",
  klasse: "1IM",
  favorittTema: "light"
};

// Skriv ut info på siden
document.getElementById("profil").textContent =
  `${bruker.navn} (${bruker.klasse}) – tema: ${bruker.favorittTema}`;

Oppgave: Lag et input-felt for navn og en knapp “Lagre”. Når du trykker “Lagre” skal:

3. LocalStorage: Husk navnet etter refresh

LocalStorage lagrer tekst lokalt i nettleseren. 

// Lagre
localStorage.setItem("navn", "Tore");

// Hente
const lagretNavn = localStorage.getItem("navn");
if (lagretNavn) {
  document.getElementById("hilsen").textContent = `Velkommen tilbake, ${lagretNavn}!`;
}
Viktig: LocalStorage lagrer alltid tekst. Skal du lagre objekter/arrays, bruk JSON.stringify() og JSON.parse(). 
// Lagring av array/objekt:
const liste = ["Melk", "Brød"];
localStorage.setItem("liste", JSON.stringify(liste));

// Henting:
const hentet = JSON.parse(localStorage.getItem("liste") || "[]");
console.log(hentet);

4. Mini-prosjekt: To-Do-app (Nivå 3)

Du lager en liten app som:

A) HTML (lim inn i body der du vil ha appen):

<div class="card">
  <div class="card-body">
    <h3 class="h6 fw-bold">To-Do-app</h3>

    <div class="input-group mb-2">
      <input id="todoInput" class="form-control" placeholder="Skriv en oppgave..." />
      <button id="todoAddBtn" class="btn btn-primary">Legg til</button>
    </div>

    <ul id="todoList" class="list-group"></ul>

    <button id="todoClearBtn" class="btn btn-outline-secondary btn-sm mt-3">
      Tøm alt
    </button>
  </div>
</div>

B) JavaScript (starterkode):

// ===== To-Do: starterkode =====

// 1) Modell: array med oppgaver (hver oppgave er et objekt)
let oppgaver = JSON.parse(localStorage.getItem("oppgaver") || "[]");

// 2) DOM
const todoInput = document.getElementById("todoInput");
const todoAddBtn = document.getElementById("todoAddBtn");
const todoList = document.getElementById("todoList");
const todoClearBtn = document.getElementById("todoClearBtn");

// 3) Lagre til localStorage
function lagre() {
  localStorage.setItem("oppgaver", JSON.stringify(oppgaver));
}

// 4) Tegn opp listen på nytt
function render() {
  todoList.innerHTML = "";

  for (let i = 0; i < oppgaver.length; i++) {
    const oppgave = oppgaver[i];

    const li = document.createElement("li");
    li.className = "list-group-item d-flex justify-content-between align-items-center";

    // tekst
    const span = document.createElement("span");
    span.textContent = oppgave.tekst;

    // slett-knapp
    const delBtn = document.createElement("button");
    delBtn.className = "btn btn-sm btn-outline-danger";
    delBtn.textContent = "Slett";

    delBtn.addEventListener("click", function () {
      // fjern 1 element på index i
      oppgaver.splice(i, 1);
      lagre();
      render();
    });

    li.appendChild(span);
    li.appendChild(delBtn);
    todoList.appendChild(li);
  }
}

// 5) Legg til oppgave
function leggTilOppgave() {
  const tekst = (todoInput.value || "").trim();
  if (!tekst) return;

  // oppgave-objekt
  const ny = { tekst: tekst };

  oppgaver.push(ny);
  todoInput.value = "";

  lagre();
  render();
}

// 6) Events
todoAddBtn.addEventListener("click", leggTilOppgave);
todoInput.addEventListener("keydown", function (e) {
  if (e.key === "Enter") leggTilOppgave();
});

todoClearBtn.addEventListener("click", function () {
  oppgaver = [];
  lagre();
  render();
});

// 7) Første render
render();
Utvidelse (valgfritt): Legg til “ferdig/ikke ferdig” ved å ha { tekst, ferdig: false }. Når man klikker på teksten, toggler du ferdig og bruker f.eks. text-decoration: line-through.

Sjekkliste for Modul 3

  • ✅ Jeg har brukt minst 2 funksjoner.
  • ✅ Jeg har brukt minst 1 objekt.
  • ✅ Jeg har brukt localStorage.
  • ✅ Appen fungerer etter refresh (data kommer tilbake).
  • ✅ Ingen feilmeldinger i Console (F12).
  • ✅ Koden er ryddig og kommentert.

Bonus: liten test-del (valgfritt)

Hvis du vil teste “brukerprofil”-delen raskt, legg dette et sted på siden:

<div class="alert alert-light border small mb-2">
  <div id="hilsen">Hei!</div>
  <div id="profil" class="text-muted">Profil kommer her...</div>
</div>

Tips: koble dette med input + localStorage slik at siden husker navnet.