Wie kann ich in HTML Fefco 0201 berechnen?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Box Oberfläche</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .container { width: 600px; background: #666; padding: 15px; border-radius: 5px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); color: white; } .header { background: white; color: black; display: inline-block; padding: 5px; font-weight: bold; } .input-group { display: flex; align-items: center; margin: 10px 0; } .input-group label { background: white; color: black; padding: 5px; font-weight: bold; width: 80px; text-align: center; } .input-group input { width: 100px; padding: 5px; margin: 0 5px; text-align: center; border: 1px solid #ccc; background: white; color: black; } .unit-group { display: inline-flex; margin-right: 10px; } .unit-group input { margin-right: 0; } .unit-group input, .unit-group .unit { height: 35px; } .unit { display: inline-block; padding: 5px; background: white; color: black; font-weight: bold; border: 1px solid #ccc; text-align: center; } .result { margin-top: 20px; } .result label { background: white; color: black; padding: 5px; font-weight: bold; width: auto; } .result .input-group { white-space: nowrap; } .input-group label, .unit-group input, .unit-group .unit { height: 35px; line-height: 35px; padding: 0; } </style> </head> <body> <div class="container"> <div class="header">Box</div> <div class="input-group"> <label>Länge</label> <div class="unit-group"> <input type="number" id="length" min="0"> <div class="unit">mm</div> </div> <label>Breite</label> <div class="unit-group"> <input type="number" id="width" min="0"> <div class="unit">mm</div> </div> <label>Höhe</label> <div class="unit-group"> <input type="number" id="height" min="0"> <div class="unit">mm</div> </div> </div> <!-- Neue Eingabefelder für "Sorte" und "Welle" --> <div class="input-group"> <label>Sorte</label> <input type="text" id="sorte"> <label>Welle</label> <input type="text" id="welle"> </div> <div class="result"> <div class="header">Ergebnis</div> <div class="input-group"> <input type="text" id="result_m2" readonly> <label>Verbrauch in m²</label> </div> <div class="input-group"> <input type="text" id="result_kg" readonly> <label>Verbrauch in KG</label> </div> </div> </div> <script> function calculateArea() { const l = Math.max(0, parseFloat(document.getElementById('length').value) || 0); const w = Math.max(0, parseFloat(document.getElementById('width').value) || 0); const h = Math.max(0, parseFloat(document.getElementById('height').value) || 0); // Berechnung der Fläche in m² const area_mm2 = 7.5 * (l * w + l * h + w * h); const area_m2 = area_mm2 / 1000000; document.getElementById('result_m2').value = area_m2.toFixed(3); // Berechnung des Gewichts (hier als Platzhalter: 0.5 kg pro m²) const gewicht_pro_m2 = 0.5; // Diesen Wert ggf. anpassen const gewicht_kg = area_m2 * gewicht_pro_m2; document.getElementById('result_kg').value = gewicht_kg.toFixed(3); } // Event Listener für automatische Berechnung document.getElementById('length').addEventListener('input', calculateArea); document.getElementById('width').addEventListener('input', calculateArea); document.getElementById('height').addEventListener('input', calculateArea); </script> </body> </html> <div class="result"> <button class="button" id="calculateBtn">Ergebnis</button><div class="input-group"><input type="text" id="result" readonly> <label>Verbrauch in m²</label> </div> .button { background-color: white; color: #4CAF50; padding: 10px15px; border: 2px solid #4CAF50; border-radius: 5px; cursor: pointer; font-size: 16px; margin-bottom: 10px; } .button:hover { background-color: #4CAF50; color: white;