Parprogrammeringsoppgave: Filmlisten

Dere skal lage en filmliste, en liten nettside der man kan se en samling filmer, legge til nye, fjerne gamle, og la datamaskinen velge hvilken film dere skal se i kveld.

Husk: én datamaskin, bytt roller, timer på 7 minutter.

Startkode

Lag et nytt GitHub Repo, klon det ned og opprett filene nedenfor. HTML og CSS er ferdig. JavaScript må dere skrive selv.

index.htmlstil.cssscript.js

<!DOCTYPE html>
<html lang="no">
<head>
  <meta charset="UTF-8">
  <title>Filmlisten</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <h1>Filmlisten vår</h1>

  <button id="pick-random">Velg en film for oss</button>
  <p id="chosen-movie"></p>

  <div id="movie-list">
    <!-- Filmene vises her -->
  </div>

  <form id="new-movie">
    <input type="text" id="new-title" placeholder="Legg til en film..." required>
    <button type="submit">Legg til</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

body {
  font-family: system-ui, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: #f5f5f0;
}

h1 { font-size: 1.8rem; }

.movie-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.movie-card span { font-size: 1rem; }

.remove-btn {
  background: transparent;
  border: none;
  color: #999;
  font-size: 1.2rem;
  cursor: pointer;
}

.remove-btn:hover { color: #c00; }

form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

input { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; }

button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  background: #2c7a7b;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

#pick-random { margin-bottom: 1rem; background: #d97706; }

#chosen-movie { font-size: 1.2rem; font-weight: bold; min-height: 1.5rem; }

const movies = ['Dune', 'Parasite', 'Spider-Verse', 'Kon-Tiki', 'Barbie'];

// Denne kjøres når skjemaet sendes inn.
// event.preventDefault() hindrer at siden lastes på nytt.
document.getElementById('new-movie').addEventListener('submit', function(event) {
  event.preventDefault();
  // Her legger dere inn det som skal skje når «Legg til» trykkes
});

// Her skriver dere resten av koden deres.

Del 1: Vis filmene og legg til nye

Målet for del 1 er at alle filmene i movies-arrayen vises på siden, og at man kan legge til nye filmer via skjemaet.

Steg 1: Vis filmene på siden

Akkurat nå ligger filmene bare i arrayen, de vises ikke noe sted på skjermen. Lag en funksjon showMovies() som går gjennom movies og lager et kort for hver film inne i #movie-list. Kall funksjonen nederst i filen.

Hint

Hvert filmkort kan se slik ut i HTML:

<div class="movie-card">
  <span>Tittelen her</span>
</div>

Den enkleste måten å lage dem fra JavaScript er å bygge HTML-en som en tekststreng. I tekst mellom backticks kan dere sette inn variabler med ${...}:

const list = document.getElementById('movie-list');
list.innerHTML += `<div class="movie-card"><span>${movies[i]}</span></div>`;

Husk å sette list.innerHTML = '' først i funksjonen, ellers får dere alle filmene to ganger neste gang dere kjører den.

Steg 2: Legg til nye filmer

Når skjemaet sendes inn (dette er allerede satt opp for dere i script.js), skal dere hente tittelen fra tekstfeltet, legge den til i movies, og kjøre showMovies() på nytt så den nye filmen vises.

Legge til elementer i en array

For å legge til noe på slutten av en array bruker dere push(). Les mer om hvordan det fungerer i referansen for arrays.

Hint

For å hente teksten fra tekstfeltet: document.getElementById('new-title').value. For å legge den til i arrayen: movies.push(title).

Steg 3: Tøm tekstfeltet

Etter at filmen er lagt til, skal tekstfeltet bli tomt igjen, så det er klart til neste film.

Hint

For å tømme et tekstfelt, sett .value til en tom tekst: document.getElementById('new-title').value = '';

Når disse tre stegene virker, er dere ferdig med del 1. Har dere tid igjen? Start på del 2.

Del 2: Fjern filmer

Målet for del 2 er at man kan fjerne filmer fra listen.

Steg 4: Fjern-knapp på hvert kort

Utvid showMovies() slik at hvert filmkort også får en liten knapp (for eksempel «✕») ved siden av tittelen. CSS-en for .remove-btn er allerede klar, så knappen blir stilt riktig hvis dere bruker den klassen.

Hint

Knappen skal ligge inni .movie-card, rett etter <span>:

<div class="movie-card">
  <span>Tittelen her</span>
  <button class="remove-btn">✕</button>
</div>

Steg 5: Få fjern-knappen til å faktisk fjerne filmen

Når noen klikker på «✕», skal filmen fjernes fra movies-arrayen, og listen skal vises på nytt.

Fjerne elementer fra en array

For å fjerne et element fra en array kan dere bruke filter() til å lage en ny array uten det elementet. Les mer om hvordan det fungerer i referansen for arrays.

Hint

Lag en egen funksjon removeMovie(i) som fjerner filmen på indeks i og kaller showMovies() på nytt. For å fjerne fra arrayen, bruk movies.splice(i, 1) (det betyr «fjern 1 element som starter på indeks i»).

Nå må dere få knappen til å kalle removeMovie med riktig indeks. Den enkleste måten er å sette onclick i HTML-en dere lager i showMovies():

`<button class="remove-btn" onclick="removeMovie(${i})">✕</button>`

${i} blir erstattet med riktig tall for hver knapp, så hver knapp «husker» sin egen indeks.

Når disse to stegene virker, er dere ferdig med del 2. Har dere tid igjen? Start på del 3.

Del 3: Velg tilfeldig film

Målet for del 3 er at den oransje knappen velger en tilfeldig film fra listen.

Steg 6: Velg en tilfeldig film

Når noen klikker på «Velg en film for oss», skal én tilfeldig film fra listen vises inne i #chosen-movie.

Hint

Dere trenger tre ting.

1) En click-lytter på knappen:

document.getElementById('pick-random').addEventListener('click', function() {
  // her skjer det tilfeldige valget
});

2) En tilfeldig indeks: Math.floor(Math.random() * movies.length) gir et tilfeldig heltall mellom 0 og movies.length - 1, altså nettopp de indeksene som finnes i arrayen.

3) Sett filmen inn i #chosen-movie ved å bruke .textContent.

Sjekkliste

Når dere er ferdig, skal alt dette stemme:

Alle filmene i arrayen vises på siden når siden lastes
Man kan legge til en ny film via skjemaet, og den vises med en gang
Tekstfeltet blir tomt etter at man har lagt til en film
Hvert filmkort har en fjern-knapp
Å klikke på fjern-knappen fjerner filmen fra listen
«Velg en film for oss»-knappen viser en tilfeldig film fra listen

Hvis dere blir ferdig tidlig

Velg én (eller flere):

Antall. Vis «Du har X filmer i lista» et sted på siden. Tallet skal oppdateres når man legger til eller fjerner en film.
Ikke legg til samme film to ganger. Hvis noen prøver å legge til en film som allerede står i listen, skal den ikke legges til. Bruk movies.includes(title).
Tøm hele listen. En knapp som sletter alle filmer. Spør «er du sikker?» med confirm() først.
Sorter alfabetisk. En knapp som sorterer listen fra A til Å. Bruk movies.sort().
Ikke velg samme film to ganger på rad. Hvis man trykker «Velg en film for oss» flere ganger, skal den ikke vise samme film som sist.

Husk mens dere jobber

Timeren går. Sju minutter, så bytter dere. Ingen diskusjon. Ingen forhandling.

Navigatøren snakker. Hvis det er stille i tre minutter, gjør dere noe feil.

Ikke søk opp løsningen med en gang. Prøv selv først. Les feilmeldingen høyt. Tenk høyt. Det er en flott mulighet for læring.

Når dere står helt fast: Si ifra. Vi finner ut av det sammen.