Updated

finda-App-Official · Feb 16, 2024 · 32a3f88 · 32a3f88
1 parent b19f805
commit 32a3f88
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 8 deletions.
diff --git a/src/unternehmen/price.js b/src/unternehmen/price.js
@@ -0,0 +1,82 @@
+document
+  .getElementById("content-item-stellen-count-1")
+  .addEventListener("change", (ev) => {
+    let value = document.getElementById("content-item-stellen-count-1").value;
+    if (parseInt(value) < 1) {
+      return (document.getElementById(
+        "content-item-stellen-count-1"
+      ).value = 1);
+    }
+
+    let gesamt = document.getElementById("gesamt-1");
+    let premium = document.getElementById("premium-check-1").checked;
+    let dauer = document.getElementById("content-dauer-select-1").value;
+
+    if (dauer === "6") {
+      let gesamtCalc = value * 6 * 6;
+      if (premium) {
+        gesamtCalc *= 1.5;
+      }
+      gesamt.innerHTML = gesamtCalc;
+    } else if (dauer === "12") {
+      let gesamtCalc = value * 5.5 * 12;
+      if (premium) {
+        gesamtCalc *= 1.5;
+      }
+      gesamt.innerHTML = gesamtCalc;
+    }
+  });
+document
+  .getElementById("content-dauer-select-1")
+  .addEventListener("change", (ev) => {
+    let input = document.getElementById("content-item-stellen-count-1").value;
+    let premium = document.getElementById("premium-check-1").checked;
+    let gesamt = document.getElementById("gesamt-1");
+    let value = document.getElementById("content-dauer-select-1").value;
+    if (value === "6") {
+      document.getElementById("preis-1").innerHTML =
+        "Anzahl Stellen (6€/Stelle)";
+      let gesamtCalc = input * 6 * 6;
+
+      if (premium) {
+        gesamt.innerHTML = gesamtCalc * 1.5;
+      } else {
+        gesamt.innerHTML = gesamtCalc;
+      }
+    } else if (value === "12") {
+      document.getElementById("preis-1").innerHTML =
+        "Anzahl Stellen (5.50€/Stelle)";
+      let gesamtCalc = input * 5.5 * 12;
+      if (premium) {
+        gesamt.innerHTML = gesamtCalc * 1.5;
+      } else {
+        gesamt.innerHTML = gesamtCalc;
+      }
+    }
+  });
+document.getElementById("premium-check-1").addEventListener("change", (ev) => {
+  let value = document.getElementById("premium-check-1").checked;
+  let gesamtValue = document.getElementById("gesamt-1").innerHTML;
+  if (value) {
+    document.getElementById("gesamt-1").innerHTML = parseInt(gesamtValue) * 1.5;
+  } else {
+    document.getElementById("gesamt-1").innerHTML = parseInt(gesamtValue) / 1.5;
+  }
+});
+document
+  .getElementById("content-dauer-select-2")
+  .addEventListener("change", (ev) => {
+    let gesamt = document.getElementById("gesamt-2");
+    let value = document.getElementById("content-dauer-select-2").value;
+    if (value === "6") {
+      gesamt = "520";
+    } else if (value === "12") {
+      gesamt = "999";
+    }
+  });
+document.getElementById("premium-check-2").addEventListener("change", (ev) => {
+  let value = document.getElementById("premium-check-2").checked;
+  if (!value) {
+    document.getElementById("premium-check-2").checked = true;
+  }
+});
diff --git a/src/unternehmen/style.css b/src/unternehmen/style.css
@@ -12,7 +12,7 @@
   margin: auto;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
   padding: 20px;
   flex-wrap: wrap;
 }

diff --git a/unternehmen.html b/unternehmen.html
@@ -72,12 +72,12 @@
         <div class="section-content">
           <div class="section-content-item">
             <div class="content-item-topbar">
-              <div class="content-item-title">Flatrate</div>
+              <div class="content-item-title">Starter</div>
               <div class="content-item-info">i</div>
             </div>
             <div class="content-item-stellen">
-              <div class="content-item-stellen-text">
-                Anzahl Stellen (5,50€/Stelle)
+              <div class="content-item-stellen-text" id="preis-1">
+                Anzahl Stellen (6€/Stelle)
               </div>
               <input
                 type="number"
@@ -95,18 +95,58 @@
               <option value="12">12 Monate</option>
             </select>
             <div class="content-item-premium">
-              <input type="checkbox" />
+              <input type="checkbox" id="premium-check-1" />
               <div class="content-item-premium-text">
-                Premium: +25% des Preises
+                Premium: +50% des Preises
               </div>
             </div>
             <div class="content-item-gesamt">
               <div class="content-item-gesamt-text">
                 Gesamtpreis:
-                <span class="content-item-gesamt-preis">5,50€</span>
+                <span class="content-item-gesamt-preis" id="gesamt-1">36</span>€
               </div>
             </div>
-            <button class="content-item-book"><span>Buchen</span></button>
+            <button class="content-item-book">
+              <span> In der App buchen</span>
+            </button>
+          </div>
+          <div class="section-content-item">
+            <div class="content-item-topbar">
+              <div class="content-item-title">Unlimited Access</div>
+              <div class="content-item-info">i</div>
+            </div>
+            <div class="content-item-stellen">
+              <div class="content-item-stellen-text">Anzahl Stellen</div>
+              <input
+                type="text"
+                class="content-item-stellen-count"
+                id="content-item-stellen-count-1"
+                value="∞"
+                disabled
+              />
+            </div>
+            <select
+              name="content-dauer"
+              id="content-dauer-select-2"
+              class="content-item-dauer-select"
+            >
+              <option value="6">6 Monate</option>
+              <option value="12">12 Monate</option>
+            </select>
+            <div class="content-item-premium">
+              <input type="checkbox" checked id="premium-check-2" />
+              <div class="content-item-premium-text">Premium inklusive</div>
+            </div>
+            <div class="content-item-gesamt">
+              <div class="content-item-gesamt-text">
+                Gesamtpreis:
+                <span class="content-item-gesamt-preis" id="gesamt-2">520</span
+                >€
+              </div>
+            </div>
+            <button class="content-item-book">
+              <span>In der App buchen</span>
+            </button>
           </div>
         </div>
       </section>
@@ -222,5 +262,6 @@
         </div>
       </div>
     </footer>
+    <script src="/src/unternehmen/price.js"></script>
   </body>
 </html>