diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cbb4eaf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+ FeBaFix Rechner
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..a08c7b1
--- /dev/null
+++ b/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();