diff --git a/Plan.md b/Plan.md index f3ef0e7..e69de29 100644 --- a/Plan.md +++ b/Plan.md @@ -1 +0,0 @@ -1. Wasserfall diff --git a/docs/Formular.md b/docs/Formular.md new file mode 100644 index 0000000..00983b1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/formular/css/formular.css b/src/formular/css/formular.css new file mode 100644 index 0000000..402bf39 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/formular/html/formular.html b/src/formular/html/formular.html new file mode 100644 index 0000000..097bcb9 --- /dev/null +++ b/src/formular/html/formular.html @@ -0,0 +1,30 @@ + + + + + BMI Rechner + + + + + +

BMI Formular

+
+ + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/src/formular/js/formular.js b/src/formular/js/formular.js new file mode 100644 index 0000000..51786d7 --- /dev/null +++ b/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'; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 7f1afad..0000000 --- a/src/index.js +++ /dev/null @@ -1 +0,0 @@ -# index