Develop

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Open Formular.html",
+            "file": "c:\\Users\\OBulai\\Development\\BMI-Web-App-1\\src\\formular\\html\\formular.html"
+        }
+    ]
+}

Plan.md

@@ -1 +0,0 @@
-1. Wasserfall

docs/Formular.md

@@ -0,0 +1,34 @@
+# BMI Form - Input Component
+
+## 📝 Project Description
+This part of the BMI calculator is responsible for **user input**. Users can enter their personal data and calculate their BMI.
+
+## 🎯 Features
+
+### Input Fields
+- **Age** (1-120 years)
+- **Date** (calculation date)
+- **Weight** (1-500 kg)
+- **Height** (50-250 cm)
+
+### Buttons
+- **BMI berechnen** - Starts the calculation
+- **Clear/Reset** - Clears all inputs and results
+
+### 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
+
+
+## 🚀 Usage
+
+1. Open `formular.html` in browser
+2. Fill all 4 input fields
+3. Click "BMI berechnen"
+4. Result is displayed and saved
+5. On reload: Data is still there
+6. "Clear/Reset" deletes all data

gitcommands.txt/gitignore

@@ -0,0 +1,12 @@
+git init 
+git checkout -b new_branch             # create a new branch 
+git branch     # what branches do I have?
+git status 
+
+git pull origin develop 
+git pull origin feature/Formular_Eingabe
+
+git push -u origin feature/Formular_Eingabe
+git push -u origin develop
+
+

src/formular/css/formular.css

@@ -0,0 +1,109 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    margin-top: 20px;
+}
+
+/* Container for form */
+#bmiForm {
+    background: white;
+    max-width: 400px;
+    margin: 20px auto;
+    padding: 25px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e0e0e0;
+}
+
+input[type="number"],
+input[type="date"] {
+    width: 100%;
+    max-width: 350px;
+    margin: 0 auto 15px auto;
+    /* ← Auto links/rechts = zentriert */
+    padding: 12px;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+    font-family: Arial, sans-serif;
+    display: block;
+}
+
+/* Focus state for inputs */
+input[type="number"]:focus,
+input[type="date"]:focus {
+    outline: none;
+    border-color: #4CAF50;
+    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
+}
+
+/* Placeholder styling */
+input::placeholder {
+    color: #888;
+    font-style: italic;
+}
+
+/* Submit button */
+button {
+    width: 100%;
+    padding: 14px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-weight: 500;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+button:active {
+    transform: translateY(1px);
+}
+
+/* Error display */
+#error {
+    display: none;
+    color: #d32f2f;
+    background-color: #ffebee;
+    border: 1px solid #ffcdd2;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 10px;
+    font-size: 14px;
+    text-align: center;
+}
+
+/* Mobile responsive */
+@media (max-width: 480px) {
+    #bmiForm {
+        margin: 10px;
+        padding: 20px;
+    }
+
+    input[type="number"],
+    input[type="date"] {
+        font-size: 14px;
+        padding: 10px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 12px;
+    }
+}

src/formular/html/formular.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>BMI Rechner</title>
+    <link rel="stylesheet" type="text/css" href="../css/formular.css">
+    <script src="../js/formular.js"></script>
+</head>
+
+<body>
+    <h1>BMI Formular</h1>
+    <form id="bmiForm">
+        <input type="number" id="age" name="Age" placeholder="Age (Years)" required min="1" max="120">
+        <input type="date" id="date" name="date" placeholder="Birthday" required>
+        <input type="number" id="weight" name="weight" placeholder="Weight in Kg" required min="1" max="500">
+        <input type="number" id="height" name="height" placeholder="Height in cm" required min="50" max="250">
+        <button type="button" onclick="calculateBMI()">BMI berechnen</button>
+        <button type="button" onclick="clearData()"
+            style="margin-top: 10px; background-color: #f44336;">Clear/Reset</button>
+    </form>
+    <div id="result" style="display:none;">
+        <h2>Ihr BMI Ergebnis</h2>
+        <p id="bmiValue"></p>
+        <p id="bmiCategory"></p>
+    </div>
+    <div id="error"></div>
+</body>
+
+
+</html>

src/formular/js/formular.js

@@ -0,0 +1,169 @@
+// Load saved data when page loads
+window.addEventListener('load', function () {
+    loadFromLocalStorage();
+});
+
+
+function calculateBMI() {
+    // Get input values
+    const age = document.getElementById('age').value;
+    const date = document.getElementById('date').value;
+    const weight = document.getElementById('weight').value;
+    const height = document.getElementById('height').value;
+
+    // Validate inputs
+    const validation = validateInput(age, date, weight, height);
+    if (!validation.isValid) {
+        showError(validation.message);
+        return;
+    }
+
+    // Calculate BMI
+    const heightInMeters = height / 100;
+    const bmi = weight / (heightInMeters * heightInMeters);
+    const bmiRounded = Math.round(bmi * 10) / 10; // 1 decimal place
+
+    // Get BMI category
+    const category = getBMICategory(bmiRounded);
+
+    // Save to Local Storage
+    saveToLocalStorage(age, date, weight, height, bmiRounded, category);
+
+    // Display result
+    displayResult(bmiRounded, category);
+
+    // Hide error messages
+    hideError();
+}
+
+
+// Validate all input fields
+function validateInput(age, date, weight, height) {
+    if (!age || !date || !weight || !height) {
+        return {
+            isValid: false,
+            message: "Bitte füllen Sie alle Felder aus!"
+        };
+    }
+
+    if (age < 1 || age > 120) {
+        return {
+            isValid: false,
+            message: "Alter muss zwischen 1 und 120 Jahren liegen!"
+        };
+    }
+
+    if (weight < 1 || weight > 500) {
+        return {
+            isValid: false,
+            message: "Gewicht muss zwischen 1 und 500 kg liegen!"
+        };
+    }
+
+    if (height < 50 || height > 250) {
+        return {
+            isValid: false,
+            message: "Größe muss zwischen 50 und 250 cm liegen!"
+        };
+    }
+
+    return { isValid: true };
+}
+
+
+// Get BMI category based on value
+function getBMICategory(bmi) {
+    if (bmi < 18.5) {
+        return "Untergewicht";
+    } else if (bmi < 25) {
+        return "Normalgewicht";
+    } else if (bmi < 30) {
+        return "Übergewicht";
+    } else {
+        return "Adipositas";
+    }
+}
+
+
+// Display BMI result
+function displayResult(bmi, category) {
+    document.getElementById('bmiValue').textContent = `Ihr BMI: ${bmi}`;
+    document.getElementById('bmiCategory').textContent = `Kategorie: ${category}`;
+
+    // Add category class for styling
+    const categoryElement = document.getElementById('bmiCategory');
+    categoryElement.className = category.toLowerCase().replace('ü', 'ue').replace('ö', 'oe');
+
+    // Show result area
+    document.getElementById('result').style.display = 'block';
+}
+
+
+// Save data to Local Storage
+function saveToLocalStorage(age, date, weight, height, bmi, category) {
+    const data = {
+        age: age,
+        date: date,
+        weight: weight,
+        height: height,
+        bmi: bmi,
+        category: category,
+        timestamp: new Date().toISOString()
+    };
+
+    localStorage.setItem('bmiData', JSON.stringify(data));
+    console.log('Data saved to Local Storage:', data);
+}
+
+
+// Load data from Local Storage
+function loadFromLocalStorage() {
+    const savedData = localStorage.getItem('bmiData');
+
+    if (savedData) {
+        const data = JSON.parse(savedData);
+
+        // Fill input fields
+        document.getElementById('age').value = data.age || '';
+        document.getElementById('date').value = data.date || '';
+        document.getElementById('weight').value = data.weight || '';
+        document.getElementById('height').value = data.height || '';
+
+        // Show previous result if exists
+        if (data.bmi && data.category) {
+            displayResult(data.bmi, data.category);
+        }
+
+        console.log('Data loaded from Local Storage:', data);
+    }
+}
+
+// Clear all data and reset form
+function clearData() {
+    // Clear Local Storage
+    localStorage.removeItem('bmiData');
+
+    // Clear form inputs
+    document.getElementById('age').value = '';
+    document.getElementById('date').value = '';
+    document.getElementById('weight').value = '';
+    document.getElementById('height').value = '';
+
+    // Hide result and error
+    document.getElementById('result').style.display = 'none';
+    hideError();
+
+    console.log('All data cleared');
+}
+
+// Show error message
+function showError(message) {
+    const errorElement = document.getElementById('error');
+    errorElement.textContent = message;
+    errorElement.style.display = 'block';
+}
+
+// Hide error message
+function hideError() {
+    document.getElementById('error').style.display = 'none';
+}