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,28 +1,63 @@
 # 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
-
-- Put all CSS(Cascading Style Sheet) into the `src/<component>/css` Folder the naming should be `css/<component>/feature_name.css` 
-- Put all Javascript files into the `src/<component>/js` Folder the naming should be `js/<component>/feature_name.js`
-- All HTML Files are put directly into the `src/<component>/` Folder named as `src/<component>/feature_name.html`
-
-`<component>` is the name of your component you are working on.
+### Directory Structure
 
+- Feature code belongs in `src/`
+- Documentation belongs in `docs/`
+- Organize feature files by component folder (for example `src/<component>/`)
+- Keep HTML/CSS/JS close to the component where they are used
+- Shared standards and quality rules are defined in this file
 
 ## Technologies
 
 ### CSS
 
-- Bootstrap [bootstrap](https://getbootstrap.com/)
+- Bootstrap: <https://getbootstrap.com/>
+
+### JavaScript
+
+- 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
 
-### Javascript
+# Run a single browser project
+npm run test:e2e:chrome
+npm run test:e2e:edge
+npm run test:e2e:firefox
+```
 
-- We will use Charts.js for visualizing Data [chartjs](www.chartjs.org)
+### Current Test Focus
 
-## Development
+- 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,48 @@
 # BMI-Web-App
-Lerneinheit LF10
+Learning unit LF10
 
-## Getting Started
+## Who Is This App For?
 
-Startet einen lokalen Webserver im Projektverzeichnis:
+The BMI Web App is for users who want to calculate BMI values and review their entries in a simple browser-based interface.
+
+## Quick Start
+
+1. Start a local web server in the project root:
 
 ```bash
 python3 -m http.server 8000
 ```
 
-Oeffnet dann im Browser: [http://localhost:8000](http://localhost:8000)
+2. Open `http://localhost:8000` in your browser.
+3. Use the menu to switch between `Dashboard`, `Forms`, and `Tables`.
 
-> **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.
+Note: Do not open the app via `file://`, because some content is loaded with `fetch()`.
 
-## Documentation
+## What The App Provides
 
-Here you can find the links to the features in this software.
+- BMI calculation with age, date, weight, and height inputs
+- Automatic persistence of the latest values in `localStorage`
+- Table view with filter and sort options for BMI entries
+- Dashboard as a central entry point and overview
+
+## Views Overview
 
 - [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)
+
+## Common Issues
+
+- **Blank page or loading errors:** start the app through an HTTP server (see Quick Start).
+- **Outdated data:** clear browser `localStorage` or reset data inside the app.
+- **Layout issues:** refresh the page and use an up-to-date browser version.
+
+## Developer Documentation
+
+Development standards, testing, and quality guidance:
+
+- [Contributing Guide](./CONTRIBUTING.md)
+- [Documentation Index](./docs/README.md)
diff --git a/docs/Barchart.md b/docs/Barchart.md
@@ -1,3 +1,30 @@
-# Overview
+# Barchart
 
-The Barchart shows the historical development of BMI of the current user in bars over time.
+## Purpose
+
+The Barchart view visualizes BMI history as a bar chart.
+
+## What This View Provides
+
+- Visualization of BMI values over time
+- Color-coded bars by BMI range
+- Persistence of chart history in browser `localStorage`
+
+## Data Source
+
+- Uses local `bmiHistory` data from `localStorage`
+- Height is currently a fixed value in the code
+- Chart label/value source:
+  - `labels`: `entry.date`
+  - `data`: `entry.bmi`
+
+## User Flow
+
+1. Open the view
+2. Existing `bmiHistory` data is rendered as bars
+3. Reload the page and confirm the chart still renders persisted history
+
+## Technical Note
+
+`addBMI()` exists in `src/barchart/script.js`, but `src/barchart/barchart.html` currently has no input field or button that calls it.  
+In the current UI, this view is effectively read-only unless `addBMI()` is triggered externally.
diff --git a/docs/Dashboard.md b/docs/Dashboard.md
@@ -1,51 +1,28 @@
-# Dashboard Documentation
+# Dashboard
 
-## Überblick
+## Purpose
 
-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.
+The Dashboard is the app entry view. It provides an overview and acts as the central navigation point.
 
-## Ziel / Zweck
+## What This View Provides
 
-- **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
+- Page title area: `Dashboard`
+- Embedded Bar Chart iframe (`../barchart/barchart.html`)
+- Embedded Line Chart iframe (`../line_chart/line_chart.html`)
+- Embedded Tables iframe (`../tables/tables.html`)
+- Sidebar navigation (`Dashboard`, `Forms`, `Tables`)
 
----
+## User Flow
 
-## Projektstruktur (relevant)
+1. Open the app and load Dashboard
+2. Review embedded chart and table sections
+3. Use the sidebar to switch views (`#dashboard`, `#formular`, `#tables`)
 
-Typische Struktur (Auszug):
+## Technical Note
 
-- `index.html` (Projekt-Root)  
-  Einstiegspunkt. Leitet auf die App weiter.
+The route content is injected into `#view` by `src/dashboard/dashboard.js`.  
+Routing is hash-based and currently mapped as:
 
-- `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
-```
+- `#dashboard` -> `./dashboard/dashboard.html`
+- `#formular` -> `./formular/formular.html`
+- `#tables` -> `./tables/tables.html`
diff --git a/docs/Formular.md b/docs/Formular.md
@@ -1,30 +1,30 @@
-# 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.
+## Purpose
 
-## 🎯 Features
+This view collects user data and calculates BMI with a category result.
 
-### Input Fields
-- **Age** (1-120 years)
-- **Date** (calculation date)
-- **Weight** (1-500 kg)
-- **Height** (50-250 cm)
+## What This View Provides
 
-### Buttons
-- **BMI berechnen** - Starts the calculation
-- **Clear/Reset** - Clears all inputs and results
+- Input fields for:
+  - Age (1-120)
+  - Date
+  - Weight in kg (1-500)
+  - Height in cm (50-250)
+- **BMI berechnen** button
+- Button **Clear/Reset**
+- Result area with BMI value and category
+- Error area for invalid inputs
 
-### 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
+## Logic and Behavior
 
+- Inputs are validated before calculation
+- BMI formula: `weight / (height in m)^2`
+- Category mapping: Underweight, Normal weight, Overweight, Obesity
+- Each calculation is appended to `localStorage['bmiData']` as a history entry
+- On load, the last history entry is restored into the form
 
-## 🚀 Usage
+## User Flow
 
 1. Open `formular.html` in browser
 2. Fill all 4 input fields
@@ -33,39 +33,40 @@ This part of the BMI calculator is responsible for **user input**. Users can ent
 5. On reload: Data is still there
 6. "Clear/Reset" deletes all data
 
+## Local Storage
 
-## 💾 LocalStorage
+**Key:** `localStorage['bmiData']`
 
-**Speicherort:** `localStorage['bmiData']`
-
-Daten werden nach der Berechnung als JSON-String gespeichert:
+Data is saved as a JSON array after each calculation:
 
 ```json
-{
+[
+  {
     "age": "25",
     "date": "2025-02-23",
     "weight": "75",
     "height": "180",
     "bmi": 23.1,
     "category": "Normalgewicht",
-    "timestamp": "2025-02-23T14:30:45.123Z" // new Date().toISOString()
-}
+    "timestamp": "2025-02-23T14:30:45.123Z"
+  }
+]
 ```
 
-### Daten extrahieren
+### Read Data
 ```javascript
-// Einfaches Auslesen
-const data = JSON.parse(localStorage.getItem('bmiData'));
-console.log(data.bmi, data.category);
-
-// Mit Null-Check
-if (localStorage.getItem('bmiData')) {
-    const data = JSON.parse(localStorage.getItem('bmiData'));
-    console.log('Gespeicherte Daten:', data);
+// Read full history
+const history = JSON.parse(localStorage.getItem("bmiData") || "[]");
+console.log(history.length);
+
+// Read last entry
+if (history.length > 0) {
+  const latest = history[history.length - 1];
+  console.log(latest.bmi, latest.category);
 }
 ```
 
-### Daten löschen
+### Delete Data
 ```javascript
-localStorage.removeItem('bmiData');
+localStorage.removeItem("bmiData");
 ```
diff --git a/docs/Linechart.md b/docs/Linechart.md
@@ -1,15 +1,23 @@
-# Overview
+# Linechart
 
-The line chart visualizes the BMI Data over time.
+## Purpose
 
-## Data
+The Linechart view shows BMI values as a trend line over time.
 
-Currently the data uses a mock object which contains all datapoints. Later on it should read the necessary data
-from the local storage. 
+## What This View Provides
 
-# Integration
+- BMI data visualization as a line chart
+- Rendering on a `canvas` element
+- Trend-based view instead of single-value focus
 
-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.
+## Current Data State
 
-__NOTE__: The Linechart must be a element of type `<canvas>`
+- `plotChart("bmi-chart")` is executed on load
+- The implementation reads `localStorage['bmiData']` into `rawPlotData`
+- Current chart configuration references `plotData`, which is not defined in the file
+
+## Integration Notes
+
+- Chart logic expects a `canvas` element
+- Default canvas id in this view: `bmi-chart`
+- Without a defined `plotData` source, the current implementation may fail at runtime