- initial commit

main.js

@@ -0,0 +1,84 @@
+class CountCalculator {
+  constructor() {
+    // count of the item
+    this.count = 0;
+    this.windowsillType;
+    this.windowsillStrength;
+    // collect form inputs/outputs
+
+    this.lengthInput = document.getElementById("length-input");
+    this.countOutput = document.getElementById("count-output");
+    this.windowsillTypeInput = document.getElementById("windowsill-type-input");
+    this.windowsillStrengthInput = document.getElementById(
+      "windowsill-strength-input"
+    );
+    this.windowsillTypeOutput = document.getElementById(
+      "windowsill-type-output"
+    );
+    this.windowsillStrengthInputContainer = document.getElementById(
+      "windowsill-strength-input-container"
+    );
+
+    // listen for input changes
+    this.lengthInput.addEventListener("change", (e) => {
+      this.handleCountChange(e.target.value);
+    });
+    this.windowsillTypeInput.addEventListener("change", (e) => {
+      this.handleWindowsillTypeChange(e.target.value);
+    });
+    this.windowsillStrengthInput.addEventListener("change", (e) => {
+      this.handleWindowsillStrengthChange(e.target.value);
+    });
+    this.init();
+  }
+
+  init() {
+    this.handleCountChange(this.lengthInput.value);
+    this.handleWindowsillStrengthChange(this.windowsillStrengthInput.value);
+    this.handleWindowsillTypeChange(this.windowsillTypeInput.value);
+    this.updateOutput();
+  }
+
+  updateOutput() {
+    this.countOutput.innerHTML = this.count;
+    console.log(this.windowsillStrength, this.windowsillType);
+    if (this.windowsillType === "custom") {
+      this.windowsillTypeOutput.innerHTML = `Sondergröße: ${
+        (this.windowsillStrength !== "" &&
+          this.windowsillStrength + "er Lehre") ||
+        ""
+      }`;
+    } else {
+      this.windowsillTypeOutput.innerHTML = `${this.windowsillType}er Lehre`;
+    }
+  }
+
+  handleCountChange(value) {
+    this.count = this.calculateCount(value);
+    this.updateOutput();
+  }
+
+  handleWindowsillTypeChange(value) {
+    if (value === "custom") {
+      this.windowsillStrengthInputContainer.style.display = "flex";
+    } else {
+      this.windowsillStrengthInputContainer.style.display = "none";
+    }
+    this.windowsillType = value;
+    this.updateOutput();
+  }
+
+  handleWindowsillStrengthChange(value) {
+    this.windowsillStrength = value;
+    this.updateOutput();
+  }
+
+  calculateCount(length) {
+    let count = length * 3;
+    count = Math.ceil(count / 10) * 10;
+
+    return count;
+  }
+}
+
+new CountCalculator();