claude har ryddet ubrukte vite linjer

README.md

@@ -134,7 +134,6 @@ pnpm test:run # 1 gjennomkjørign
 
 ```
 
-
 Vi har per nå 18 tester fordelt på 5 filer. De dekker de fire testtypene kravene
 ber om. Snapshot, props, state og brukerinteraksjon, samt mocking så testene
 ikke henter data.
@@ -148,7 +147,7 @@ inn.
 props faktisk vises, og at favorittknappen kaller tilbake med riktig film-id.
 Snapshotet venter til skuespillerne er lastet før det tas. Gjør den ikke det
 bytter kortet utseende midt i, og testen feiler tilfeldig. Snapshot-fila ligger i
-src/components/__snapshots__ og er committet. Uten den har ikke testen noe å
+src/components/**snapshots** og er committet. Uten den har ikke testen noe å
 sammenligne med.
 
 **Sidebar.test.tsx** er for React state. Å klikke på pila i sidebaren endrer
@@ -438,29 +437,30 @@ KI var definitivt mest nyttig når jeg hadde et konkret problem og kunne stille
 
 #### Clemens
 
-Jeg har hovedsakling brukt Claude av Anthropic gjennom prosjektet. Claude har blitt brukt som en veileder og ikke til å generere all koden for meg. 
+Jeg har hovedsakling brukt Claude av Anthropic gjennom prosjektet. Claude har blitt brukt som en veileder og ikke til å generere all koden for meg.
 
 KI er brukt til:
 
 - Forklaring av ting jeg ikke hadde mye kunnskap til før, da dette er første gang jeg bruker mange av ressursene vi skulle i prosjektet. Jeg stilte spørsmål om hooks, hvordan man benytter seg av komponenter og hvordan mange av de forksjellige filene henger og holder sammen.
-- Diskutering av løsninger før jeg begynte å skrive kode. For eksmepel var det å lage en mobillayout litt mer krevende og hjalp med å bestemme hvilke mengde pixler som hadde passet bra til f.eks knappe størrelser. 
-- Feilsøking av diverse problemer. 401 mot TMDB, CSS som ikke virket eller så veldig rar ut. Det var veldig nyttig da mye av koden man skriver her ikke nødvendigvis er "feil", men bare ikke er veldig intuitiv eller ikke er best practice. Da kunne Claude fortelle om alternativer og andre muligheter man kunne prøve seg på. 
+- Diskutering av løsninger før jeg begynte å skrive kode. For eksmepel var det å lage en mobillayout litt mer krevende og hjalp med å bestemme hvilke mengde pixler som hadde passet bra til f.eks knappe størrelser.
+- Feilsøking av diverse problemer. 401 mot TMDB, CSS som ikke virket eller så veldig rar ut. Det var veldig nyttig da mye av koden man skriver her ikke nødvendigvis er "feil", men bare ikke er veldig intuitiv eller ikke er best practice. Da kunne Claude fortelle om alternativer og andre muligheter man kunne prøve seg på.
 - Tilgjengelighet på mobil, som f.eks hvilke aria-attributter som trengs og hvorfor. Her var det igjen hjelpelig med noen som fortalte meg hvor stor kanpper måtte være for å kunne trykkes på med tommelen på mobil før jeg kunne teste det selv på serveren.
-- Oppsett av Vitest og de første testene. Claude gidde også en god forklaring hva de forskjellige testene gjorde og hvorfor de var nyttige å benytte seg av. 
+- Oppsett av Vitest og de første testene. Claude gidde også en god forklaring hva de forskjellige testene gjorde og hvorfor de var nyttige å benytte seg av.
 
 Erfaringer:
 
-KI var klart best på feilsøking. Flere av feilene vi hadde var slik at ingenting skjedde i det hele tatt, og det er nesten umulig å google. Da var KI en super hjelp da den kunne få en bedre oversikt over filene noe i til tider ikke fikk til. 
+KI var klart best på feilsøking. Flere av feilene vi hadde var slik at ingenting skjedde i det hele tatt, og det er nesten umulig å google. Da var KI en super hjelp da den kunne få en bedre oversikt over filene noe i til tider ikke fikk til.
+
+Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk utbytte av lærestoffet og ikke bare kopierte og limte inn koden. Det å få Claude til å forklare koden til meg først hjalp også meg med å kunne gjøre små endringer senere uten bruk av KI samt å kunne justere koden til KI før jeg pushet og merget det til main.
 
-Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk utbytte av lærestoffet og ikke bare kopierte og limte inn koden. Det å få Claude til å forklare koden til meg først hjalp også meg med å kunne gjøre små endringer senere uten bruk av KI samt å kunne justere koden til KI før jeg pushet og merget det til main. 
+Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi forklag til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar.
 
-Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi forklag til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar. 
+Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppe medlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med.
 
-Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppe medlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med. 
+Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativ til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg.
 
-Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativ til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg. 
 
-Det å la KI hjelpe ved lagingen av testene hjalp oss også å finne ekte feil i koden. Vi merket da at MovieList manglet key og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige. 
+Det å la KI hjelpe ved lagingen av testene hjalp oss også å finne ekte feil i koden. Vi merket da at MovieList manglet key og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige.
 
 
 #### Albert

src/App.css

@@ -1,187 +1,4 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
+/* Sidelayout: sidefelt, hovedinnhold og en tom kolonne på høyre side. */
 
 .page {
   display: flex; /* legger barna (aside + main) side om side i stedet for stablet */

src/components/MovieCard.tsx

@@ -39,7 +39,7 @@ function MovieCard({
   //const rating = Math.round(movie.vote_average * 10);
   const path = movie.poster_path
     ? `https://image.tmdb.org/t/p/w200${movie.poster_path}`
-    : '';
+    : undefined;
 
   return (
     <article className="movie-card">

src/index.css

@@ -3,17 +3,12 @@
   --text-h: #08060d;
   --bg: #fff;
   --border: #e5e4e7;
-  --code-bg: #f4f3ec;
   --accent: #aa3bff;
   --accent-bg: rgba(170, 59, 255, 0.1);
   --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
   --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
   --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
 
   font: 18px/145% var(--sans);
   letter-spacing: 0.18px;
@@ -36,17 +31,9 @@
     --text-h: #f3f4f6;
     --bg: #16171d;
     --border: #2e303a;
-    --code-bg: #1f2028;
     --accent: #c084fc;
     --accent-bg: rgba(192, 132, 252, 0.15);
     --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
   }
 }
 
@@ -93,21 +80,6 @@ p {
   margin: 0;
 }
 
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
-
 :focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;