Tutti Frutti

Javascript/app.js

@@ -8,25 +8,37 @@ const swiper = new Swiper('.swiper', {
 });
 
 // Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
-document.addEventListener("DOMContentLoaded", function() {
+var navLinks = document.querySelectorAll('.navbar .nav-link');
-  var navLinks = document.querySelectorAll('.navbar .nav-link');
+var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
-  var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
+if (initialSelected) {
-  if (initialSelected) {
+    initialSelected.classList.add('selected');
-      initialSelected.classList.add('selected');
+}
-  }
 
-  navLinks.forEach(function(link) {
+navLinks.forEach(function(link) {
-      link.addEventListener('click', function() {
+    link.addEventListener('click', function() {
-          // Alle anderen Links zurücksetzen
+        // Alle anderen Links zurücksetzen
-          navLinks.forEach(l => l.classList.remove('selected'));
+        navLinks.forEach(l => l.classList.remove('selected'));
-          // Die 'selected' Klasse zum angeklickten Link hinzufügen
+        // Die 'selected' Klasse zum angeklickten Link hinzufügen
-          link.classList.add('selected');
+        link.classList.add('selected');
-      });
+    });
-  });
-});
-// Für Patenshop
-document.getElementById('donationForm').addEventListener('submit', function(event) {
-  event.preventDefault(); // Verhindert die tatsächliche Formularübermittlung
-  alert('Alles in Ordnung. Vielen Dank für Ihre Spende!');
-  this.reset(); // Setzt das Formular zurück
 });
+
+// Für Preis
+updatePrice(); 
+
+function updatePrice() {
+  const fresserchenSelect = document.getElementById('Fresserchen');
+  const mengeSelect = document.getElementById('Menge');
+  const priceInput = document.getElementById('Preis');
+  const selectedFood = fresserchenSelect.options[fresserchenSelect.selectedIndex];
+  const pricePerUnit = selectedFood.getAttribute('data-price');
+  const quantity = mengeSelect.value;
+  const total = pricePerUnit * quantity;
+  priceInput.value = total.toFixed(2);  
+}
+
+function showDonationAmount() {
+  const priceInput = document.getElementById('Preis').value;
+  alert('Danke für deine Spende von €' + priceInput + '!');
+  window.location.reload();
+}

Styles/style.css

@@ -4,7 +4,7 @@
     height: 70px;
 }
 
-.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern  */
+.navbar .navbar-nav .nav-link {
     color: #FFFFFF; 
     font-size:  13pt;
 }
@@ -17,7 +17,7 @@
     padding-left: 10px; 
 }
 
-.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */
+.nav-link.selected::after {
     visibility: visible;
     transform: scaleX(1);
 }
@@ -28,7 +28,7 @@
     color: #FFFFFF; 
 }
 
-.nav-link { /* Animation für das die Links */
+.nav-link {
     position: relative;
     transition: all 0.3s ease-out;
 }
@@ -80,7 +80,6 @@ section {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 
-    /* Animation */
     scale: .8;
     opacity: 0;
     animation: fade-in linear forwards;

index.html

@@ -21,7 +21,7 @@
               </button>
               <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                   <div class="navbar-nav ms-auto">
-                      <a class="nav-link" aria-current="page" href="#ueberUns">Über uns</a>
+                      <a class="nav-link" aria-current="page" href="#ueberUns">Über Uns</a>
                       <a class="nav-link" href="#openingHours">Öffnungszeiten</a>
                       <a class="nav-link" href="#patenshop">Patenshop</a>  
                   </div>
@@ -32,12 +32,10 @@
         <!-- Über Uns Section -->
         <section class="position-relative" id="ueberUns">
             <div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
-                <!-- Slider on the left -->
                 <div class="row align-items-center">
                     <div class="col">
                         <div class="swiper rounded-4">
                             <div class="swiper-wrapper">
-                                <!-- Slides -->
                                 <div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
                                 <div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
                                 <div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
@@ -48,9 +46,9 @@
                         </div>
                     </div>
                     <div class="col">
-                        <!-- Text on the right -->
+                        <h2>Über Uns</h2>
-                        <h2>Text on the Right</h2>
+                        <p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, justo eget sagittis malesuada, leo velit lobortis orci, ac sodales lectus ipsum in libero. Phasellus hendrerit justo et risus blandit, nec ultricies ligula facilisis. Pellentesque luctus, justo id vehicula consectetur, metus tortor auctor felis, eget eleifend lorem neque eget lectus. Cras semper, velit non gravida pellentesque, elit lectus rhoncus eros, nec malesuada est nulla eu metus.</p>
+                           Finanziert von the only and only Herrn Shawn Smith.</p>
                     </div>
                 </div>
             </div>
@@ -87,63 +85,57 @@
         </section>
 
         <!-- Patenshop Section -->
-<!-- Patenshop Section -->
+        <section id="patenshop" class="container-fluid position-relative">
-<section id="patenshop" class="container">
+            <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
-    <div class="row justify-content-center">
+                <div class="col-md-8">
-        <div class="col-md-8">
+                    <form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
-            <form class="row g-3">
+                        <div class="col-md-6">
-                <div class="col-md-6">
+                            <label for="inputFirstName" class="form-label">Name</label>
-                    <label for="inputFirstName" class="form-label">Name</label>
+                            <input type="text" class="form-control" id="inputFirstName">
-                    <input type="text" class="form-control" id="inputFirstName">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="inputLastName" class="form-label">Nachname</label>
+                            <input type="text" class="form-control" id="inputLastName">
+                        </div>
+                        <div class="col-md-12">
+                            <label for="inputEmail4" class="form-label">Email</label>
+                            <input type="email" class="form-control" id="inputEmail4">
+                        </div>
+                        <div class="col-md-12">
+                            <label for="IBAN" class="form-label">IBAN</label>
+                            <input type="text" class="form-control" id="inputText">
+                        </div>
+                        <div class="col-md-3">
+                            <label for="Fresserchen" class="form-label">Fresserchen</label>
+                            <select id="Fresserchen" class="form-select" onchange="updatePrice()">
+                                <option value="Steak" data-price="20">Steak</option>
+                                <option value="Fisch" data-price="15">Fisch</option>
+                                <option value="Beeren" data-price="10">Beeren</option>
+                                <option value="Nüsse" data-price="8">Nüsse</option>
+                                <option value="Gras" data-price="5">Gras</option>
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <label for="Menge" class="form-label">Menge</label>
+                            <select id="Menge" class="form-select" onchange="updatePrice()">
+                                <option>1</option>
+                                <option>2</option>
+                                <option>3</option>
+                                <option>4</option>
+                                <option>5</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="Preis" class="form-label">Preis (€)</label>
+                            <input type="text" class="form-control" id="Preis" readonly>
+                        </div>
+                        <div class="col-12 text-center mt-4">
+                            <button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
+                        </div>
+                    </form>
                 </div>
-                <div class="col-md-6">
+            </div>
-                    <label for="inputLastName" class="form-label">Nachname</label>
+        </section>
-                    <input type="text" class="form-control" id="inputLastName">
-                </div>
-                <div class="col-md-12">
-                    <label for="inputEmail4" class="form-label">Email</label>
-                    <input type="email" class="form-control" id="inputEmail4">
-                </div>
-                <div class="col-md-12">
-                    <label for="IBAN" class="form-label">IBAN</label>
-                    <input type="text" class="form-control" id="inputText">
-                </div>
-                <div class="col-md-3">
-                    <label for="Fresserchen" class="form-label">Fresserchen</label>
-                    <select id="Fresserchen" class="form-select">
-                        <option selected>Steak</option>
-                        <option>Fisch</option>
-                        <option>Beeren</option>
-                        <option>Nüsse</option>
-                        <option>Gras</option>
-                    </select>
-                </div>
-                <div class="col-md-3">
-                    <label for="Menge" class="form-label">Menge</label>
-                    <select id="Menge" class="form-select">
-                        <option selected>1</option>
-                        <option>2</option>
-                        <option>3</option>
-                        <option>4</option>
-                        <option>5</option>
-                    </select>
-                </div>
-                <div class="col-12">
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" id="gridCheck">
-                        <label class="form-check-label" for="gridCheck">
-                            I agree to donate all my money
-                        </label>
-                    </div>
-                </div>
-                <div class="col-12">
-                    <button type="submit" class="btn btn-primary">Spenden</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</section>
-
 
         <!-- Footer -->
         <footer class="container-fluid position-relative">
@@ -156,6 +148,6 @@
         <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
         <script src="Javascript/app.js"></script>
-
+        
     </body>
 </html>