biancode · biancode · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/.gitignore b/.gitignore
@@ -137,3 +137,7 @@ dist
 # Vite logs files
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Playwright artifacts
+playwright-report/
+test-results/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,23 +1,64 @@
 # Contributing
 
-## Rules
+## Project Rules
 
 ### Naming Rules
 
-- Use underscores for seperating words in filenames example and lowercasing only `line_graph.js` or `dashboard.js`
+- Keep file names in lowercase
+- Use underscores for multi-word names where appropriate (for example `line_graph.js`)
 
-### Directory structure
+### Directory Structure
 
 - Put all CSS(Cascading Style Sheet) into the `src/css` Folder the naming should be `css/feature_name.css`
 - Put all Javascript files into the `src/js` Folder the naming should be `js/feature_name.js`
 - All HTML Files are put directly into the `src` Folder named as `src/feature_name.html`
+- Feature code belongs in `src/`
+- Documentation belongs in `docs/`
+- Shared standards and quality rules are defined in this file
 
 ## Technologies
 
 ### CSS
 
-- Bootstrap [bootstrap](https://getbootstrap.com/)
+- Bootstrap: <https://getbootstrap.com/>
 
-### Javascript
+### JavaScript
 
-- We will use Charts.js for visualizing Data [chartjs](www.chartjs.org)
+- Chart.js: <https://www.chartjs.org/>
+
+## Tests and Quality
+
+### Prerequisites
+
+```bash
+npm install
+```
+
+### Linting
+
+```bash
+npm run lint
+npm run lint:fix
+```
+
+### End-to-End Tests (Playwright)
+
+```bash
+# Install browsers once
+npm run test:e2e:install-browsers
+
+# Run all configured browser projects
+npm run test:e2e
+
+# Run a single browser project
+npm run test:e2e:chrome
+npm run test:e2e:edge
+npm run test:e2e:firefox
+```
+
+### Current Test Focus
+
+- Dashboard view
+- Menu navigation
+- Smoke tests for Dashboard, Forms, and Tables
+- Execution in Chrome, Edge, and Firefox
diff --git a/README.md b/README.md
@@ -1,25 +1,49 @@
 # BMI-Web-App
 Lerneinheit LF10
 
-## Getting Started
+## Fuer wen ist die App?
 
-Startet einen lokalen Webserver im Projektverzeichnis:
+Die BMI-Web-App richtet sich an Nutzende, die ihren BMI berechnen und Messwerte uebersichtlich ansehen wollen.
+Die Anwendung laeuft komplett im Browser.
+
+## Schnellstart fuer Nutzende
+
+1. Projekt lokal starten:
 
 ```bash
 python3 -m http.server 8000
 ```
 
-Oeffnet dann im Browser: [http://localhost:8000](http://localhost:8000)
+2. Im Browser oeffnen: `http://localhost:8000`
+3. Im Menue zwischen `Dashboard`, `Forms` und `Tables` wechseln
 
-> **Hinweis:** Die App muss ueber einen HTTP-Server laufen. Ein direktes Oeffnen der HTML-Dateien (`file://`) funktioniert nicht, da `fetch()`-Aufrufe eine Server-Umgebung benoetigen.
+Hinweis: Bitte nicht per `file://` oeffnen, da einige Inhalte per `fetch()` geladen werden.
 
-## Documentation
+## Was bietet die App?
 
-Here you can find the links to the features in this software.
+- BMI-Berechnung mit Eingaben zu Alter, Datum, Gewicht und Groesse
+- Automatische Speicherung der letzten Eingaben im Browser (`localStorage`)
+- Tabellenansicht mit Filter und Sortierung von BMI-Eintraegen
+- Dashboard als zentrale Startansicht mit Schnellueberblick
+
+## Ansichten im Ueberblick
 
 - [Dashboard](./docs/Dashboard.md)
+- [Formular](./docs/Formular.md)
+- [Tables](./docs/Tables.md)
 - [Barchart](./docs/Barchart.md)
-- [Linechart](./docs/Linechart.md) 
-- [Tables](./docs/Tables.md) 
-- [Settings](./docs/Settings.md) 
-- [Formular](./docs/Formular.md)
+- [Linechart](./docs/Linechart.md)
+- [Settings](./docs/Settings.md)
+
+## Haeufige Probleme
+
+- **Leere Seite oder Fehler beim Laden:** App ueber HTTP-Server starten (siehe Schnellstart).
+- **Daten wirken veraltet:** Browserdaten/`localStorage` leeren oder in der App auf Zuruecksetzen gehen.
+- **Darstellung seltsam:** Seite neu laden und auf aktuelle Browser-Version achten.
+
+## Entwickler-Dokumentation
+
+Alle Infos fuer Entwicklung, Standards, Tests und Qualitaet:
+
+- [Contributing Guide](./CONTRIBUTING.md)
+- [Documentation Index](./docs/README.md)
diff --git a/docs/Barchart.md b/docs/Barchart.md
@@ -1,3 +1,23 @@
-# Overview
+# Barchart
 
-The Barchart shows the historical development of BMI of the current user in bars over time.
+## Zweck der View
+
+Die Barchart-Ansicht visualisiert den BMI-Verlauf als Balkendiagramm.
+
+## Was die View bietet
+
+- Darstellung von BMI-Werten ueber Zeit
+- Farbliche Trennung nach BMI-Bereich (z. B. normal, uebergewichtig)
+- Speicherung der Historie im Browser (`localStorage`)
+
+## Datenquelle
+
+- Aktuell basiert die Ansicht auf lokal gespeicherten Daten (`bmiHistory`)
+- Die Koerpergroesse ist derzeit als fester Wert im Code hinterlegt
+
+## Nutzerfluss
+
+1. Gewicht eingeben
+2. BMI-Eintrag erzeugen
+3. Neuen Balken im Diagramm sehen
+4. Beim Neuladen bleiben Daten erhalten
diff --git a/docs/Dashboard.md b/docs/Dashboard.md
@@ -1,51 +1,22 @@
-# Dashboard Documentation
+# Dashboard
 
-## Überblick
+## Zweck der View
 
-Das Dashboard ist die zentrale Übersichtsseite der BMI-Web-App. Es dient als Startpunkt der Anwendung und zeigt (aktuell als Platzhalter/Wireframe) typische Dashboard-Elemente wie Karten/Widgets, Charts und eine tabellarische Übersicht. Die Inhalte werden dynamisch in einen zentralen Content-Bereich geladen, ohne dass die komplette Seite neu geladen werden muss.
+Das Dashboard ist die Startansicht der App. Es bietet einen schnellen Ueberblick und ist der Einstiegspunkt in die Navigation zu weiteren Bereichen.
 
-## Ziel / Zweck
+## Was die View aktuell bietet
 
-- **Schneller Einstieg** in die App über eine zentrale Oberfläche
-- **Navigation** zu weiteren Bereichen (Forms, Tables)
-- **Darstellung von Kennzahlen** (z.B. BMI-Verläufe, letzte Einträge) – derzeit als Platzhalter vorgesehen
-- **Skalierbare Struktur**, damit später weitere Seiten/Widgets leicht ergänzt werden können
+- Titelbereich "Dashboard (page title)"
+- Platzhalter fuer Chart- und Tabellenbereiche
+- Seitenlayout fuer kleine und grosse Displays
+- Direkte Menue-Navigation zu `Forms` und `Tables`
 
----
+## Nutzerfluss
 
-## Projektstruktur (relevant)
+1. App starten und Dashboard laden
+2. Im Menue die gewuenschte View waehlen
+3. Zurueck auf Dashboard wechseln, um wieder den Ueberblick zu sehen
 
-Typische Struktur (Auszug):
+## Technischer Hinweis
 
-- `index.html` (Projekt-Root)  
-  Einstiegspunkt. Leitet auf die App weiter.
-
-- `src/app.html`  
-  Enthält Layout (Sidebar + Content-Area `#view`) und bindet CSS/JS ein.
-
-- `src/dashboard/dashboard.html`  
-  Dashboard-Inhalt (Platzhalter-Layout, Cards/Charts/Tables-Bereiche).
-
-- `src/dashboard/dashboard.css`  
-  Styling für Sidebar, Layout, Platzhalter-Komponenten.
-
-- `src/dashboard/dashboard.js`  
-  Client-seitige Navigation (Routing) und dynamisches Nachladen der Seiten in `#view`.
-
-- `src/forms/forms.html`  
-  Inhalt für den Forms-Bereich.
-
-- `src/tables/tables.html`  
-  Inhalt für den Tables-Bereich.
-
----
-
-## Starten & Aufrufen
-
-### Lokaler Webserver
-
-Im Projekt-Root (dort wo `index.html` liegt) ausführen:
-
-```bash
-python3 -m http.server 8000
-```
+Die View wird dynamisch in den Content-Bereich (`#view`) geladen. Das Routing erfolgt ueber den URL-Hash (`#dashboard`, `#forms`, `#tables`).
diff --git a/docs/Formular.md b/docs/Formular.md
@@ -1,30 +1,29 @@
-# BMI Form - Input Component
+# Formular
 
-## 📝 Project Description
-This part of the BMI calculator is responsible for **user input**. Users can enter their personal data and calculate their BMI.
+## Zweck der View
 
-## 🎯 Features
+In dieser View geben Nutzende ihre Koerperdaten ein und erhalten direkt den berechneten BMI inklusive Kategorie.
 
-### Input Fields
-- **Age** (1-120 years)
-- **Date** (calculation date)
-- **Weight** (1-500 kg)
-- **Height** (50-250 cm)
+## Was die View bietet
 
-### Buttons
-- **BMI berechnen** - Starts the calculation
-- **Clear/Reset** - Clears all inputs and results
+- Eingabefelder fuer:
+  - Alter (1-120)
+  - Datum
+  - Gewicht in kg (1-500)
+  - Groesse in cm (50-250)
+- Button **BMI berechnen**
+- Button **Clear/Reset**
+- Ergebnisbereich mit BMI-Wert und Kategorie
+- Fehlerbereich fuer ungueltige Eingaben
 
-### Functionality
-- ✅ **Input Validation** - Checks for empty fields and valid values
-- ✅ **BMI Calculation** - Formula: `Weight / (Height/100)²`
-- ✅ **BMI Categories** - Underweight, Normal weight, Overweight, Obesity
-- ✅ **Local Storage** - Saves inputs in browser
-- ✅ **Auto-Load** - Loads saved data on page start
-- ✅ **Responsive Design** - Works on desktop and mobile
+## Logik und Verhalten
 
+- Eingaben werden vor der Berechnung validiert
+- BMI wird nach Formel `Gewicht / (Groesse in m)^2` berechnet
+- BMI-Kategorie wird ermittelt (Untergewicht, Normalgewicht, Uebergewicht, Adipositas)
+- Daten werden in `localStorage` gespeichert und beim Laden wiederhergestellt
 
-## 🚀 Usage
+## Nutzerfluss
 
 1. Open `formular.html` in browser
 2. Fill all 4 input fields

diff --git a/docs/Linechart.md b/docs/Linechart.md
@@ -1,15 +1,21 @@
-# Overview
+# Linechart
 
-The line chart visualizes the BMI Data over time.
+## Zweck der View
 
-## Data
+Die Linechart-Ansicht zeigt BMI-Werte als Verlaufskurve ueber die Zeit.
 
-Currently the data uses a mock object which contains all datapoints. Later on it should read the necessary data
-from the local storage. 
+## Was die View bietet
 
-# Integration
+- Visualisierung von BMI-Daten als Liniendiagramm
+- Darstellung auf einem `canvas`-Element
+- Grundlage fuer Trendbeobachtung statt Einzelwert-Betrachtung
 
-To integrate the line chart into the dashboard you can either use
-the id `bmi-chart` __or__ you can call the javascript function `plotChart` with a different canvas id.
+## Datenstand
 
-__NOTE__: The Linechart must be a element of type `<canvas>`
+- Aktuell werden Mock-Daten verwendet
+- Zielbild: Uebernahme der Daten aus `localStorage` oder einer zentralen Datenquelle
+
+## Hinweise zur Einbindung
+
+- Die Chart-Logik erwartet ein `canvas`-Element
+- Standard-ID in der View: `bmi-chart`
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,21 @@
+# Documentation Index
+
+This folder contains the feature and view documentation for the BMI Web App.
+
+## Quick Start
+
+- Start with [Dashboard](./Dashboard.md) to understand the app entry view and navigation.
+- Continue with [Formular](./Formular.md) for BMI input and calculation flow.
+- Use [Tables](./Tables.md) for filtering and sorting BMI entries.
+- Check [Barchart](./Barchart.md) for BMI history visualization.
+- Review [Linechart](./Linechart.md) for trend visualization details.
+- Open [Settings](./Settings.md) for persisted user preferences.
+
+## Recommended Reading Order
+
+1. [Dashboard](./Dashboard.md)
+2. [Formular](./Formular.md)
+3. [Tables](./Tables.md)
+4. [Barchart](./Barchart.md)
+5. [Linechart](./Linechart.md)
+6. [Settings](./Settings.md)
diff --git a/docs/Tables.md b/docs/Tables.md
@@ -0,0 +1,33 @@
+# Tables
+
+## Zweck der View
+
+Die Tabellenansicht zeigt BMI-Messungen strukturiert an und ermoeglicht schnelles Filtern und Sortieren.
+
+## Was die View bietet
+
+- Tabelle mit:
+  - Datum
+  - Gewicht
+  - Groesse
+  - berechnetem BMI
+  - BMI-Bewertung
+- Filter:
+  - Alle Eintraege
+  - Letzte Woche
+  - Letzter Monat
+- Sortierung:
+  - Datum auf/absteigend
+  - BMI auf/absteigend
+- Loesch-Funktion pro Eintrag
+
+## Datenbasis
+
+- Die Tabelle wird aktuell aus `src/data/mock.json` befuellt
+- Beim Rendern wird BMI je Zeile aus Gewicht und Groesse berechnet
+
+## Nutzerfluss
+
+1. Tabelle oeffnen
+2. Optional filtern und sortieren
+3. Eintraege vergleichen oder loeschen