From bffdcf4bdf34649564c4b920d800ff02673466ab Mon Sep 17 00:00:00 2001
From: "Geir O. Jerstad" <geir@geokkjer.eu>
Date: Tue, 1 Jul 2025 20:42:02 +0200
Subject: [PATCH] second commit

---
 .direnv/flake-profile                  |   2 +-
 .direnv/flake-profile-2-link           |   1 -
 .direnv/flake-profile-6-link           |   1 +
 CLAUDE.md                              |  60 +++
 flake.nix                              |   6 +-
 webshop_app/mvc-emne2/ACCESSIBILITY.md | 252 +++++++++++++
 webshop_app/mvc-emne2/README-NO.md     | 481 +++++++++++++++++++++++++
 webshop_app/mvc-emne2/README.md        | 452 +++++++++++++++++++++++
 webshop_app/mvc-emne2/flow-diagram.md  | 105 ++++++
 webshop_app/mvc-emne2/index.html       |  21 ++
 webshop_app/mvc-emne2/js/app.js        |  30 ++
 webshop_app/mvc-emne2/js/controller.js |  95 +++++
 webshop_app/mvc-emne2/js/model.js      | 195 ++++++++++
 webshop_app/mvc-emne2/js/view.js       | 283 +++++++++++++++
 webshop_app/mvc-emne2/styles.css       | 345 ++++++++++++++++++
 webshop_app/prd.md                     |  41 +++
 16 files changed, 2366 insertions(+), 4 deletions(-)
 delete mode 120000 .direnv/flake-profile-2-link
 create mode 120000 .direnv/flake-profile-6-link
 create mode 100644 CLAUDE.md
 create mode 100644 webshop_app/mvc-emne2/ACCESSIBILITY.md
 create mode 100644 webshop_app/mvc-emne2/README-NO.md
 create mode 100644 webshop_app/mvc-emne2/README.md
 create mode 100644 webshop_app/mvc-emne2/flow-diagram.md
 create mode 100644 webshop_app/mvc-emne2/index.html
 create mode 100644 webshop_app/mvc-emne2/js/app.js
 create mode 100644 webshop_app/mvc-emne2/js/controller.js
 create mode 100644 webshop_app/mvc-emne2/js/model.js
 create mode 100644 webshop_app/mvc-emne2/js/view.js
 create mode 100644 webshop_app/mvc-emne2/styles.css

diff --git a/.direnv/flake-profile b/.direnv/flake-profile
index c7ae5b7..2ea10f8 120000
--- a/.direnv/flake-profile
+++ b/.direnv/flake-profile
@@ -1 +1 @@
-flake-profile-2-link
\ No newline at end of file
+flake-profile-6-link
\ No newline at end of file
diff --git a/.direnv/flake-profile-2-link b/.direnv/flake-profile-2-link
deleted file mode 120000
index 1c3f436..0000000
--- a/.direnv/flake-profile-2-link
+++ /dev/null
@@ -1 +0,0 @@
-/nix/store/rsbmjvqa6n7vf10pm0cg0fv437ixj57q-nix-shell-env
\ No newline at end of file
diff --git a/.direnv/flake-profile-6-link b/.direnv/flake-profile-6-link
new file mode 120000
index 0000000..60e81dc
--- /dev/null
+++ b/.direnv/flake-profile-6-link
@@ -0,0 +1 @@
+/nix/store/6813nrz8y11cdvr8iw2czgdmqhsd6yr6-nix-shell-env
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..b004a51
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,60 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Environment
+
+This project uses **Nix Flakes** for development environment management:
+- Run `nix develop` to enter the development shell with Node.js v22 and git
+- The flake.nix configures a reproducible development environment
+
+## Project Structure
+
+This is a **frontend web development educational project** with two main areas:
+
+### 1. Pensum (Curriculum Modules)
+Five learning modules in `/pensum/` directory, each focusing on different aspects of frontend development:
+- `Framworkless/` - Vanilla JavaScript/HTML/CSS implementations
+- `HTML-CSS/` - Web fundamentals and styling
+- `Functional Programming/` - Programming paradigm concepts  
+- `Typescript/` - Type-safe JavaScript development
+- `Vue/` - Vue.js framework implementations
+
+### 2. Webshop Application (`/webshop_app/`)
+The main practical project implementing a progressive web store:
+- **PRD Location**: `webshop_app/prd.md` contains complete requirements and implementation phases
+- **Current Phase**: MVC implementation in `webshop_app/mvc-emne2/`
+- **Architecture**: Designed for progressive complexity - starting with plain JS/HTML/CSS MVC, then enhanced with TypeScript, Vue.js, and advanced features
+
+## Key Implementation Details
+
+### MVC Architecture (Current Phase)
+- **Model**: Handle data (products, cart) using local storage/JSON
+- **View**: HTML templates and DOM manipulation
+- **Controller**: Business logic and user interaction handling
+- **Requirements**: Pure JavaScript (ES6+), HTML5, CSS3, no external frameworks
+
+### Progressive Enhancement Strategy
+The webshop will be rewritten multiple times during the course:
+1. **Phase 1**: Plain JS/HTML/CSS with MVC pattern
+2. **Phase 2**: Enhanced with modern JavaScript features
+3. **Phase 3**: TypeScript implementation  
+4. **Phase 4**: Vue.js implementation
+5. **Phase 5**: Advanced features (auth, payment, etc.)
+
+## Core Application Features
+- Product listing page with basic product information
+- Product detail page with purchase functionality
+- Basic navigation and routing
+- Shopping cart functionality (localStorage-based)
+- Responsive design for desktop and mobile
+
+## Data Structure
+- **Products**: id, name, price, description, image, category
+- **Cart**: product references and quantities
+- **Storage**: localStorage for client-side persistence
+
+## Development Notes
+- No package.json files exist yet - modules are currently empty placeholders
+- Entry point for webshop MVC implementation: `webshop_app/mvc-emne2/index.html`
+- Educational focus: demonstrating core web development concepts through practical implementation
\ No newline at end of file
diff --git a/flake.nix b/flake.nix
index 1708519..386716b 100644
--- a/flake.nix
+++ b/flake.nix
@@ -19,11 +19,13 @@
           buildInputs = [
             pkgs.nodejs
             pkgs.git
+            pkgs.zsh
           ];
           shellHook = ''
+            export SHELL=${pkgs.zsh}/bin/zsh
             echo "Node.js development environment ready."
-            node --version
-            npm --version
+            echo "Node version: $(node --version)"
+            echo "Npm version: $(npm --version)"
           '';
         };
       }
diff --git a/webshop_app/mvc-emne2/ACCESSIBILITY.md b/webshop_app/mvc-emne2/ACCESSIBILITY.md
new file mode 100644
index 0000000..3d4badd
--- /dev/null
+++ b/webshop_app/mvc-emne2/ACCESSIBILITY.md
@@ -0,0 +1,252 @@
+# Accessibility & Semantic HTML Improvements
+
+## Overview
+The MVC webshop application has been enhanced with proper semantic HTML elements and accessibility features to ensure it's usable by all users, including those using assistive technologies.
+
+## Semantic HTML Elements Added
+
+### 1. Document Structure
+- **`<main>`**: Wraps the primary content area
+- **`<header>`**: Used for page headers and section headers
+- **`<footer>`**: Used for cart totals and action areas
+- **`<nav>`**: Navigation elements including breadcrumbs
+- **`<section>`**: Content sections with proper roles
+- **`<article>`**: Individual content items (products, cart items)
+
+### 2. Navigation Improvements
+```html
+<!-- Before -->
+<div class="navbar">
+  <h1 class="logo">Nettbutikk</h1>
+  <ul class="nav-links">...</ul>
+</div>
+
+<!-- After -->
+<header>
+  <nav class="navbar">
+    <h1 class="logo">Nettbutikk</h1>
+    <ul class="nav-links">...</ul>
+  </nav>
+</header>
+```
+
+### 3. Product Cards
+```html
+<!-- Before -->
+<div class="product-card">
+  <div class="product-image">🎧</div>
+  <div class="product-name">Hodetelefoner</div>
+  <!-- ... -->
+</div>
+
+<!-- After -->
+<article class="product-card" role="listitem" tabindex="0">
+  <header>
+    <div class="product-image" role="img" aria-label="Produktbilde: Hodetelefoner">🎧</div>
+    <h3 class="product-name">Hodetelefoner</h3>
+  </header>
+  <div class="product-info">
+    <p class="product-price" aria-label="Pris: 99.99 kroner">
+      <span class="currency">kr</span> <span class="amount">99.99</span>
+    </p>
+    <!-- ... -->
+  </div>
+  <footer>
+    <button aria-label="Legg Hodetelefoner i handlekurv">...</button>
+  </footer>
+</article>
+```
+
+### 4. Product Detail Page
+```html
+<main>
+  <section role="main" aria-label="Produktdetaljer">
+    <nav aria-label="Breadcrumb">
+      <button aria-label="Gå tilbake til produktoversikt">← Tilbake</button>
+    </nav>
+    <article class="product-detail">
+      <header>
+        <div role="img" aria-label="Produktbilde: Produktnavn">🎧</div>
+        <h1 class="product-name">Produktnavn</h1>
+      </header>
+      <!-- ... -->
+    </article>
+  </section>
+</main>
+```
+
+### 5. Shopping Cart
+```html
+<section role="main" aria-label="Handlekurv">
+  <header>
+    <h2>Handlekurv</h2>
+    <p class="cart-summary" aria-live="polite">3 varer i handlekurven</p>
+  </header>
+  <div role="list" aria-label="Varer i handlekurv">
+    <article class="cart-item" role="listitem">
+      <header class="cart-item-info">
+        <h3 class="cart-item-name">Produktnavn</h3>
+        <!-- ... -->
+      </header>
+      <!-- ... -->
+    </article>
+  </div>
+  <footer class="cart-total">
+    <div role="status" aria-live="polite" aria-label="Totalt beløp: 299.97 kroner">
+      Totalt: <span class="amount">299.97 kr</span>
+    </div>
+    <!-- ... -->
+  </footer>
+</section>
+```
+
+## ARIA Attributes Added
+
+### 1. Roles
+- **`role="main"`**: Main content areas
+- **`role="list"`**: Product grids and cart items
+- **`role="listitem"`**: Individual products and cart items
+- **`role="img"`**: Emoji images with descriptions
+- **`role="status"`**: Dynamic content updates
+- **`role="application"`**: Root app container
+- **`role="alert"`**: Error messages
+
+### 2. Labels
+- **`aria-label`**: Descriptive labels for interactive elements
+- **`aria-labelledby`**: References to heading elements
+- **`aria-describedby`**: Additional descriptions
+
+### 3. Live Regions
+- **`aria-live="polite"`**: Non-urgent updates (cart count, totals)
+- **`aria-live="assertive"`**: Important notifications
+
+### 4. Groups
+- **`role="group"`**: Quantity controls
+- **`aria-label`** on groups: "Antall Produktnavn"
+
+## Keyboard Navigation
+
+### 1. Focus Management
+- All interactive elements are keyboard accessible
+- Product cards have `tabindex="0"` and keyboard event handlers
+- Clear focus indicators with CSS outline styles
+
+### 2. Event Handlers
+```javascript
+// Product cards support both click and keyboard activation
+onkeydown="if(event.key==='Enter'||event.key===' ') showProductDetail(${product.id})"
+```
+
+## Screen Reader Support
+
+### 1. Screen Reader Only Content
+```css
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+```
+
+### 2. Descriptive Labels
+- Product images: `aria-label="Produktbilde: [Product Name]"`
+- Prices: `aria-label="Pris: [Amount] kroner"`
+- Buttons: `aria-label="Legg [Product Name] i handlekurv"`
+- Quantity controls: `aria-label="Øk antall [Product Name]"`
+
+## Dynamic Content Updates
+
+### 1. Live Regions
+```html
+<!-- Cart summary updates automatically -->
+<p class="cart-summary" aria-live="polite">3 varer i handlekurven</p>
+
+<!-- Total amount announces changes -->
+<div role="status" aria-live="polite" aria-label="Totalt beløp: 299.97 kroner">
+  Totalt: <span class="amount">299.97 kr</span>
+</div>
+
+<!-- Quantity changes announced -->
+<span class="quantity" role="status" aria-live="polite" aria-label="3 stykker">3</span>
+```
+
+### 2. Loading States
+```html
+<!-- Initial loading indicator -->
+<div class="loading" role="status" aria-live="polite">Laster innhold...</div>
+
+<!-- Empty cart state -->
+<div class="empty-cart" role="status" aria-live="polite">
+  <h3>Handlekurven din er tom</h3>
+  <p>Legg til noen produkter for å komme i gang!</p>
+</div>
+```
+
+## Meta Information
+
+### 1. Document Meta Tags
+```html
+<meta name="description" content="En demonstrasjon av MVC-arkitektur i en nettbutikk-applikasjon">
+<html lang="no">
+```
+
+### 2. Structured Pricing
+```html
+<p class="product-price" aria-label="Pris: 99.99 kroner">
+  <span class="currency">kr</span> <span class="amount">99.99</span>
+</p>
+```
+
+## CSS Accessibility Features
+
+### 1. Focus Indicators
+```css
+button:focus,
+a:focus,
+[tabindex]:focus {
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+```
+
+### 2. Button Variants
+- **Primary buttons**: `.btn-primary` for main actions
+- **Danger buttons**: `.btn-danger` for destructive actions
+- **Remove buttons**: `.btn-remove` for cart item removal
+
+## Testing Recommendations
+
+### 1. Screen Reader Testing
+- Test with NVDA, JAWS, or VoiceOver
+- Verify all content is announced properly
+- Check navigation flow makes sense
+
+### 2. Keyboard Navigation
+- Tab through entire interface
+- Verify all interactive elements are reachable
+- Test Enter and Space key activation
+
+### 3. ARIA Validation
+- Use axe-core or similar accessibility testing tools
+- Validate ARIA attributes are used correctly
+- Check for missing or redundant labels
+
+## Benefits of These Improvements
+
+1. **Screen Reader Compatibility**: All content is properly announced
+2. **Keyboard Navigation**: Full keyboard accessibility without mouse
+3. **Clear Structure**: Semantic HTML provides document outline
+4. **Dynamic Updates**: Live regions announce changes
+5. **Context Awareness**: ARIA labels provide context for all interactions
+6. **Standards Compliance**: Follows WCAG 2.1 guidelines
+7. **Better SEO**: Semantic HTML improves search engine understanding
+
+---
+
+*These accessibility improvements ensure the webshop is usable by everyone, regardless of their abilities or the assistive technologies they use.*
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/README-NO.md b/webshop_app/mvc-emne2/README-NO.md
new file mode 100644
index 0000000..24c32e7
--- /dev/null
+++ b/webshop_app/mvc-emne2/README-NO.md
@@ -0,0 +1,481 @@
+# MVC Nettbutikk Applikasjon
+
+En ren JavaScript-implementering av en nettbutikk som bruker Model-View-Controller (MVC) arkitekturmønsteret. Dette utdanningsprosjektet demonstrerer kjerne webutviklingskonsepter uten eksterne rammeverk.
+
+## 🏗️ Arkitekturoversikt
+
+Denne applikasjonen følger MVC-mønsteret med et sentralisert view-renderingssystem:
+
+- **Model**: Håndterer databehandling og forretningslogikk
+- **View**: Administrerer HTML-generering og DOM-manipulering  
+- **Controller**: Koordinerer brukerinteraksjoner og dataflyt
+
+## 📊 UML Diagrammer
+
+### Klassediagram
+
+```mermaid
+classDiagram
+    class Model {
+        -products: Array~Product~
+        -cart: Array~CartItem~
+        +getAllProducts() Array~Product~
+        +getProductById(id) Product
+        +addToCart(productId, quantity) boolean
+        +removeFromCart(productId) void
+        +updateCartQuantity(productId, quantity) void
+        +getCart() Array~CartItem~
+        +getCartTotal() number
+        +getCartItemCount() number
+        +clearCart() void
+        +saveCartToStorage() void
+        +loadCartFromStorage() Array~CartItem~
+        +initializeCart() void
+    }
+    
+    class View {
+        -currentPage: string
+        -cartCount: number
+        +updateView(viewType, data) void
+        +generateNavbar() string
+        +generateProductsPage(products) string
+        +generateProductDetailPage(product) string
+        +generateCartPage(cartItems, total, itemCount) string
+        +createProductCard(product) string
+        +createCartItem(item) string
+        +attachEventListeners() void
+        +updateCartCountInNav() void
+        +showNotification(message) void
+    }
+    
+    class Controller {
+        +loadProducts() void
+        +showProductDetail(productId) void
+        +handleAddToCart(productId) void
+        +handleRemoveFromCart(productId) void
+        +changeQuantity(productId, change) void
+        +handleClearCart() void
+        +navigateToProducts() void
+        +navigateToCart() void
+        +updateCartDisplay() void
+    }
+    
+    class Product {
+        +id: number
+        +name: string
+        +price: number
+        +description: string
+        +image: string
+        +category: string
+    }
+    
+    class CartItem {
+        +productId: number
+        +quantity: number
+        +product: Product
+    }
+    
+    class App {
+        +initialize() void
+    }
+    
+    Controller --> Model : bruker
+    Controller --> View : oppdaterer
+    View --> Controller : sender hendelser
+    Model --> Product : inneholder
+    Model --> CartItem : administrerer
+    CartItem --> Product : refererer til
+    App --> Controller : initialiserer
+    App --> Model : setter opp
+    App --> View : starter
+```
+
+### Sekvensdiagram - Legg til i handlekurv
+
+```mermaid
+sequenceDiagram
+    participant U as Bruker
+    participant V as View
+    participant C as Controller
+    participant M as Model
+    
+    U->>V: Klikker "Legg i handlekurv"
+    V->>C: handleAddToCart(productId)
+    C->>M: addToCart(productId)
+    M->>M: getProductById(productId)
+    M->>M: Finn eksisterende element eller lag nytt
+    M->>M: saveCartToStorage()
+    M-->>C: return true/false
+    
+    alt Vellykket
+        C->>M: getProductById(productId)
+        M-->>C: return product
+        C->>V: updateView('notification', {message})
+        C->>C: updateCartDisplay()
+        C->>M: getCart()
+        M-->>C: return cart
+        C->>M: getCartTotal()
+        M-->>C: return total
+        C->>M: getCartItemCount()
+        M-->>C: return itemCount
+        C->>V: updateView('cart', {cartItems, total, itemCount})
+        C->>V: updateView('cart-count', {count})
+        V->>V: generateCartPage() eller updateCartCountInNav()
+        V-->>U: Oppdatert UI med notifikasjon
+    else Feilet
+        C->>V: updateView('notification', {message: 'Feil'})
+        V-->>U: Feilmelding
+    end
+```
+
+## 📁 Prosjektstruktur
+
+```
+mvc-emne2/
+├── index.html          # Hoved HTML-fil med enkelt app-container
+├── styles.css          # Applikasjonsstyling
+├── js/
+│   ├── app.js          # Applikasjonsinitialisering
+│   ├── model.js        # Datalag og forretningslogikk
+│   ├── view.js         # UI-rendering og HTML-generering
+│   └── controller.js   # Brukerinteraksjonshåndtering
+├── flow-diagram.md     # Applikasjonsflytvisualisering
+├── README.md          # Engelsk dokumentasjon
+├── README-NO.md       # Norsk dokumentasjon (denne filen)
+└── ACCESSIBILITY.md   # Tilgjengelighetsdokumentasjon
+```
+
+## 🔧 Nøkkelkomponenter
+
+### 1. Model (`model.js`)
+
+**Formål**: Administrerer applikasjonsdata og persistering
+
+**Nøkkelfunksjoner**:
+- `getAllProducts()` - Returnerer produktkatalog
+- `getProductById(id)` - Henter spesifikt produkt
+- `addToCart(productId, quantity)` - Legger til varer i handlekurv
+- `removeFromCart(productId)` - Fjerner varer fra handlekurv
+- `updateCartQuantity(productId, quantity)` - Oppdaterer vareantall
+- `getCart()` - Returnerer gjeldende handlekurvinnhold
+- `getCartTotal()` - Beregner total handlekurvpris
+- `getCartItemCount()` - Returnerer totalt antall varer
+- `clearCart()` - Tømmer handlekurven
+- `saveCartToStorage()` / `loadCartFromStorage()` - LocalStorage-persistering
+
+**Datastruktur**:
+```javascript
+// Produkt
+{
+    id: number,
+    name: string,
+    price: number,
+    description: string,
+    image: string (emoji),
+    category: string
+}
+
+// Handlekurvvare
+{
+    productId: number,
+    quantity: number,
+    product: Product
+}
+```
+
+### 2. View (`view.js`)
+
+**Formål**: Håndterer all UI-rendering gjennom en sentralisert `updateView`-funksjon
+
+**Kjernearkitektur**:
+```javascript
+function updateView(viewType, data = {}) {
+    switch (viewType) {
+        case 'products': // Rendrer produktliste
+        case 'product-detail': // Rendrer enkelt produkt
+        case 'cart': // Rendrer handlekurv
+        case 'cart-count': // Oppdater handlekurvmerke
+        case 'notification': // Vis brukermeldinger
+    }
+}
+```
+
+**Nøkkelfunksjoner**:
+- **Enkelt inngangspunkt**: All rendering går gjennom `updateView()`
+- **Komplett sidegenerering**: Genererer hele side-HTML inkludert navigasjon
+- **Event Listener-administrasjon**: Fester automatisk event listeners etter hver rendering
+- **Mallfunksjoner**: Modulære HTML-genereringsfunksjoner
+
+**HTML-genereringsfunksjoner**:
+- `generateNavbar()` - Lager navigasjonsheader
+- `generateProductsPage(products)` - Produktlisteside
+- `generateProductDetailPage(product)` - Produktdetaljside  
+- `generateCartPage(cartItems, total, itemCount)` - Handlekurvside
+- `createProductCard(product)` - Individuelt produktkort
+- `createCartItem(item)` - Individuell handlekurvvare
+
+### 3. Controller (`controller.js`)
+
+**Formål**: Håndterer brukerinteraksjoner og koordinerer mellom Model og View
+
+**Navigasjonsfunksjoner**:
+- `navigateToProducts()` - Viser produktliste
+- `navigateToCart()` - Viser handlekurv
+- `showProductDetail(productId)` - Viser produktdetaljer
+
+**Handlekurvadministrasjon**:
+- `handleAddToCart(productId)` - Legger til produkt i handlekurv
+- `handleRemoveFromCart(productId)` - Fjerner produkt fra handlekurv
+- `changeQuantity(productId, change)` - Oppdaterer produktantall
+- `handleClearCart()` - Tømmer hele handlekurven
+- `updateCartDisplay()` - Oppdaterer handlekurvvisning og teller
+
+**Nøkkeldesignmønstre**:
+- Alle funksjoner kaller `updateView()` for UI-oppdateringer
+- Brukernotifikasjoner håndteres konsistent
+- Handlekurvtilstand persisteres automatisk etter endringer
+
+### 4. Applikasjonsinitialisering (`app.js`)
+
+**Formål**: Bootstrapper applikasjonen
+
+**Initialiseringsflyt**:
+1. Vent på at DOM skal laste
+2. Initialiser handlekurv fra localStorage
+3. Last produkter fra model
+4. Renderer initial produktside
+5. Oppdater handlekurvteller
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+    // Fjern lastingstilstand
+    const loadingElement = document.querySelector('.loading');
+    if (loadingElement) {
+        loadingElement.remove();
+    }
+    
+    initializeCart();
+    
+    const products = getAllProducts();
+    const itemCount = getCartItemCount();
+    
+    updateView('products', { products });
+    updateView('cart-count', { count: itemCount });
+    
+    console.log('Nettbutikk MVC Demo initialisert!');
+});
+```
+
+## 🔄 Dataflyt
+
+### 1. Applikasjonsoppstart
+```
+HTML-lasting → DOMContentLoaded → initializeCart() → loadCartFromStorage() → 
+getAllProducts() → updateView('products') → generateProductsPage() → attachEventListeners()
+```
+
+### 2. Brukerinteraksjoner
+```
+Brukerklikk → Controller-funksjon → Model-operasjon → updateView() → 
+HTML-generering → Event Listener-tilkobling → UI-oppdatering
+```
+
+### 3. Handlekurvoperasjoner
+```
+Legg til i handlekurv → addToCart() → saveCartToStorage() → updateCartDisplay() → 
+updateView('cart') + updateView('cart-count') → showNotification()
+```
+
+## 🎨 View-renderingssystem
+
+### Sentralisert rendering
+Alle UI-oppdateringer flyter gjennom den enkelte `updateView()`-funksjonen:
+
+```javascript
+updateView('products', { products: [...] });
+updateView('product-detail', { product: {...} });
+updateView('cart', { cartItems: [...], total: 0, itemCount: 0 });
+updateView('cart-count', { count: 0 });
+updateView('notification', { message: 'Vellykket!' });
+```
+
+### Komplett sidegenerering
+I motsetning til tradisjonell DOM-manipulering genererer dette systemet komplett side-HTML:
+
+```javascript
+function generateProductsPage(products) {
+    return `
+        ${generateNavbar()}
+        <main>
+            <section class="page active">
+                <h2>Våre Produkter</h2>
+                <div class="products-grid">
+                    ${products.map(product => createProductCard(product)).join('')}
+                </div>
+            </section>
+        </main>
+    `;
+}
+```
+
+### Event Listener-administrasjon
+Etter hver rendering festes event listeners på nytt:
+
+```javascript
+function attachEventListeners() {
+    const productsLink = document.querySelector('[data-page="products"]');
+    const cartLink = document.querySelector('[data-page="cart"]');
+    
+    if (productsLink) {
+        productsLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            navigateToProducts();
+        });
+    }
+    // ... flere listeners
+}
+```
+
+## 💾 Datapersistering
+
+### LocalStorage-integrasjon
+Handlekurvdata persisteres automatisk:
+
+```javascript
+function saveCartToStorage() {
+    try {
+        localStorage.setItem('webstore_cart', JSON.stringify(cart));
+    } catch (error) {
+        console.error('Feil ved lagring av handlekurv til localStorage:', error);
+    }
+}
+
+function loadCartFromStorage() {
+    try {
+        const savedCart = localStorage.getItem('webstore_cart');
+        if (savedCart) {
+            const parsedCart = JSON.parse(savedCart);
+            return parsedCart.map(item => ({
+                ...item,
+                product: products.find(p => p.id === item.productId) || 
+                         { id: item.productId, name: 'Ukjent Produkt', price: 0 }
+            }));
+        }
+    } catch (error) {
+        console.error('Feil ved lasting av handlekurv fra localStorage:', error);
+    }
+    return [];
+}
+```
+
+## 🚀 Bruk
+
+### Kjøring av applikasjonen
+1. Åpne `index.html` i en nettleser
+2. Applikasjonen initialiseres automatisk
+3. Naviger mellom produkter, produktdetaljer og handlekurv
+4. Handlekurvtilstand persisteres på tvers av nettlesersesjoner
+
+### Nøkkelfunksjoner
+- **Produktbrowsing**: Vis alle produkter i rutenettlayout
+- **Produktdetaljer**: Klikk på hvilket som helst produkt for detaljert visning
+- **Handlekurv**: Legg til, fjern og modifiser antall
+- **Persistent handlekurv**: Handlekurvinnhold lagret i localStorage
+- **Responsiv design**: Fungerer på desktop og mobil
+- **Brukernotifikasjoner**: Tilbakemelding for alle brukerhandlinger
+
+## ♿ Tilgjengelighet og semantisk HTML
+
+Applikasjonen er bygget med tilgjengelighet i fokus:
+
+### Semantiske HTML-elementer
+- **`<main>`**, **`<header>`**, **`<footer>`**, **`<nav>`**, **`<section>`**, **`<article>`**
+- Riktig heading-hierarki (`<h1>`, `<h2>`, `<h3>`)
+- Beskrivende ARIA-attributter
+
+### ARIA-funksjoner
+- **`role`**-attributter for klargjøring av elementfunksjoner
+- **`aria-label`** for beskrivende etiketter
+- **`aria-live`** for dynamiske innholdsoppdateringer
+- **`aria-describedby`** for tilleggsinformasjon
+
+### Tastaturnavigasjon
+- Alle interaktive elementer er tilgjengelige via tastatur
+- Fokusindikatorer for alle interaktive elementer
+- Logisk tab-rekkefølge
+
+## 🎯 Utdanningsmessige fordeler
+
+### MVC-mønsterdemonstrasjon
+- Tydelig separasjon av ansvar
+- Model håndterer data, View håndterer presentasjon, Controller håndterer logikk
+- Demonstrerer hvordan komponenter samhandler i MVC-arkitektur
+
+### Moderne JavaScript-funksjoner
+- ES6+-syntaks (arrow-funksjoner, template literals, destructuring)
+- LocalStorage API-bruk
+- Event handling-mønstre
+- Funksjonelle programmeringskonsepter
+
+### Webutviklingsfundamentaler
+- DOM-manipuleringsteknikker
+- Event listener-administrasjon
+- Klientsidehåndtering av tilstand
+- HTML-generering og templating
+- CSS-stylingintegrasjon
+
+## 🔧 Tekniske beslutninger
+
+### Hvorfor sentralisert rendering?
+- **Konsistens**: Alle UI-oppdateringer følger samme mønster
+- **Vedlikeholdbarhet**: Lett å spore og debugge UI-endringer
+- **Skalerbarhet**: Enkelt å legge til nye visningstyper
+- **Tilstandshåndtering**: Klar dataflyt fra model til view
+
+### Hvorfor komplett sidegenerering?
+- **Enkelhet**: Ingen kompleks DOM-diffing eller tilstandssporing
+- **Pålitelighet**: Fresh render eliminerer foreldede tilstandsproblemer
+- **Ytelse**: Moderne nettlesere håndterer innerHTML effektivt
+- **Debugging**: Lett å se nøyaktig hvilken HTML som genereres
+
+### Hvorfor LocalStorage?
+- **Persistering**: Handlekurv overlever nettleseroppstart
+- **Enkelhet**: Ingen serversidekompleksitet
+- **Ytelse**: Øyeblikkelige lastetider
+- **Utdanningsmessig**: Demonstrerer klientsidelagringskonsepter
+
+## 🎨 Stylingarkitektur
+
+Applikasjonen bruker et rent, moderne CSS-design:
+- Responsive rutenettlayouter
+- Kortbasert produktvisning
+- Konsistent knapp- og formstiling
+- Mobilvennlig navigasjon
+- Glatte overganger og hover-effekter
+
+## 🔮 Fremtidige forbedringer
+
+Denne MVC-implementeringen fungerer som et grunnlag for progressiv forbedring:
+
+1. **Fase 2**: Legg til TypeScript for typesikkerhet
+2. **Fase 3**: Implementer Vue.js for reaktiv UI
+3. **Fase 4**: Legg til brukerautentisering
+4. **Fase 5**: Integrer betalingsbehandling
+5. **Fase 6**: Legg til produktsøk og filtrering
+6. **Fase 7**: Implementer ekte backend-API
+
+## 📚 Læringsutbytte
+
+Ved å studere denne kodebasen vil du forstå:
+- MVC-arkitekturmønsterimplementering
+- Klientsidehåndtering av tilstand
+- Moderne JavaScript-utviklingspraksis
+- HTML-generering og templating-tilnærminger
+- Hendelsesdrevne programmeringsmønstre
+- LocalStorage API-bruk
+- Responsive webdesignprinsipper
+- Tilgjengelighetsstandarder og semantisk HTML
+
+---
+
+*Dette prosjektet er en del av GET Frontend-utviklingslæreplanen og demonstrerer kjerne webutviklingskonsepter gjennom praktisk implementering.*
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/README.md b/webshop_app/mvc-emne2/README.md
new file mode 100644
index 0000000..33db5d2
--- /dev/null
+++ b/webshop_app/mvc-emne2/README.md
@@ -0,0 +1,452 @@
+# MVC Webshop Application
+
+A pure JavaScript implementation of a webshop using the Model-View-Controller (MVC) architectural pattern. This educational project demonstrates core web development concepts without external frameworks.
+
+## 🏗️ Architecture Overview
+
+This application follows the MVC pattern with a centralized view rendering system:
+
+- **Model**: Handles data management and business logic
+- **View**: Manages HTML generation and DOM manipulation  
+- **Controller**: Coordinates user interactions and data flow
+
+## 📊 UML Diagrams
+
+### Class Diagram
+
+```mermaid
+classDiagram
+    class Model {
+        -products: Array~Product~
+        -cart: Array~CartItem~
+        +getAllProducts() Array~Product~
+        +getProductById(id) Product
+        +addToCart(productId, quantity) boolean
+        +removeFromCart(productId) void
+        +updateCartQuantity(productId, quantity) void
+        +getCart() Array~CartItem~
+        +getCartTotal() number
+        +getCartItemCount() number
+        +clearCart() void
+        +saveCartToStorage() void
+        +loadCartFromStorage() Array~CartItem~
+        +initializeCart() void
+    }
+    
+    class View {
+        -currentPage: string
+        -cartCount: number
+        +updateView(viewType, data) void
+        +generateNavbar() string
+        +generateProductsPage(products) string
+        +generateProductDetailPage(product) string
+        +generateCartPage(cartItems, total, itemCount) string
+        +createProductCard(product) string
+        +createCartItem(item) string
+        +attachEventListeners() void
+        +updateCartCountInNav() void
+        +showNotification(message) void
+    }
+    
+    class Controller {
+        +loadProducts() void
+        +showProductDetail(productId) void
+        +handleAddToCart(productId) void
+        +handleRemoveFromCart(productId) void
+        +changeQuantity(productId, change) void
+        +handleClearCart() void
+        +navigateToProducts() void
+        +navigateToCart() void
+        +updateCartDisplay() void
+    }
+    
+    class Product {
+        +id: number
+        +name: string
+        +price: number
+        +description: string
+        +image: string
+        +category: string
+    }
+    
+    class CartItem {
+        +productId: number
+        +quantity: number
+        +product: Product
+    }
+    
+    class App {
+        +initialize() void
+    }
+    
+    Controller --> Model : uses
+    Controller --> View : updates
+    View --> Controller : sends events
+    Model --> Product : contains
+    Model --> CartItem : manages
+    CartItem --> Product : references
+    App --> Controller : initializes
+    App --> Model : sets up
+    App --> View : starts
+```
+
+### Sequence Diagram - Add to Cart Flow
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant V as View
+    participant C as Controller
+    participant M as Model
+    
+    U->>V: Click "Add to Cart"
+    V->>C: handleAddToCart(productId)
+    C->>M: addToCart(productId)
+    M->>M: getProductById(productId)
+    M->>M: Find existing item or create new
+    M->>M: saveCartToStorage()
+    M-->>C: return true/false
+    
+    alt Success
+        C->>M: getProductById(productId)
+        M-->>C: return product
+        C->>V: updateView('notification', {message})
+        C->>C: updateCartDisplay()
+        C->>M: getCart()
+        M-->>C: return cart
+        C->>M: getCartTotal()
+        M-->>C: return total
+        C->>M: getCartItemCount()
+        M-->>C: return itemCount
+        C->>V: updateView('cart', {cartItems, total, itemCount})
+        C->>V: updateView('cart-count', {count})
+        V->>V: generateCartPage() or updateCartCountInNav()
+        V-->>U: Updated UI with notification
+    else Failure
+        C->>V: updateView('notification', {message: 'Error'})
+        V-->>U: Error message
+    end
+```
+
+## 📁 Project Structure
+
+```
+mvc-emne2/
+├── index.html          # Main HTML file with single app container
+├── styles.css          # Application styling
+├── js/
+│   ├── app.js          # Application initialization
+│   ├── model.js        # Data layer and business logic
+│   ├── view.js         # UI rendering and HTML generation
+│   └── controller.js   # User interaction handling
+├── flow-diagram.md     # Application flow visualization
+└── README.md          # This documentation
+```
+
+## 🔧 Key Components
+
+### 1. Model (`model.js`)
+
+**Purpose**: Manages application data and persistence
+
+**Key Functions**:
+- `getAllProducts()` - Returns product catalog
+- `getProductById(id)` - Retrieves specific product
+- `addToCart(productId, quantity)` - Adds items to cart
+- `removeFromCart(productId)` - Removes items from cart
+- `updateCartQuantity(productId, quantity)` - Updates item quantities
+- `getCart()` - Returns current cart contents
+- `getCartTotal()` - Calculates cart total price
+- `getCartItemCount()` - Returns total item count
+- `clearCart()` - Empties the cart
+- `saveCartToStorage()` / `loadCartFromStorage()` - LocalStorage persistence
+
+**Data Structure**:
+```javascript
+// Product
+{
+    id: number,
+    name: string,
+    price: number,
+    description: string,
+    image: string (emoji),
+    category: string
+}
+
+// Cart Item
+{
+    productId: number,
+    quantity: number,
+    product: Product
+}
+```
+
+### 2. View (`view.js`)
+
+**Purpose**: Handles all UI rendering through a centralized `updateView` function
+
+**Core Architecture**:
+```javascript
+function updateView(viewType, data = {}) {
+    switch (viewType) {
+        case 'products': // Render product listing
+        case 'product-detail': // Render single product
+        case 'cart': // Render shopping cart
+        case 'cart-count': // Update cart badge
+        case 'notification': // Show user messages
+    }
+}
+```
+
+**Key Features**:
+- **Single Entry Point**: All rendering goes through `updateView()`
+- **Complete Page Generation**: Generates entire page HTML including navigation
+- **Event Listener Management**: Automatically attaches event listeners after each render
+- **Template Functions**: Modular HTML generation functions
+
+**HTML Generation Functions**:
+- `generateNavbar()` - Creates navigation header
+- `generateProductsPage(products)` - Product listing page
+- `generateProductDetailPage(product)` - Product detail page  
+- `generateCartPage(cartItems, total, itemCount)` - Shopping cart page
+- `createProductCard(product)` - Individual product card
+- `createCartItem(item)` - Individual cart item
+
+### 3. Controller (`controller.js`)
+
+**Purpose**: Handles user interactions and coordinates between Model and View
+
+**Navigation Functions**:
+- `navigateToProducts()` - Shows product listing
+- `navigateToCart()` - Shows shopping cart
+- `showProductDetail(productId)` - Shows product details
+
+**Cart Management**:
+- `handleAddToCart(productId)` - Adds product to cart
+- `handleRemoveFromCart(productId)` - Removes product from cart
+- `changeQuantity(productId, change)` - Updates product quantity
+- `handleClearCart()` - Empties entire cart
+- `updateCartDisplay()` - Refreshes cart view and counter
+
+**Key Design Patterns**:
+- All functions call `updateView()` for UI updates
+- User notifications are handled consistently
+- Cart state is automatically persisted after changes
+
+### 4. Application Initialization (`app.js`)
+
+**Purpose**: Bootstraps the application
+
+**Initialization Flow**:
+1. Wait for DOM to load
+2. Initialize cart from localStorage
+3. Load products from model
+4. Render initial products page
+5. Update cart counter
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+    initializeCart();
+    
+    const products = getAllProducts();
+    const itemCount = getCartItemCount();
+    
+    updateView('products', { products });
+    updateView('cart-count', { count: itemCount });
+    
+    console.log('Nettbutikk MVC Demo initialisert!');
+});
+```
+
+## 🔄 Data Flow
+
+### 1. Application Startup
+```
+HTML Load → DOMContentLoaded → initializeCart() → loadCartFromStorage() → 
+getAllProducts() → updateView('products') → generateProductsPage() → attachEventListeners()
+```
+
+### 2. User Interactions
+```
+User Click → Controller Function → Model Operation → updateView() → 
+HTML Generation → Event Listener Attachment → UI Update
+```
+
+### 3. Cart Operations
+```
+Add to Cart → addToCart() → saveCartToStorage() → updateCartDisplay() → 
+updateView('cart') + updateView('cart-count') → showNotification()
+```
+
+## 🎨 View Rendering System
+
+### Centralized Rendering
+All UI updates flow through the single `updateView()` function:
+
+```javascript
+updateView('products', { products: [...] });
+updateView('product-detail', { product: {...} });
+updateView('cart', { cartItems: [...], total: 0, itemCount: 0 });
+updateView('cart-count', { count: 0 });
+updateView('notification', { message: 'Success!' });
+```
+
+### Complete Page Generation
+Unlike traditional DOM manipulation, this system generates complete page HTML:
+
+```javascript
+function generateProductsPage(products) {
+    return `
+        ${generateNavbar()}
+        <main>
+            <section class="page active">
+                <h2>Våre Produkter</h2>
+                <div class="products-grid">
+                    ${products.map(product => createProductCard(product)).join('')}
+                </div>
+            </section>
+        </main>
+    `;
+}
+```
+
+### Event Listener Management
+After each render, event listeners are reattached:
+
+```javascript
+function attachEventListeners() {
+    const productsLink = document.querySelector('[data-page="products"]');
+    const cartLink = document.querySelector('[data-page="cart"]');
+    
+    if (productsLink) {
+        productsLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            navigateToProducts();
+        });
+    }
+    // ... more listeners
+}
+```
+
+## 💾 Data Persistence
+
+### LocalStorage Integration
+Cart data is automatically persisted:
+
+```javascript
+function saveCartToStorage() {
+    try {
+        localStorage.setItem('webstore_cart', JSON.stringify(cart));
+    } catch (error) {
+        console.error('Feil ved lagring av handlekurv til localStorage:', error);
+    }
+}
+
+function loadCartFromStorage() {
+    try {
+        const savedCart = localStorage.getItem('webstore_cart');
+        if (savedCart) {
+            const parsedCart = JSON.parse(savedCart);
+            return parsedCart.map(item => ({
+                ...item,
+                product: products.find(p => p.id === item.productId) || 
+                         { id: item.productId, name: 'Ukjent Produkt', price: 0 }
+            }));
+        }
+    } catch (error) {
+        console.error('Feil ved lasting av handlekurv fra localStorage:', error);
+    }
+    return [];
+}
+```
+
+## 🚀 Usage
+
+### Running the Application
+1. Open `index.html` in a web browser
+2. The application initializes automatically
+3. Navigate between products, product details, and cart
+4. Cart state persists across browser sessions
+
+### Key Features
+- **Product Browsing**: View all products in a grid layout
+- **Product Details**: Click any product for detailed view
+- **Shopping Cart**: Add, remove, and modify quantities
+- **Persistent Cart**: Cart contents saved in localStorage
+- **Responsive Design**: Works on desktop and mobile
+- **User Notifications**: Feedback for all user actions
+
+## 🎯 Educational Benefits
+
+### MVC Pattern Demonstration
+- Clear separation of concerns
+- Model handles data, View handles presentation, Controller handles logic
+- Demonstrates how components interact in MVC architecture
+
+### Modern JavaScript Features
+- ES6+ syntax (arrow functions, template literals, destructuring)
+- LocalStorage API usage
+- Event handling patterns
+- Functional programming concepts
+
+### Web Development Fundamentals
+- DOM manipulation techniques
+- Event listener management
+- Client-side state management
+- HTML generation and templating
+- CSS styling integration
+
+## 🔧 Technical Decisions
+
+### Why Centralized Rendering?
+- **Consistency**: All UI updates follow the same pattern
+- **Maintainability**: Easy to track and debug UI changes
+- **Scalability**: Simple to add new view types
+- **State Management**: Clear data flow from model to view
+
+### Why Complete Page Generation?
+- **Simplicity**: No complex DOM diffing or state tracking
+- **Reliability**: Fresh render eliminates stale state issues
+- **Performance**: Modern browsers handle innerHTML efficiently
+- **Debugging**: Easy to see exactly what HTML is generated
+
+### Why LocalStorage?
+- **Persistence**: Cart survives browser restarts
+- **Simplicity**: No server-side complexity
+- **Performance**: Instant load times
+- **Educational**: Demonstrates client-side storage concepts
+
+## 🎨 Styling Architecture
+
+The application uses a clean, modern CSS design:
+- Responsive grid layouts
+- Card-based product display
+- Consistent button and form styling
+- Mobile-friendly navigation
+- Smooth transitions and hover effects
+
+## 🔮 Future Enhancements
+
+This MVC implementation serves as a foundation for progressive enhancement:
+
+1. **Phase 2**: Add TypeScript for type safety
+2. **Phase 3**: Implement Vue.js for reactive UI
+3. **Phase 4**: Add user authentication
+4. **Phase 5**: Integrate payment processing
+5. **Phase 6**: Add product search and filtering
+6. **Phase 7**: Implement real backend API
+
+## 📚 Learning Outcomes
+
+By studying this codebase, you'll understand:
+- MVC architectural pattern implementation
+- Client-side state management techniques
+- Modern JavaScript development practices
+- HTML generation and templating approaches
+- Event-driven programming patterns
+- LocalStorage API usage
+- Responsive web design principles
+
+---
+
+*This project is part of the GET Frontend Development curriculum, demonstrating core web development concepts through practical implementation.*
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/flow-diagram.md b/webshop_app/mvc-emne2/flow-diagram.md
new file mode 100644
index 0000000..3a2984b
--- /dev/null
+++ b/webshop_app/mvc-emne2/flow-diagram.md
@@ -0,0 +1,105 @@
+# MVC Webshop Application Flow Diagram
+
+```mermaid
+graph TD
+    A[App Start] --> B[DOMContentLoaded Event]
+    B --> C[initializeCart()]
+    C --> D[loadCartFromStorage()]
+    D --> E[getAllProducts()]
+    E --> F[updateView('products', products)]
+    F --> G[generateProductsPage()]
+    G --> H[attachEventListeners()]
+    
+    H --> I{User Action}
+    
+    I -->|Click Product| J[showProductDetail(id)]
+    I -->|Add to Cart| K[handleAddToCart(id)]
+    I -->|Navigate to Cart| L[navigateToCart()]
+    I -->|Navigate to Products| M[navigateToProducts()]
+    
+    J --> N[getProductById(id)]
+    N --> O[updateView('product-detail', product)]
+    O --> P[generateProductDetailPage()]
+    P --> Q[attachEventListeners()]
+    Q --> I
+    
+    K --> R[addToCart(id)]
+    R --> S[saveCartToStorage()]
+    S --> T[updateCartDisplay()]
+    T --> U[updateView('cart', cartData)]
+    U --> V[updateView('cart-count', count)]
+    V --> W[showNotification()]
+    W --> I
+    
+    L --> X[getCart() + getCartTotal() + getCartItemCount()]
+    X --> Y[updateView('cart', cartData)]
+    Y --> Z[generateCartPage()]
+    Z --> AA[attachEventListeners()]
+    AA --> I
+    
+    M --> BB[getAllProducts()]
+    BB --> CC[updateView('products', products)]
+    CC --> DD[generateProductsPage()]
+    DD --> EE[attachEventListeners()]
+    EE --> I
+    
+    I -->|Change Quantity| FF[changeQuantity(id, change)]
+    FF --> GG[updateCartQuantity(id, newQty)]
+    GG --> HH[saveCartToStorage()]
+    HH --> T
+    
+    I -->|Remove from Cart| II[handleRemoveFromCart(id)]
+    II --> JJ[removeFromCart(id)]
+    JJ --> KK[saveCartToStorage()]
+    KK --> T
+    
+    I -->|Clear Cart| LL[handleClearCart()]
+    LL --> MM{Confirm?}
+    MM -->|Yes| NN[clearCart()]
+    MM -->|No| I
+    NN --> OO[saveCartToStorage()]
+    OO --> T
+
+    style A fill:#e1f5fe
+    style F fill:#f3e5f5
+    style O fill:#f3e5f5
+    style U fill:#f3e5f5
+    style Y fill:#f3e5f5
+    style CC fill:#f3e5f5
+    
+    classDef modelClass fill:#e8f5e8
+    classDef viewClass fill:#fff3e0
+    classDef controllerClass fill:#fce4ec
+    
+    class C,D,E,N,R,S,X,BB,GG,HH,JJ,KK,NN,OO modelClass
+    class F,G,O,P,U,Y,Z,CC,DD viewClass
+    class J,K,L,M,FF,II,LL,T controllerClass
+```
+
+## Component Responsibilities
+
+### Model (Green)
+- Data storage and retrieval
+- Cart management
+- LocalStorage operations
+- Product data
+
+### View (Orange)
+- HTML generation
+- DOM manipulation
+- Event listener attachment
+- User interface rendering
+
+### Controller (Pink)
+- User interaction handling
+- Business logic
+- Coordination between Model and View
+- Navigation management
+
+## Data Flow Summary
+
+1. **Initialization**: App loads, initializes cart from localStorage, renders products
+2. **User Interactions**: Click events trigger controller functions
+3. **Model Updates**: Controller modifies data through model functions
+4. **View Updates**: Model changes trigger view re-rendering via updateView()
+5. **Persistence**: Cart changes are automatically saved to localStorage
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/index.html b/webshop_app/mvc-emne2/index.html
new file mode 100644
index 0000000..d435bce
--- /dev/null
+++ b/webshop_app/mvc-emne2/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="no">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="En demonstrasjon av MVC-arkitektur i en nettbutikk-applikasjon">
+    <title>Nettbutikk - MVC Demo</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="app" role="application" aria-label="Nettbutikk applikasjon">
+        <!-- All content will be rendered here by updateView -->
+        <div class="loading" role="status" aria-live="polite">Laster innhold...</div>
+    </div>
+
+    <script src="js/model.js"></script>
+    <script src="js/view.js"></script>
+    <script src="js/controller.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/js/app.js b/webshop_app/mvc-emne2/js/app.js
new file mode 100644
index 0000000..1cd6665
--- /dev/null
+++ b/webshop_app/mvc-emne2/js/app.js
@@ -0,0 +1,30 @@
+// Hovedinitialisering av applikasjonen når DOM er ferdig lastet
+// Setter opp initial tilstand og starter renderingsloopen
+document.addEventListener('DOMContentLoaded', function() {
+    // Fjerner loading-indikator hvis den finnes
+    // Defensiv sjekk fordi HTML-struktur kan endres
+    const loadingElement = document.querySelector('.loading');
+    if (loadingElement) {
+        loadingElement.remove();
+    }
+    
+    // Laster lagret handlekurv fra localStorage før første rendering
+    // Må skje først fordi andre operasjoner avhenger av handlekurvstatus
+    initializeCart();
+    
+    // Henter initial data fra model-lag
+    const products = getAllProducts();
+    const cart = getCart();
+    const itemCount = getCartItemCount();
+    
+    // Starter med produktoversikt som standardside
+    // Viser brukeren det de mest sannsynlig ønsker å se først
+    updateView('products', { products });
+    
+    // Oppdaterer handlekurvteller i navigasjon basert på lagret data
+    // Viktig for å vise korrekt status fra tidligere sessjon
+    updateView('cart-count', { count: itemCount });
+    
+    // Bekrefter vellykket initialisering i konsoll for debugging
+    console.log('Nettbutikk MVC Demo initialisert!');
+});
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/js/controller.js b/webshop_app/mvc-emne2/js/controller.js
new file mode 100644
index 0000000..fc5eef1
--- /dev/null
+++ b/webshop_app/mvc-emne2/js/controller.js
@@ -0,0 +1,95 @@
+// Laster og viser alle produkter - brukes ved app-initialisering og navigasjon
+// Henter data fra model og sender til view for rendering
+function loadProducts() {
+    const products = getAllProducts();
+    updateView('products', { products });
+}
+
+// Viser detaljside for spesifikt produkt basert på ID
+// Kaller updateView som håndterer både gyldige og ugyldige produkter
+function showProductDetail(productId) {
+    const product = getProductById(productId);
+    updateView('product-detail', { product });
+}
+
+// Hovedfunksjon for å legge produkter i handlekurv
+// Koordinerer mellom model (dataendring) og view (brukernotifikasjon + UI-oppdatering)
+function handleAddToCart(productId) {
+    const success = addToCart(productId); // Model-operasjon som returnerer boolean
+    if (success) {
+        // Henter produktnavn for personlig notifikasjon
+        const product = getProductById(productId);
+        updateView('notification', { message: product.name + ' lagt til i handlekurv!' });
+        // Oppdaterer handlekurvvisning og teller umiddelbart
+        updateCartDisplay();
+    } else {
+        // Viser feilmelding hvis produktet ikke eksisterer
+        updateView('notification', { message: 'Feil ved å legge produktet i handlekurven' });
+    }
+}
+
+// Fjerner produkt fra handlekurv med brukerbekreftelse
+// Kombinerer model-operasjon med brukernotifikasjon
+function handleRemoveFromCart(productId) {
+    removeFromCart(productId); // Model-operasjon
+    updateView('notification', { message: 'Vare fjernet fra handlekurv' });
+    updateCartDisplay(); // Oppdaterer UI umiddelbart
+}
+
+// Endrer antall av et produkt i handlekurv (+1 eller -1)
+// Inneholder defensiv sjekk selv om UI-logikk ikke burde kalle dette for ikke-eksisterende varer
+function changeQuantity(productId, change) {
+    const cart = getCart();
+    const item = cart.find(item => item.productId === productId);
+    
+    // Sikkerhetsjekk - kun hvis varen faktisk finnes i handlekurven
+    // Forhindrer feil hvis UI og model kommer ut av synk
+    if (item) {
+        const newQuantity = item.quantity + change;
+        updateCartQuantity(productId, newQuantity); // Model håndterer edge cases (quantity <= 0)
+        updateCartDisplay(); // Oppdaterer UI for å reflektere endringer
+    }
+    // Ingen else - ignorerer stille forsøk på å endre ikke-eksisterende varer
+}
+
+// Tømmer hele handlekurven med bekreftelsdialog
+// Forhindrer utilsiktet tap av handlekurvinnhold
+function handleClearCart() {
+    // Browser-standard confirm() for brukersikkerhet
+    if (confirm('Er du sikker på at du vil tømme handlekurven?')) {
+        clearCart(); // Model-operasjon
+        updateView('notification', { message: 'Handlekurv tømt' });
+        updateCartDisplay(); // Oppdaterer til tom handlekurv
+    }
+    // Ingen else - kansellering ignoreres stille
+}
+
+// Navigerer til produktoversikt - brukes fra tilbake-knapp og hovednavigasjon
+// Laster ferske produktdata og rendrer siden
+function navigateToProducts() {
+    const products = getAllProducts();
+    updateView('products', { products });
+}
+
+// Navigerer til handlekurvside med komplett handlekurvstatus
+// Samler all nødvendig data fra model i én operasjon
+function navigateToCart() {
+    const cart = getCart();
+    const total = getCartTotal();
+    const itemCount = getCartItemCount();
+    // Sender all handlekurvdata til view for komplett rendering
+    updateView('cart', { cartItems: cart, total, itemCount });
+}
+
+// Oppdaterer handlekurvvisning etter endringer (add, remove, quantity change)
+// Koordinerer mellom handlekurvside og navigationsteller
+function updateCartDisplay() {
+    const cart = getCart();
+    const total = getCartTotal();
+    const itemCount = getCartItemCount();
+    
+    // Oppdaterer handlekurvside (hvis bruker er på den siden)
+    updateView('cart', { cartItems: cart, total, itemCount });
+    // Oppdaterer også telleren i navigasjonen (synlig på alle sider)
+    updateView('cart-count', { count: itemCount });
+}
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/js/model.js b/webshop_app/mvc-emne2/js/model.js
new file mode 100644
index 0000000..f953bd6
--- /dev/null
+++ b/webshop_app/mvc-emne2/js/model.js
@@ -0,0 +1,195 @@
+// Statisk produktkatalog - bruker hardkodede data for å fokusere på MVC-arkitektur
+// fremfor backend-integrasjon i denne fasen av prosjektet
+const products = [
+    {
+        id: 1,
+        name: "Trådløse Hodetelefoner",
+        price: 99.99,
+        description: "Høykvalitets trådløse hodetelefoner med støydemping og 30 timer batteritid.",
+        image: "🎧", // Bruker emoji for enkelhet - unngår bildefilhåndtering
+        category: "Elektronikk"
+    },
+    {
+        id: 2,
+        name: "Smartklokke",
+        price: 199.99,
+        description: "Funksjonsrik smartklokke med treningssporing, pulsmåler og GPS.",
+        image: "⌚",
+        category: "Elektronikk"
+    },
+    {
+        id: 3,
+        name: "Kaffetrakter",
+        price: 79.99,
+        description: "Programmerbar kaffetrakter med termokanne og automatisk bryggtimer.",
+        image: "☕",
+        category: "Hjem"
+    },
+    {
+        id: 4,
+        name: "Ryggsekk",
+        price: 49.99,
+        description: "Slitesterke laptop-ryggsekk med flere rom og vannavstøtende materiale.",
+        image: "🎒",
+        category: "Livsstil"
+    },
+    {
+        id: 5,
+        name: "Skrivebordslampe",
+        price: 39.99,
+        description: "LED skrivebordslampe med justerbar lysstyrke og USB-ladeport.",
+        image: "💡",
+        category: "Hjem"
+    },
+    {
+        id: 6,
+        name: "Trådløs Mus",
+        price: 29.99,
+        description: "Ergonomisk trådløs mus med presis sporing og lang batteritid.",
+        image: "🖱️",
+        category: "Elektronikk"
+    }
+];
+
+// Handlekurv lagres i minnet som et array - enkelt å arbeide med og testbar
+// Hver handlekurvvare inneholder productId, quantity og en referanse til produktobjektet
+let cart = [];
+
+// Getter-funksjoner for produktdata - gir kontrollert tilgang til data
+// og muliggjør fremtidig validering eller transformasjon
+function getAllProducts() {
+    return products;
+}
+
+// Konverterer id til integer fordi URL-parametere alltid er strings
+// Bruker find() for å returnere første match eller undefined hvis ikke funnet
+function getProductById(id) {
+    return products.find(product => product.id === parseInt(id));
+}
+
+// Legger til produkt i handlekurv med intelligent sammenslåing
+// quantity = 1 som standard fordi de fleste klikk legger til én vare
+function addToCart(productId, quantity = 1) {
+    const product = getProductById(productId);
+    // Kritisk validering - forhindrer at ugyldig produkter legges til
+    // Returnerer false for å signalisere feil til kallende kode
+    if (!product) return false;
+
+    // Sjekker om produktet allerede finnes for å unngå duplikater
+    // Øker quantity istedenfor å lage nye poster - bedre brukeropplevelse
+    const existingItem = cart.find(item => item.productId === productId);
+    
+    if (existingItem) {
+        // Øker eksisterende quantity - intuitivt for brukeren
+        existingItem.quantity += quantity;
+    } else {
+        // Lager ny handlekurvpost med både ID og fullt produktobjekt
+        // product-referansen unngår gjentatte oppslag senere
+        cart.push({
+            productId: productId,    // For identifikasjon og sammenligning
+            quantity: quantity,      // Hvor mange brukeren vil ha
+            product: product        // Full produktinfo for visning
+        });
+    }
+
+    // Persisterer umiddelbart for å unngå tap av data
+    saveCartToStorage();
+    return true; // Signaliserer suksess til UI-lag
+}
+
+// Fjerner hele produktlinjen fra handlekurv uavhengig av quantity
+// Bruker filter() for å lage nytt array - funksjonell programmering
+function removeFromCart(productId) {
+    cart = cart.filter(item => item.productId !== productId);
+    saveCartToStorage(); // Persister endring umiddelbart
+}
+
+// Oppdaterer antall av eksisterende handlekurvvare
+// Håndterer edge case hvor quantity blir 0 eller negativ
+function updateCartQuantity(productId, quantity) {
+    const item = cart.find(item => item.productId === productId);
+    if (item) {
+        // Forretningsregel: quantity <= 0 betyr fjern produktet helt
+        // Mer intuitivt enn å ha 0 varer i handlekurven
+        if (quantity <= 0) {
+            removeFromCart(productId);
+        } else {
+            item.quantity = quantity;
+            saveCartToStorage();
+        }
+    }
+    // Ingen else - ignorerer oppdateringer til ikke-eksisterende varer
+}
+
+// Returnerer hele handlekurv-arrayet for visning
+// Andre komponenter kan ikke direkte mutere cart-variabelen
+function getCart() {
+    return cart;
+}
+
+// Beregner total pris for alle varer i handlekurv
+// Bruker reduce() for elegant summering av pris * quantity
+function getCartTotal() {
+    return cart.reduce((total, item) => {
+        return total + (item.product.price * item.quantity);
+    }, 0); // Starter med 0 som akkumulator
+}
+
+// Teller totalt antall individuelle varer (ikke unike produkter)
+// Eksempel: 2 hodetelefoner + 3 kaffetraktere = 5 varer totalt
+function getCartItemCount() {
+    return cart.reduce((count, item) => count + item.quantity, 0);
+}
+
+// Tømmer hele handlekurven - brukes ved utsjekking eller manuell tømming
+// Setter cart til tomt array istedenfor å mutere eksisterende
+function clearCart() {
+    cart = [];
+    saveCartToStorage(); // Persister tom handlekurv
+}
+
+// Lagrer handlekurv til nettleserens localStorage for persistering
+// Try-catch fordi localStorage kan feile i private browsing eller ved kvotaoverskridelse
+function saveCartToStorage() {
+    try {
+        // Konverterer JavaScript-objekt til JSON-string for lagring
+        localStorage.setItem('webstore_cart', JSON.stringify(cart));
+    } catch (error) {
+        // Logger feil men lar appen fortsette å fungere
+        // Graceful degradation - handlekurv fungerer fortsatt i denne sesjonen
+        console.error('Feil ved lagring av handlekurv til localStorage:', error);
+    }
+}
+
+// Laster handlekurv fra localStorage og rekonstruerer produktreferanser
+// Håndterer scenarioer hvor lagret data kan være korrupt eller utdatert
+function loadCartFromStorage() {
+    try {
+        const savedCart = localStorage.getItem('webstore_cart');
+        // Sjekker om data finnes før parsing - første gangs brukere har tom localStorage
+        if (savedCart) {
+            const parsedCart = JSON.parse(savedCart);
+            // Rekonstruerer produktreferanser fordi localStorage kun lagrer JSON
+            // Fallback til "Ukjent Produkt" hvis produktet er fjernet fra katalogen
+            return parsedCart.map(item => ({
+                ...item,
+                // Kritisk: Sikrer at produktreferanse alltid finnes
+                // Håndterer tilfeller hvor produktkatalog endres mellom sesjoner
+                product: products.find(p => p.id === item.productId) || 
+                         { id: item.productId, name: 'Ukjent Produkt', price: 0 }
+            }));
+        }
+    } catch (error) {
+        // JSON parsing kan feile hvis data er korrupt
+        // Logger feil og returnerer tom array som fallback
+        console.error('Feil ved lasting av handlekurv fra localStorage:', error);
+    }
+    // Returnerer tom array som sikker fallback
+    return [];
+}
+
+// Initialiserer handlekurv ved appstart
+// Setter cart-variabelen basert på lagret data eller tom array
+function initializeCart() {
+    cart = loadCartFromStorage();
+}
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/js/view.js b/webshop_app/mvc-emne2/js/view.js
new file mode 100644
index 0000000..c65cb7d
--- /dev/null
+++ b/webshop_app/mvc-emne2/js/view.js
@@ -0,0 +1,283 @@
+// Holder styr på gjeldende side for navigasjonslogikk
+let currentPage = 'products';
+// Lokal kopi av handlekurvantall for rask oppdatering uten model-kall
+let cartCount = 0;
+
+/**
+ * Sentral renderingsfunksjon - alle UI-oppdateringer går gjennom denne
+ * Bruker switch-pattern for å håndtere forskjellige visningstyper
+ * data-parameter bruker default empty object for å unngå undefined errors
+ */
+function updateView(viewType, data = {}) {
+    const app = document.getElementById('app');
+    
+    switch (viewType) {
+        case 'products':
+            currentPage = 'products';
+            // Fallback til tom array hvis products er undefined - forhindrer krasj
+            app.innerHTML = generateProductsPage(data.products || []);
+            // Fester event listeners etter hver render fordi innerHTML erstatter alt
+            attachEventListeners();
+            break;
+        case 'product-detail':
+            currentPage = 'product-detail';
+            app.innerHTML = generateProductDetailPage(data.product);
+            attachEventListeners();
+            break;
+        case 'cart':
+            currentPage = 'cart';
+            // Flere fallbacks fordi handlekurvdata kan være incomplete
+            app.innerHTML = generateCartPage(data.cartItems || [], data.total || 0, data.itemCount || 0);
+            attachEventListeners();
+            break;
+        case 'cart-count':
+            // Spesiell case - oppdaterer kun handlekurvteller uten full re-render
+            // Mer effektivt enn å regenerere hele siden
+            cartCount = data.count;
+            updateCartCountInNav();
+            break;
+        case 'notification':
+            // Brukernotifikasjoner håndteres separat fra hovedrendering
+            showNotification(data.message);
+            break;
+    }
+}
+
+// Genererer navigasjonsbar som inkluderes på alle sider
+// Returnerer HTML-string istedenfor DOM-manipulering for konsistens
+function generateNavbar() {
+    return `
+        <header>
+            <nav class="navbar">
+                <h1 class="logo">Nettbutikk</h1>
+                <ul class="nav-links">
+                    <li><a href="#" data-page="products">Produkter</a></li>
+                    <li><a href="#" data-page="cart" class="cart-link">Handlekurv (<span id="cart-count">${cartCount}</span>)</a></li>
+                </ul>
+            </nav>
+        </header>
+    `;
+}
+
+// Genererer komplett produktlisteside med navbar og produktrutenett
+// Bruker template literals for lesbar HTML-struktur
+function generateProductsPage(products) {
+    return `
+        ${generateNavbar()}
+        <main>
+            <section class="page active" role="main" aria-label="Produktoversikt">
+                <header>
+                    <h2>Våre Produkter</h2>
+                </header>
+                <div class="products-grid" role="list" aria-label="Liste over produkter">
+                    ${/* Mapper hvert produkt til HTML-kort og slår sammen til string */
+                      products.map(product => createProductCard(product)).join('')}
+                </div>
+            </section>
+        </main>
+    `;
+}
+
+// Genererer produktdetaljside med error handling for ugyldig produkt
+// Håndterer both null/undefined produkter gracefully
+function generateProductDetailPage(product) {
+    // Kritisk sjekk - håndterer tilfeller hvor bruker navigerer til ugyldig produkt-ID
+    // Viser feilmelding istedenfor å krasje
+    if (!product) {
+        return `
+            ${generateNavbar()}
+            <main>
+                <section class="page active" role="main" aria-label="Produktdetaljer">
+                    <nav aria-label="Breadcrumb">
+                        <button class="back-btn" onclick="navigateToProducts()" aria-label="Gå tilbake til produktoversikt">← Tilbake til Produkter</button>
+                    </nav>
+                    <div role="alert" aria-live="polite">
+                        <p>Produktet ble ikke funnet</p>
+                    </div>
+                </section>
+            </main>
+        `;
+    }
+    
+    // Normal rendering med fullstendige produktdetaljer
+    // Bruker semantic HTML og ARIA for tilgjengelighet
+    return `
+        ${generateNavbar()}
+        <main>
+            <section class="page active" role="main" aria-label="Produktdetaljer">
+                <nav aria-label="Breadcrumb">
+                    <button class="back-btn" onclick="navigateToProducts()" aria-label="Gå tilbake til produktoversikt">← Tilbake til Produkter</button>
+                </nav>
+                <article class="product-detail">
+                    <header>
+                        <div class="product-image" role="img" aria-label="Produktbilde: ${product.name}">${product.image}</div>
+                        <h1 class="product-name">${product.name}</h1>
+                    </header>
+                    <div class="product-info">
+                        <p class="product-price" aria-label="Pris: ${product.price.toFixed(2)} kroner">
+                            <span class="currency">kr</span> <span class="amount">${product.price.toFixed(2)}</span>
+                        </p>
+                        <p class="product-description">${product.description}</p>
+                        <p class="product-category">Kategori: <span>${product.category}</span></p>
+                    </div>
+                    <footer>
+                        <button class="btn btn-success" onclick="handleAddToCart(${product.id})" aria-label="Legg ${product.name} i handlekurv">
+                            Legg i handlekurv
+                        </button>
+                    </footer>
+                </article>
+            </section>
+        </main>
+    `;
+}
+
+// Genererer handlekurvside med kondisjonell rendering basert på innhold
+// Håndterer både tom og fylt handlekurv med forskjellige UI-elementer
+function generateCartPage(cartItems, total, itemCount) {
+    // Ternary operator for å vise forskjellig innhold basert på handlekurvstatus
+    // Tom handlekurv får eget design med oppfordring til handling
+    const cartContent = cartItems.length === 0 ? 
+        `<div class="empty-cart" role="status" aria-live="polite">
+            <h3>Handlekurven din er tom</h3>
+            <p>Legg til noen produkter for å komme i gang!</p>
+        </div>` :
+        // Mapper hver handlekurvvare til HTML og slår sammen
+        cartItems.map(item => createCartItem(item)).join('');
+    
+    // Viser kun total og handlingsknapper hvis handlekurven har varer
+    // Unngår forvirrende UI-elementer når handlekurven er tom
+    const cartTotal = itemCount === 0 ? '' :
+        `<footer class="cart-total">
+            <div class="total-amount" role="status" aria-live="polite" aria-label="Totalt beløp: ${total.toFixed(2)} kroner">
+                Totalt: <span class="amount">${total.toFixed(2)} kr</span>
+            </div>
+            <div class="cart-actions">
+                <button class="btn btn-primary" onclick="alert('Utsjekking er ikke implementert i denne demoen')" aria-label="Gå til kasse for å fullføre kjøp">Gå til kasse</button>
+                <button class="btn btn-danger" onclick="handleClearCart()" aria-label="Tøm hele handlekurven">Tøm handlekurv</button>
+            </div>
+        </footer>`;
+    
+    return `
+        ${generateNavbar()}
+        <main>
+            <section class="page active" role="main" aria-label="Handlekurv">
+                <header>
+                    <h2>Handlekurv</h2>
+                    ${/* Viser kun sammendrag hvis det finnes varer - bedre UX */
+                      itemCount > 0 ? `<p class="cart-summary" aria-live="polite">${itemCount} ${itemCount === 1 ? 'vare' : 'varer'} i handlekurven</p>` : ''}
+                </header>
+                <div class="cart-items" role="list" aria-label="Varer i handlekurv">
+                    ${cartContent}
+                </div>
+                ${cartTotal}
+            </section>
+        </main>
+    `;
+}
+
+// Fester event listeners til navigasjonselementer etter hver rendering
+// Må kalles etter innerHTML fordi det erstatter alle eksisterende listeners
+function attachEventListeners() {
+    const productsLink = document.querySelector('[data-page="products"]');
+    const cartLink = document.querySelector('[data-page="cart"]');
+    
+    // Defensiv programming - sjekker at elementer eksisterer før listener-tilkobling
+    // Forhindrer feil hvis HTML-struktur endres
+    if (productsLink) {
+        productsLink.addEventListener('click', function(e) {
+            e.preventDefault(); // Forhindrer standard link-navigasjon
+            navigateToProducts();
+        });
+    }
+    
+    if (cartLink) {
+        cartLink.addEventListener('click', function(e) {
+            e.preventDefault(); // Forhindrer standard link-navigasjon
+            navigateToCart();
+        });
+    }
+}
+
+// Oppdaterer kun handlekurvtelleren uten full side-regenerering
+// Mer effektivt for hyppige oppdateringer som quantity-endringer
+function updateCartCountInNav() {
+    const cartCountElement = document.getElementById('cart-count');
+    // Sikkerhetsjekk - elementet kan mangle hvis navbar ikke er rendret ennå
+    if (cartCountElement) {
+        cartCountElement.textContent = cartCount;
+    }
+}
+
+// Removed dead code: showPage() and renderProducts() functions
+// These were remnants from old multi-page architecture
+
+function createProductCard(product) {
+    return `
+        <article class="product-card" role="listitem" tabindex="0" onclick="showProductDetail(${product.id})" 
+                onkeydown="if(event.key==='Enter'||event.key===' ') showProductDetail(${product.id})" 
+                aria-label="Produkt: ${product.name}, Pris: ${product.price.toFixed(2)} kroner">
+            <header>
+                <div class="product-image" role="img" aria-label="Produktbilde: ${product.name}">${product.image}</div>
+                <h3 class="product-name">${product.name}</h3>
+            </header>
+            <div class="product-info">
+                <p class="product-price" aria-label="Pris: ${product.price.toFixed(2)} kroner">
+                    <span class="currency">kr</span> <span class="amount">${product.price.toFixed(2)}</span>
+                </p>
+                <p class="product-description">${product.description}</p>
+            </div>
+            <footer>
+                <button class="btn btn-success" onclick="event.stopPropagation(); handleAddToCart(${product.id})" 
+                        aria-label="Legg ${product.name} i handlekurv">
+                    Legg i handlekurv
+                </button>
+            </footer>
+        </article>
+    `;
+}
+
+// Removed dead code: renderProductDetail() function
+// Replaced by generateProductDetailPage() in modern architecture
+
+// Removed dead code: renderCart() function
+// Replaced by generateCartPage() in modern architecture
+
+function createCartItem(item) {
+    return `
+        <article class="cart-item" role="listitem">
+            <header class="cart-item-info">
+                <h3 class="cart-item-name">${item.product.name}</h3>
+                <p class="cart-item-price" aria-label="Pris per stykk: ${item.product.price.toFixed(2)} kroner">
+                    <span class="amount">${item.product.price.toFixed(2)}</span> <span class="currency">kr</span> per stk
+                </p>
+            </header>
+            <div class="cart-item-controls">
+                <div class="quantity-controls" role="group" aria-label="Antall ${item.product.name}">
+                    <button class="quantity-btn" onclick="changeQuantity(${item.productId}, -1)" 
+                            aria-label="Reduser antall ${item.product.name}" 
+                            ${item.quantity <= 1 ? 'aria-describedby="min-quantity-warning"' : ''}>-</button>
+                    <span class="quantity" role="status" aria-live="polite" aria-label="${item.quantity} stykker">${item.quantity}</span>
+                    <button class="quantity-btn" onclick="changeQuantity(${item.productId}, 1)" 
+                            aria-label="Øk antall ${item.product.name}">+</button>
+                    ${item.quantity <= 1 ? '<span id="min-quantity-warning" class="sr-only">Minimum antall er 1</span>' : ''}
+                </div>
+                <div class="item-total" aria-label="Totalt for ${item.product.name}: ${(item.product.price * item.quantity).toFixed(2)} kroner">
+                    <span class="amount">${(item.product.price * item.quantity).toFixed(2)}</span> <span class="currency">kr</span>
+                </div>
+                <button class="btn btn-remove" onclick="handleRemoveFromCart(${item.productId})" 
+                        aria-label="Fjern ${item.product.name} fra handlekurv">
+                    Fjern
+                </button>
+            </div>
+        </article>
+    `;
+}
+
+// Removed dead code: renderCartTotal() and updateCartCount() functions
+// Replaced by generateCartPage() and updateCartCountInNav() in modern architecture
+
+// Viser brukernotifikasjoner - bruker alert() for enkelhet i prototypefasen
+// I produksjon ville dette vært en toast-notifikasjon eller modal
+function showNotification(message) {
+    alert(message);
+}
\ No newline at end of file
diff --git a/webshop_app/mvc-emne2/styles.css b/webshop_app/mvc-emne2/styles.css
new file mode 100644
index 0000000..099a8e5
--- /dev/null
+++ b/webshop_app/mvc-emne2/styles.css
@@ -0,0 +1,345 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f4f4f4;
+}
+
+/* Screen reader only content */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Focus styles for accessibility */
+button:focus,
+a:focus,
+[tabindex]:focus {
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+
+/* Loading state */
+.loading {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+    color: #666;
+}
+
+/* Improved button styles for different types */
+.btn-primary {
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
+}
+
+.btn-danger {
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.btn-danger:hover {
+    background-color: #c82333;
+    border-color: #bd2130;
+}
+
+.btn-remove {
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn-remove:hover {
+    background-color: #545b62;
+    border-color: #4e555b;
+}
+
+.navbar {
+    background: #2c3e50;
+    color: white;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+.nav-links a:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+
+.cart-link {
+    background-color: #e74c3c;
+    border-radius: 20px;
+}
+
+#app {
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.page {
+    display: none;
+}
+
+.page.active {
+    display: block;
+}
+
+.products-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.product-card {
+    background: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+}
+
+.product-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+}
+
+.product-image {
+    width: 100%;
+    height: 200px;
+    background-color: #ecf0f1;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    font-size: 3rem;
+    color: #95a5a6;
+}
+
+.product-name {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.product-price {
+    font-size: 1.1rem;
+    color: #e74c3c;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.product-description {
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+.btn {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: #2980b9;
+}
+
+.btn-success {
+    background-color: #27ae60;
+}
+
+.btn-success:hover {
+    background-color: #219a52;
+}
+
+.back-btn {
+    background-color: #95a5a6;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 2rem;
+}
+
+.back-btn:hover {
+    background-color: #7f8c8d;
+}
+
+.product-detail {
+    background: white;
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.product-detail .product-image {
+    height: 300px;
+    margin-bottom: 2rem;
+}
+
+.product-detail .product-name {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.product-detail .product-price {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.product-detail .product-description {
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+}
+
+.cart-items {
+    margin-bottom: 2rem;
+}
+
+.cart-item {
+    background: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cart-item-info {
+    flex: 1;
+}
+
+.cart-item-name {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.cart-item-price {
+    color: #e74c3c;
+    font-weight: bold;
+}
+
+.cart-item-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.quantity-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.quantity-btn {
+    background-color: #ecf0f1;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.quantity-btn:hover {
+    background-color: #d5dbdb;
+}
+
+.cart-total {
+    background: white;
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    text-align: right;
+}
+
+.total-amount {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #e74c3c;
+    margin-bottom: 1rem;
+}
+
+.empty-cart {
+    text-align: center;
+    padding: 3rem;
+    color: #666;
+}
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 1rem;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .nav-links {
+        gap: 1rem;
+    }
+    
+    .products-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .cart-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    
+    .cart-item-controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
\ No newline at end of file
diff --git a/webshop_app/prd.md b/webshop_app/prd.md
index e69de29..c2aa131 100644
--- a/webshop_app/prd.md
+++ b/webshop_app/prd.md
@@ -0,0 +1,41 @@
+# Web Store PRD
+
+## Project Overview
+A simple web store application for frontend web development course demonstrating progressive complexity through multiple implementations.
+
+## Core Requirements
+
+### Phase 1: Plain JS/HTML/CSS (MVC Architecture)
+- **Product Listing Page**: Display available products with basic information
+- **Product Detail Page**: Show detailed product information and purchase option
+- **Basic Navigation**: Simple routing between pages
+- **MVC Structure**: Clear separation of Model, View, and Controller layers
+
+### Technical Specifications
+- Pure JavaScript (ES6+)
+- HTML5 semantic markup
+- CSS3 for styling
+- No external frameworks or libraries
+- Local data storage (JSON/localStorage)
+
+### User Stories
+1. As a user, I can view a list of products with names, prices, and images
+2. As a user, I can click on a product to see detailed information
+3. As a user, I can navigate between product list and detail pages
+4. As a user, I can add products to a shopping cart (basic functionality)
+
+### Data Structure
+- Products: id, name, price, description, image, category
+- Cart: product references and quantities
+
+### Future Phases
+- Phase 2: Enhanced with modern JavaScript frameworks
+- Phase 3: TypeScript implementation
+- Phase 4: Vue.js implementation
+- Phase 5: Advanced features (user auth, payment, etc.)
+
+## Success Criteria
+- Clean, maintainable MVC code structure
+- Responsive design works on desktop and mobile
+- Fast loading and smooth navigation
+- Educational value for demonstrating core web development concepts
\ No newline at end of file