PBA3H22AJO/ProbelaufZoo
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 2 Releases Wiki Activity

Compare commits

base: PBA3H22AJO:0fa9a37b3a584a21ab1d99231e9114e0025e356c
Branches Tags
PBA3H22AJO:main
..
compare: PBA3H22AJO:main
Branches Tags
PBA3H22AJO:main

8 Commits
0fa9a37b3a ... main

Author SHA1 Message Date
JoulianALS
032d40ef47 Tutti Frutti 2024-04-18 16:54:15 +02:00
JoulianALS
3fceb2490a Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:48:00 +02:00
JoulianALS
9d862eea57 HTML CSS sauber 2024-04-18 16:47:57 +02:00
SergejJahne
f41c7b1589 Javascript kommentare 2024-04-18 16:47:42 +02:00
Juwan Jouma
b2b7cfaef7 Update position and alignment of elements in the "patenshop" section 2024-04-18 16:44:11 +02:00
SergejJahne
a76bf5fb2b U groß 2024-04-18 16:39:12 +02:00
JoulianALS
1e61ee7223 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:36:57 +02:00
JoulianALS
3b4a2a1218 Lorem Ipsum bearbeitet 2024-04-18 16:36:49 +02:00
3 changed files with 74 additions and 87 deletions
Expand all files Collapse all files

40
Javascript/app.js
View File

@@ -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) {
initialSelected.classList.add('selected');
}
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) {
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
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 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();
}

7
Styles/style.css
View File

@@ -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;

114
index.html
View File

@@ -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>Text on the Right</h2>
<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>
<h2>Über Uns</h2>
<p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
Finanziert von the only and only Herrn Shawn Smith.</p>
</div>
</div>
</div>
@@ -87,59 +85,57 @@
</section>
<!-- Patenshop Section -->
<!-- Patenshop Section -->
<section id="patenshop" class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-8">
<form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
<div class="col-md-6">
<label for="inputFirstName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputFirstName">
<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">
<label for="inputFirstName" class="form-label">Name</label>
<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">
<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>
</section>
</div>
</section>
<!-- Footer -->
<footer class="container-fluid position-relative">
@@ -152,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>