diff --git a/.gitignore b/.gitignore
index 9a5aced..0b8ee3b 100644
--- 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
index b572a74..9810af8 100644
--- 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:
-### Javascript
+### JavaScript
-- We will use Charts.js for visualizing Data [chartjs](www.chartjs.org)
+- Chart.js:
+
+## 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
index 92a57e8..cceed92 100644
--- 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)
\ No newline at end of file
+- [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)
\ No newline at end of file
diff --git a/docs/Barchart.md b/docs/Barchart.md
index f55a0c7..531c821 100644
--- 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.
\ No newline at end of file
+## 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
\ No newline at end of file
diff --git a/docs/Dashboard.md b/docs/Dashboard.md
index fcc17e7..2a5e67a 100644
--- 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
index bd80621..390f1fe 100644
--- 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
index 11f5e60..83b4449 100644
--- 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 `