From 2fcc2eb9842209efae34468fd6b48479de12586b Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Thu, 10 Sep 2026 17:48:18 +0200
Subject: [PATCH 01/12] refactor: move Character type and set up detail card

---
 src/components/CharacterDetailCard.css |  0
 src/components/CharacterDetailCard.tsx |  0
 src/pages/CharactersPage.tsx           | 10 +---------
 src/types/Character.ts                 | 13 +++++++++++++
 4 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 src/components/CharacterDetailCard.css
 create mode 100644 src/components/CharacterDetailCard.tsx
 create mode 100644 src/types/Character.ts

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/CharactersPage.tsx b/src/pages/CharactersPage.tsx
index b654f7d..363fc0b 100644
--- a/src/pages/CharactersPage.tsx
+++ b/src/pages/CharactersPage.tsx
@@ -4,15 +4,7 @@ import { useEffect, useState } from "react";
 import CharacterCardSmall from "../components/CharacterCardSmall";
 import SearchIcon from "../assets/search.svg"
 
-type Character = {
-    id: number;
-    name: string;
-    species: string;
-    status: string;
-    gender: string;
-    origin: string;
-    image: string;
-};
+import type { Character } from "../types/Character";
 
 const filters = [
     {title: 'Gender', options: ['Female', 'Male', 'Unknown'] },
diff --git a/src/types/Character.ts b/src/types/Character.ts
new file mode 100644
index 0000000..39eb0ea
--- /dev/null
+++ b/src/types/Character.ts
@@ -0,0 +1,13 @@
+export type Character = {
+  id: number;
+  name: string;
+  species: string;
+  status: string;
+  gender: string;
+  origin: {
+    name: string;
+    url: string;
+  }
+  image: string;
+  episode: string[];
+}
\ No newline at end of file

From 255d7d6225bf8f0fc9b2371a910306396d6a39ba Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Thu, 10 Sep 2026 17:58:05 +0200
Subject: [PATCH 02/12] feat: create character detail card component

---
 src/components/CharacterDetailCard.tsx | 31 ++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index e69de29..0bccfbb 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -0,0 +1,31 @@
+import "./CharacterDetailCard.css";
+import type { Character } from "../types/Character";
+
+type CharacterDetailCardProps = {
+  character: Character;
+  onClose: () => void;
+}
+
+export default function CharacterDetailCard({ character, onClose }: CharacterDetailCardProps) {
+  return (
+    <article className='detail-card'>
+      <button type='button' className='close-button' onClick={onClose}>
+        X
+      </button>
+
+      <div className='detail-info'>
+        <h2>{character.name}</h2>
+        <p><strong>Gender:</strong> {character.gender}</p>
+        <p><strong>Species:</strong> {character.species}</p>
+        <p><strong>Origin:</strong> {character.origin.name}</p>
+        <p><strong>Status:</strong> {character.status}</p>
+      </div>
+
+      <img
+        src={character.image}
+        alt={character.name}
+        className='detail-character-image'
+      />
+    </article>
+  )
+}
\ No newline at end of file

From 2fbfd70ff9349614ff3ae8ec0c6ee96cafa15052 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Thu, 10 Sep 2026 18:14:57 +0200
Subject: [PATCH 03/12] feat: connect character detail card

---
 src/components/CharacterCardSmall.tsx | 5 +++--
 src/pages/CharactersPage.tsx          | 9 +++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/CharacterCardSmall.tsx b/src/components/CharacterCardSmall.tsx
index 756030a..39c7a36 100644
--- a/src/components/CharacterCardSmall.tsx
+++ b/src/components/CharacterCardSmall.tsx
@@ -5,9 +5,10 @@ import StarShape from '../assets/star.svg'
 type CharacterCardSmallProps = {
     name: string;
     image: string;
+    onDetails: () => void;
 };
 
-export default function CharacterCardSmall({name, image}: CharacterCardSmallProps){
+export default function CharacterCardSmall({name, image, onDetails}: CharacterCardSmallProps){
     return(
             <article className='card-content'>
                 <img src={CardShape} alt="" className='card-shape'/>
@@ -15,7 +16,7 @@ export default function CharacterCardSmall({name, image}: CharacterCardSmallProp
                     <img src={image} alt="character image" className='character-image'/>
                     <p className='character-name'>{name}</p>
                     <div className='card-buttons'>
-                        <button type='button' className='details-button'>Details</button>
+                        <button type='button' className='details-button' onClick={onDetails}>Details</button>
                         <button type='button' className='favorite-button'>
                             <img src={StarShape} alt="" className='star' aria-label={`Add ${name} to favorites`}/>
                         </button>
diff --git a/src/pages/CharactersPage.tsx b/src/pages/CharactersPage.tsx
index 363fc0b..16476ba 100644
--- a/src/pages/CharactersPage.tsx
+++ b/src/pages/CharactersPage.tsx
@@ -2,6 +2,7 @@ import './CharactersPage.css'
 
 import { useEffect, useState } from "react";
 import CharacterCardSmall from "../components/CharacterCardSmall";
+import CharacterDetailCard from "../components/CharacterDetailCard";
 import SearchIcon from "../assets/search.svg"
 
 import type { Character } from "../types/Character";
@@ -15,6 +16,7 @@ const filters = [
 export default function CharactersPage(){
 
     const [characters, setCharacters] = useState<Character[]>([]);
+    const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(null);
     
     useEffect(() => {
         async function fetchCharacters(){
@@ -50,6 +52,7 @@ export default function CharactersPage(){
                                 key={character.id}
                                 name={character.name}
                                 image={character.image}
+                                onDetails={() => setSelectedCharacter(character)}
                             />
                         ))}
                     </section>
@@ -68,6 +71,12 @@ export default function CharactersPage(){
                         ))}
                     </aside>
                 </div>
+                {selectedCharacter && (
+                    <CharacterDetailCard
+                        character={selectedCharacter}
+                        onClose={() => setSelectedCharacter(null)}
+                    />
+                )}
             </main>
     )
 }
\ No newline at end of file

From 387c74978e7c5df21d82b03f2c2f1aff6538804f Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 12:29:23 +0200
Subject: [PATCH 04/12] feat: style character detail card

---
 src/assets/detail-card-shape.svg       | 23 ++++++++
 src/components/CharacterDetailCard.css | 74 ++++++++++++++++++++++++++
 src/components/CharacterDetailCard.tsx | 39 ++++++++------
 3 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/detail-card-shape.svg

diff --git a/src/assets/detail-card-shape.svg b/src/assets/detail-card-shape.svg
new file mode 100644
index 0000000..30d3da3
--- /dev/null
+++ b/src/assets/detail-card-shape.svg
@@ -0,0 +1,23 @@
+<svg width="297" height="274" viewBox="0 0 297 274" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_n_93_129)">
+<path d="M0 20C0 8.95431 8.95431 0 20 0H148.5H277C288.046 0 297 8.9543 297 20V133.96V242.022V254C297 265.046 288.046 274 277 274H247.318H148.5H20C8.95431 274 0 265.046 0 254V133.96V49.0532V20Z" fill="#82B70C"/>
+</g>
+<defs>
+<filter id="filter0_n_93_129" x="0" y="0" width="297" height="274" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="2 2" stitchTiles="stitch" numOctaves="3" result="noise" seed="900" />
+<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
+<feComponentTransfer in="alphaNoise" result="coloredNoise1">
+<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
+</feComponentTransfer>
+<feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" />
+<feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" />
+<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
+<feMerge result="effect1_noise_93_129">
+<feMergeNode in="shape" />
+<feMergeNode in="color1" />
+</feMerge>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index e69de29..2bed62c 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -0,0 +1,74 @@
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgb(0 0 0 / 75%);
+}
+
+.detail-card {
+  position: relative;
+  display: flex;
+  gap: 2rem;
+
+  width: 60rem;
+  max-width: 90%;
+  padding: 3rem;
+
+  color: white;
+  background-color: #5A7D0D;
+  border-radius: 1.5rem;
+}
+
+.detail-info {
+  flex: 1;
+}
+
+.detail-info h2 {
+  margin-top: 0;
+  color: white;
+  font-size: 3rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.detail-image-frame {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 45%;
+}
+
+.detail-card-shape {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.detail-character-image {
+  position: relative;
+  z-index: 1;
+
+  width: 90%;
+  height: 90%;
+  object-fit: cover;
+  border-radius: 1rem;
+}
+
+.close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  border: none;
+  background: transparent;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 0bccfbb..5b418d8 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -1,5 +1,6 @@
 import "./CharacterDetailCard.css";
 import type { Character } from "../types/Character";
+import DetailCardShape from '../assets/detail-card-shape.svg'
 
 type CharacterDetailCardProps = {
   character: Character;
@@ -8,24 +9,28 @@ type CharacterDetailCardProps = {
 
 export default function CharacterDetailCard({ character, onClose }: CharacterDetailCardProps) {
   return (
-    <article className='detail-card'>
-      <button type='button' className='close-button' onClick={onClose}>
-        X
-      </button>
+    <div className='detail-overlay'>
+      <article className='detail-card'>
+        <button type='button' className='close-button' onClick={onClose}>x</button>
 
-      <div className='detail-info'>
-        <h2>{character.name}</h2>
-        <p><strong>Gender:</strong> {character.gender}</p>
-        <p><strong>Species:</strong> {character.species}</p>
-        <p><strong>Origin:</strong> {character.origin.name}</p>
-        <p><strong>Status:</strong> {character.status}</p>
-      </div>
+        <div className='detail-info'>
+          <h2>{character.name}</h2>
+          <p><strong>Gender:</strong> {character.gender}</p>
+          <p><strong>Species:</strong> {character.species}</p>
+          <p><strong>Origin:</strong> {character.origin.name}</p>
+          <p><strong>Status:</strong> {character.status}</p>
+        </div>
 
-      <img
-        src={character.image}
-        alt={character.name}
-        className='detail-character-image'
-      />
-    </article>
+        <div className='detail-image-frame'>
+          <img src={DetailCardShape} alt="" className='detail-card-shape' />
+
+          <img
+            src={character.image}
+            alt={character.name}
+            className='detail-character-image'
+          />
+        </div>
+      </article>
+    </div>
   )
 }
\ No newline at end of file

From 3ca79bb9c2b2034c1d173eb3c9b31d8c259a3ee7 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 12:39:21 +0200
Subject: [PATCH 05/12] feat: fetch and display character episodes

---
 src/components/CharacterDetailCard.css | 28 +++++++++++++--
 src/components/CharacterDetailCard.tsx | 48 ++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index 2bed62c..92a8e01 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -46,9 +46,9 @@
 }
 
 .detail-card-shape {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 .detail-character-image {
@@ -71,4 +71,26 @@
   color: white;
   font-size: 1.5rem;
   cursor: pointer;
+}
+
+.detail-episodes {
+  margin-top: 2rem;
+}
+
+.detail-episodes h3 {
+  margin-bottom: 0.5rem;
+  font-size: 2rem;
+  text-transform: uppercase;
+}
+
+.detail-episodes ul {
+  max-height: 10rem;
+  margin: 0;
+  padding-left: 1.0rem;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.detail-episodes li {
+  margin-bottom: 0.4rem;
 }
\ No newline at end of file
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 5b418d8..3f9ad3a 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -1,4 +1,6 @@
 import "./CharacterDetailCard.css";
+import { useEffect, useState } from "react";
+
 import type { Character } from "../types/Character";
 import DetailCardShape from '../assets/detail-card-shape.svg'
 
@@ -7,7 +9,41 @@ type CharacterDetailCardProps = {
   onClose: () => void;
 }
 
+type Episode = {
+  id: number;
+  name: string;
+  episode: string;
+}
+
 export default function CharacterDetailCard({ character, onClose }: CharacterDetailCardProps) {
+
+  const [episodes, setEpisodes] = useState<Episode[]>([]);
+
+  useEffect(() => {
+    async function fetchEpisodes() {
+      try {
+        const episodeData = await Promise.all(
+          character.episode.map(async (episodeUrl) => {
+            const response = await fetch(episodeUrl);
+
+            if (!response.ok) {
+              throw new Error(`Could not fetch episode: ${response.status}`)
+            }
+
+            return response.json();
+          })
+        );
+
+        setEpisodes(episodeData);
+      }
+      catch (error) {
+        console.error(error);
+      }
+    }
+
+    fetchEpisodes();
+  }, [character])
+
   return (
     <div className='detail-overlay'>
       <article className='detail-card'>
@@ -19,6 +55,18 @@ export default function CharacterDetailCard({ character, onClose }: CharacterDet
           <p><strong>Species:</strong> {character.species}</p>
           <p><strong>Origin:</strong> {character.origin.name}</p>
           <p><strong>Status:</strong> {character.status}</p>
+
+          <div className='detail-episodes'>
+            <h3>Episodes</h3>
+
+            <ul>
+              {episodes.map((episode) => (
+                <li key={episode.id}>
+                  {episode.episode} - {episode.name}
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
 
         <div className='detail-image-frame'>

From c8ddca6dccf2d9cb4efccbac5246bd3f7b9546bc Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 12:47:11 +0200
Subject: [PATCH 06/12] feat: refine character detail card layout

---
 src/components/CharacterDetailCard.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index 92a8e01..20e3cb2 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -24,8 +24,12 @@
   border-radius: 1.5rem;
 }
 
-.detail-info {
-  flex: 1;
+.detail-info p {
+  font-weight: 400;
+}
+
+.detail-info strong {
+  font-weight: 800;
 }
 
 .detail-info h2 {
@@ -43,6 +47,8 @@
   justify-content: center;
 
   width: 45%;
+  margin-left: auto;
+  transform: translateX(0.5rem);
 }
 
 .detail-card-shape {

From cca01244c28a7c979bb8164f12c2fccb0a82f9c7 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 13:09:10 +0200
Subject: [PATCH 07/12] feat: add character navigation

---
 src/assets/X.svg                       |  3 +++
 src/assets/arrow-left.svg              |  3 +++
 src/assets/arrow-right.svg             |  3 +++
 src/components/CharacterDetailCard.css | 34 ++++++++++++++++++++++++--
 src/components/CharacterDetailCard.tsx | 29 ++++++++++++++++++++--
 src/pages/CharactersPage.tsx           | 28 +++++++++++++++++++++
 6 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/X.svg
 create mode 100644 src/assets/arrow-left.svg
 create mode 100644 src/assets/arrow-right.svg

diff --git a/src/assets/X.svg b/src/assets/X.svg
new file mode 100644
index 0000000..b246dcf
--- /dev/null
+++ b/src/assets/X.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.75 11.25L11.25 33.75M11.25 11.25L33.75 33.75" stroke="#F3F3F3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/arrow-left.svg b/src/assets/arrow-left.svg
new file mode 100644
index 0000000..0b5ced9
--- /dev/null
+++ b/src/assets/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.9 51L65.45 70.55L59.5 76.5L34 51L59.5 25.5L65.45 31.45L45.9 51Z" fill="#FEF7FF"/>
+</svg>
diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg
new file mode 100644
index 0000000..0b847d0
--- /dev/null
+++ b/src/assets/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.1 51L36.55 31.45L42.5 25.5L68 51L42.5 76.5L36.55 70.55L56.1 51Z" fill="#FEF7FF"/>
+</svg>
diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index 20e3cb2..cc3f8d4 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -72,13 +72,18 @@
   top: 1rem;
   right: 1rem;
 
+  padding: 0;
   border: none;
   background: transparent;
-  color: white;
-  font-size: 1.5rem;
   cursor: pointer;
 }
 
+.close-button img {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .detail-episodes {
   margin-top: 2rem;
 }
@@ -99,4 +104,29 @@
 
 .detail-episodes li {
   margin-bottom: 0.4rem;
+}
+
+.previous-button,
+.next-button {
+  position: absolute;
+  top: 50%;
+  z-index: 11;
+
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.previous-button {
+  left: 2rem;
+}
+
+.next-button {
+  right: 2rem;
+}
+
+.navigation-arrow {
+  width: 3rem;
+  height: 3rem;
 }
\ No newline at end of file
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 3f9ad3a..69e4303 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -3,10 +3,15 @@ import { useEffect, useState } from "react";
 
 import type { Character } from "../types/Character";
 import DetailCardShape from '../assets/detail-card-shape.svg'
+import ArrowLeft from '../assets/arrow-left.svg'
+import ArrowRight from '../assets/arrow-right.svg'
+import X from '../assets/X.svg'
 
 type CharacterDetailCardProps = {
   character: Character;
   onClose: () => void;
+  onPrevious: () => void;
+  onNext: () => void;
 }
 
 type Episode = {
@@ -15,7 +20,7 @@ type Episode = {
   episode: string;
 }
 
-export default function CharacterDetailCard({ character, onClose }: CharacterDetailCardProps) {
+export default function CharacterDetailCard({ character, onClose, onPrevious, onNext }: CharacterDetailCardProps) {
 
   const [episodes, setEpisodes] = useState<Episode[]>([]);
 
@@ -46,8 +51,19 @@ export default function CharacterDetailCard({ character, onClose }: CharacterDet
 
   return (
     <div className='detail-overlay'>
+      <button
+        type='button'
+        className='previous-button'
+        onClick={onPrevious}
+        aria-label='Previous character'
+      >
+        <img src={ArrowLeft} alt="" className='navigation-arrow' />
+      </button>
+
       <article className='detail-card'>
-        <button type='button' className='close-button' onClick={onClose}>x</button>
+        <button type='button' className='close-button' onClick={onClose}>
+          <img src={X} alt="" />
+        </button>
 
         <div className='detail-info'>
           <h2>{character.name}</h2>
@@ -79,6 +95,15 @@ export default function CharacterDetailCard({ character, onClose }: CharacterDet
           />
         </div>
       </article>
+
+      <button
+        type='button'
+        className='next-button'
+        onClick={onNext}
+        aria-label='Next character'
+      >
+        <img src={ArrowRight} alt="" className='navigation-arrow' />
+      </button>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/pages/CharactersPage.tsx b/src/pages/CharactersPage.tsx
index 16476ba..1204ce6 100644
--- a/src/pages/CharactersPage.tsx
+++ b/src/pages/CharactersPage.tsx
@@ -37,6 +37,32 @@ export default function CharactersPage(){
         fetchCharacters()
     }, [])
 
+    function showPreviousCharacter(){
+        if (!selectedCharacter) return;
+
+        const currentIndex = characters.findIndex(
+            (character) => character.id === selectedCharacter.id
+        );
+
+        const previousIndex =
+            currentIndex === 0 ? characters.length - 1 : currentIndex - 1;
+ 
+        setSelectedCharacter(characters[previousIndex]);
+    }
+
+    function showNextCharacter(){
+        if (!selectedCharacter) return;
+
+        const currentIndex = characters.findIndex(
+            (character) => character.id === selectedCharacter.id
+        );
+
+        const nextIndex =
+            currentIndex === characters.length - 1 ? 0 : currentIndex + 1;
+
+        setSelectedCharacter(characters[nextIndex]);
+    }
+
     return(
             <main className="content">
                 <section className='search-area' aria-label='Characters'>
@@ -75,6 +101,8 @@ export default function CharactersPage(){
                     <CharacterDetailCard
                         character={selectedCharacter}
                         onClose={() => setSelectedCharacter(null)}
+                        onPrevious={showPreviousCharacter}
+                        onNext={showNextCharacter}
                     />
                 )}
             </main>

From b0e18d705a19e09ccda6ae5f6ccdc0ef0913a0bb Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 13:28:06 +0200
Subject: [PATCH 08/12] feat: make character detail card responsive

---
 src/components/CharacterDetailCard.css | 80 ++++++++++++++++++++++++++
 src/components/CharacterDetailCard.tsx | 12 ++--
 2 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index cc3f8d4..8755768 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -32,6 +32,17 @@
   font-weight: 800;
 }
 
+.character-facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem 2rem;
+}
+
+.character-facts p {
+  margin: 0;
+  padding: 0;
+}
+
 .detail-info h2 {
   margin-top: 0;
   color: white;
@@ -129,4 +140,73 @@
 .navigation-arrow {
   width: 3rem;
   height: 3rem;
+}
+
+@media (max-width: 600px) {
+  .detail-overlay {
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+
+  .detail-card {
+    flex-direction: column;
+
+    width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    padding: 3rem 1.5rem 1.5rem;
+    box-sizing: border-box;
+
+    overflow-y: auto;
+  }
+
+  .detail-card-shape {
+    transform: scaleY(1.03);
+    transform-origin: center;
+  }
+
+  .detail-info h2 {
+    font-size: 2rem;
+    overflow-wrap: anywhere;
+  }
+
+  .detail-info p {
+    font-size: 1rem;
+    overflow-wrap: anywhere;
+  }
+
+  .detail-character-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .detail-image-frame {
+    width: 100%;
+    margin: 0;
+    padding: 2.0rem;
+    box-sizing: border-box;
+    transform: none;
+    aspect-ratio: 1 / 1;
+  }
+
+  .detail-episodes h3 {
+    font-size: 1.5rem;
+  }
+
+  .detail-episodes li {
+    font-size: 1rem;
+  }
+
+  .previous-button {
+    left: 0.25rem;
+  }
+
+  .next-button {
+    right: 0.25rem;
+  }
+
+  .navigation-arrow {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 }
\ No newline at end of file
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 69e4303..6fe3aac 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -61,16 +61,18 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
       </button>
 
       <article className='detail-card'>
-        <button type='button' className='close-button' onClick={onClose}>
+        <button type='button' className='close-button' onClick={onClose} aria-label='Close character details'>
           <img src={X} alt="" />
         </button>
 
         <div className='detail-info'>
           <h2>{character.name}</h2>
-          <p><strong>Gender:</strong> {character.gender}</p>
-          <p><strong>Species:</strong> {character.species}</p>
-          <p><strong>Origin:</strong> {character.origin.name}</p>
-          <p><strong>Status:</strong> {character.status}</p>
+          <div className='character-facts'>
+            <p><strong>Gender:</strong> {character.gender}</p>
+            <p><strong>Origin:</strong> {character.origin.name}</p>
+            <p><strong>Species:</strong> {character.species}</p>
+            <p><strong>Status:</strong> {character.status}</p>
+          </div>
 
           <div className='detail-episodes'>
             <h3>Episodes</h3>

From 4c32e5d0fc9afbb81fc2fdbc0c22476a32589ac2 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 13:48:01 +0200
Subject: [PATCH 09/12] feat: refine character detail card responsiveness

---
 src/components/CharacterDetailCard.css | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index 8755768..c5284d9 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -60,6 +60,9 @@
   width: 45%;
   margin-left: auto;
   transform: translateX(0.5rem);
+
+  aspect-ratio: 1 / 0.93;
+  align-self: center;
 }
 
 .detail-card-shape {
@@ -181,8 +184,8 @@
   }
 
   .detail-image-frame {
-    width: 100%;
-    margin: 0;
+    width: 85%;
+    margin: 0 auto;
     padding: 2.0rem;
     box-sizing: border-box;
     transform: none;
@@ -197,16 +200,20 @@
     font-size: 1rem;
   }
 
+  .previous-button, .next-button {
+    padding: 0;
+  }
+
   .previous-button {
-    left: 0.25rem;
+    left: 1.2rem;
   }
 
   .next-button {
-    right: 0.25rem;
+    right: 1.2rem;
   }
 
   .navigation-arrow {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 2.25rem;
+    height: 2.25rem;
   }
 }
\ No newline at end of file

From f862096b5348ff5497b118d88c8979311f6a8fa4 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 13:53:25 +0200
Subject: [PATCH 10/12] chore: add AI notice and polish styling

---
 src/components/CharacterDetailCard.css | 4 ++--
 src/components/CharacterDetailCard.tsx | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index c5284d9..7698d0b 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -111,7 +111,7 @@
 .detail-episodes ul {
   max-height: 10rem;
   margin: 0;
-  padding-left: 1.0rem;
+  padding-left: 1rem;
   overflow-y: auto;
   list-style: none;
 }
@@ -186,7 +186,7 @@
   .detail-image-frame {
     width: 85%;
     margin: 0 auto;
-    padding: 2.0rem;
+    padding: 2rem;
     box-sizing: border-box;
     transform: none;
     aspect-ratio: 1 / 1;
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 6fe3aac..3d1cfc3 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -24,7 +24,7 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
   const [episodes, setEpisodes] = useState<Episode[]>([]);
 
-  useEffect(() => {
+  useEffect(() => { /* AI was used to create this piece of code */
     async function fetchEpisodes() {
       try {
         const episodeData = await Promise.all(
@@ -38,14 +38,12 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
             return response.json();
           })
         );
-
         setEpisodes(episodeData);
       }
       catch (error) {
         console.error(error);
       }
     }
-
     fetchEpisodes();
   }, [character])
 

From ae86a707ec1481a60667bfac59945ce15a879633 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 13:57:40 +0200
Subject: [PATCH 11/12] chore: update AI-assisted code marking

---
 src/components/CharacterDetailCard.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 3d1cfc3..0628211 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -24,17 +24,16 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
   const [episodes, setEpisodes] = useState<Episode[]>([]);
 
-  useEffect(() => { /* AI was used to create this piece of code */
+  // AI was used to create this piece of code (the useEffect function).
+  useEffect(() => {
     async function fetchEpisodes() {
       try {
         const episodeData = await Promise.all(
           character.episode.map(async (episodeUrl) => {
             const response = await fetch(episodeUrl);
-
             if (!response.ok) {
               throw new Error(`Could not fetch episode: ${response.status}`)
             }
-
             return response.json();
           })
         );

From 6a2b42d43f3735ce6a5a045086a62557aa42961f Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Fri, 11 Sep 2026 19:44:44 +0200
Subject: [PATCH 12/12] feat: add favorite button to character detail card

---
 src/components/CharacterDetailCard.css | 25 +++++++++++++++++-
 src/components/CharacterDetailCard.tsx | 35 ++++++++++----------------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/components/CharacterDetailCard.css b/src/components/CharacterDetailCard.css
index 7698d0b..2d0fd84 100644
--- a/src/components/CharacterDetailCard.css
+++ b/src/components/CharacterDetailCard.css
@@ -145,6 +145,28 @@
   height: 3rem;
 }
 
+.detail-heading {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.detail-favorite-button {
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.detail-star {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  filter: brightness(0) invert(1);
+}
+
 @media (max-width: 600px) {
   .detail-overlay {
     padding: 1rem;
@@ -200,7 +222,8 @@
     font-size: 1rem;
   }
 
-  .previous-button, .next-button {
+  .previous-button,
+  .next-button {
     padding: 0;
   }
 
diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx
index 0628211..6fe547c 100644
--- a/src/components/CharacterDetailCard.tsx
+++ b/src/components/CharacterDetailCard.tsx
@@ -1,11 +1,12 @@
 import "./CharacterDetailCard.css";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
 
 import type { Character } from "../types/Character";
 import DetailCardShape from '../assets/detail-card-shape.svg'
 import ArrowLeft from '../assets/arrow-left.svg'
 import ArrowRight from '../assets/arrow-right.svg'
 import X from '../assets/X.svg'
+import Star from '../assets/star.svg'
 
 type CharacterDetailCardProps = {
   character: Character;
@@ -24,7 +25,7 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
   const [episodes, setEpisodes] = useState<Episode[]>([]);
 
-  // AI was used to create this piece of code (the useEffect function).
+  // AI was used to create this useEffect function.
   useEffect(() => {
     async function fetchEpisodes() {
       try {
@@ -48,12 +49,7 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
   return (
     <div className='detail-overlay'>
-      <button
-        type='button'
-        className='previous-button'
-        onClick={onPrevious}
-        aria-label='Previous character'
-      >
+      <button type='button' className='previous-button' onClick={onPrevious} aria-label='Previous character'>
         <img src={ArrowLeft} alt="" className='navigation-arrow' />
       </button>
 
@@ -63,7 +59,13 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
         </button>
 
         <div className='detail-info'>
-          <h2>{character.name}</h2>
+          <div className="detail-heading">
+            <h2>{character.name}</h2>
+            <button type='button' className='detail-favorite-button' aria-label={`Add ${character.name} to favorites`}>
+              <img src={Star} alt="" className='detail-star' />
+            </button>
+          </div>
+
           <div className='character-facts'>
             <p><strong>Gender:</strong> {character.gender}</p>
             <p><strong>Origin:</strong> {character.origin.name}</p>
@@ -73,7 +75,6 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
           <div className='detail-episodes'>
             <h3>Episodes</h3>
-
             <ul>
               {episodes.map((episode) => (
                 <li key={episode.id}>
@@ -86,21 +87,11 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
 
         <div className='detail-image-frame'>
           <img src={DetailCardShape} alt="" className='detail-card-shape' />
-
-          <img
-            src={character.image}
-            alt={character.name}
-            className='detail-character-image'
-          />
+          <img src={character.image} alt={character.name} className='detail-character-image' />
         </div>
       </article>
 
-      <button
-        type='button'
-        className='next-button'
-        onClick={onNext}
-        aria-label='Next character'
-      >
+      <button type='button' className='next-button' onClick={onNext} aria-label='Next character'>
         <img src={ArrowRight} alt="" className='navigation-arrow' />
       </button>
     </div>