Tutti Frutti

Javascript/app.js

@@ -8,32 +8,23 @@ 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 initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
-  if (initialSelected) {
+var navLinks = document.querySelectorAll('.navbar .nav-link');
+var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
+if (initialSelected) {
     initialSelected.classList.add('selected');
-  }
+}
 
-  navLinks.forEach(function(link) {
+navLinks.forEach(function(link) {
     link.addEventListener('click', function() {
         // Alle anderen Links zurücksetzen
         navLinks.forEach(l => l.classList.remove('selected'));
         // Die 'selected' Klasse zum angeklickten Link hinzufügen
         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
-document.addEventListener('DOMContentLoaded', function() {
-  updatePrice();  // Initialer Preis wird beim Laden der Seite gesetzt
-});
+updatePrice(); 
 
 function updatePrice() {
   const fresserchenSelect = document.getElementById('Fresserchen');
@@ -43,10 +34,11 @@ function updatePrice() {
   const pricePerUnit = selectedFood.getAttribute('data-price');
   const quantity = mengeSelect.value;
   const total = pricePerUnit * quantity;
-  priceInput.value = total.toFixed(2);  // Preis wird im Preisfeld angezeigt
+  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,7 +46,6 @@
                         </div>
                     </div>
                     <div class="col">
-                        <!-- Text on the right -->
                         <h2>Über Uns</h2>
                         <p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
                            Finanziert von the only and only Herrn Shawn Smith.</p>
@@ -88,9 +85,8 @@
         </section>
 
         <!-- Patenshop Section -->
-<!-- Patenshop Section -->
-<section id="patenshop" class="container-fluid">
-    <div class="row justify-content-center">
+        <section id="patenshop" class="container-fluid position-relative">
+            <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
                 <div class="col-md-8">
                     <form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
                         <div class="col-md-6">
@@ -139,8 +135,7 @@
                     </form>
                 </div>
             </div>
-</section>
-
+        </section>
 
         <!-- Footer -->
         <footer class="container-fluid position-relative">