Compare commits
8 Commits
KTS_PHP_Pr
...
master
Author | SHA1 | Date |
---|---|---|
Robin Schumann | f1df6268b3 | |
Eline Steinbrecher | 085e83129d | |
Robin Schumann | 3d30ddcd4f | |
Robin Schumann | 1e89b8cf5c | |
Robin Schumann | ef2cae3dfe | |
spagb0l | 5bc9bf7767 | |
spagb0l | e020831e4e | |
Robin Schumann | 849b62274e |
|
@ -124,13 +124,13 @@
|
|||
<p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
|
||||
|
||||
<p>
|
||||
<input type="checkbox" class="checkbox_ausrichtung">
|
||||
<input id="barzahlung_box" type="checkbox" class="checkbox_ausrichtung">
|
||||
<label for="checkbox_barzahlung" class="checkboxen">Ich akzeptiere die Barzahlung und habe
|
||||
den</br>Rechnungsbetrag bei
|
||||
Lieferung verfügbar.</label>
|
||||
</p>
|
||||
<p>
|
||||
<input type="checkbox" class="checkbox_ausrichtung">
|
||||
<input id="datenschutz_box" type="checkbox" class="checkbox_ausrichtung">
|
||||
<label for="checkbox_datenschutzerklärung" class="checkboxen">Ich akzeptiere die Bestimmungen der</label>
|
||||
<a href="datenschutz.html" class="checkboxen">Datenschutzerklärung.</a>
|
||||
</p>
|
||||
|
|
|
@ -147,6 +147,11 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.content h3{
|
||||
color: black;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.content a {
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
|
|
@ -81,7 +81,7 @@
|
|||
.navbar-mobile {
|
||||
display:grid;
|
||||
grid-template-columns: 60px auto auto;
|
||||
grid-template-rows: 60px;
|
||||
grid-template-rows: 65px;
|
||||
|
||||
}
|
||||
.navbar-mobile .nav-container a {
|
||||
|
@ -160,6 +160,8 @@
|
|||
padding-left: 50px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.nav-container input[type="checkbox"]:checked ~ .menu-items {
|
||||
|
@ -233,7 +235,7 @@
|
|||
}
|
||||
|
||||
.content :not(h1, strong, a) {
|
||||
margin-left: 3.5em;
|
||||
margin-left: 0em;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
|
@ -249,6 +251,11 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.content h3{
|
||||
color: black;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.content a {
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
@ -300,7 +307,7 @@
|
|||
#wohnort,
|
||||
#email {
|
||||
border: none;
|
||||
width: 600px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bestellung_tabelle {
|
||||
|
@ -312,6 +319,7 @@
|
|||
margin-left: 50px;
|
||||
border: thin solid #606060;
|
||||
border-collapse: collapse;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bestellung_tabelle th {
|
||||
|
@ -320,7 +328,7 @@
|
|||
|
||||
.bestellung_tabelle td {
|
||||
border: thin solid #606060;
|
||||
width: 600px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bestellung_tabelle tr {
|
||||
|
@ -414,40 +422,50 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.produkte_warenkorb {
|
||||
.content .produkte_warenkorb {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
border: thin solid black;
|
||||
margin-left: -55px;
|
||||
margin-left: 4em;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
justify-items: left;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.content .produkte_warenkorb .bild_mobil img {
|
||||
margin-left: -50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content .produkte_details {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.8em;
|
||||
justify-content: left;
|
||||
margin-top: -25px;
|
||||
justify-content: space-between;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.content .produkte_details p{
|
||||
margin-left: 0;
|
||||
.content .produkte_details p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.content .produkte_warenkorb .produkte_details .eingabefeld_entfernen {
|
||||
align-self: flex-end;
|
||||
margin-top: -30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.button_mit_menue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button_mit_menue p{
|
||||
margin-left: -45px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#menue1,
|
||||
|
@ -461,6 +479,8 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button_entfernen {
|
||||
background-color: #ebebeb;
|
||||
border: thin solid black;
|
||||
|
@ -533,8 +553,8 @@
|
|||
position: relative;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
padding-left: 50px;
|
||||
margin-top: 22.5px;
|
||||
padding-left: 30px;
|
||||
margin-top: 120px;
|
||||
margin-left: auto;
|
||||
margin-bottom: 22.5px;
|
||||
display: grid;
|
||||
|
@ -595,9 +615,18 @@
|
|||
}
|
||||
|
||||
.content .mobile_ansicht{
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin-left: -55px;
|
||||
}
|
||||
|
||||
|
||||
#fehlerbox{
|
||||
text-align: center;
|
||||
color: red;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop_ansicht{
|
||||
display: none;
|
||||
}
|
|
@ -80,13 +80,13 @@
|
|||
</p>
|
||||
<p>Stand: 6. April 2023</p>
|
||||
<h3>Verantwortlicher</h3>
|
||||
<ul>
|
||||
<p>
|
||||
WEB A4 -Team</br>
|
||||
Paul-Wittsack-Straße 10</br>
|
||||
68163 Mannheim</br>
|
||||
E-Mail-Adresse:</br>
|
||||
info@secondharvest.com</br>
|
||||
</ul>
|
||||
</p>
|
||||
<h3>Übersicht der Verarbeitungen</h3>
|
||||
<p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die
|
||||
Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php $websitename; ?></title>
|
||||
<style>
|
||||
@import 'css/mobile.css' (max-width: 800px);
|
||||
@import 'css/desktop.css' (min-width: 801px);
|
||||
</style>
|
||||
</head>
|
|
@ -1,51 +0,0 @@
|
|||
|
||||
<header>
|
||||
<nav>
|
||||
<div class="navbar-mobile">
|
||||
<div class="nav-container" >
|
||||
<input class="checkbox" type="checkbox" name="" id="" />
|
||||
<div class="hamburger-lines">
|
||||
<span class="line line1"></span>
|
||||
<span class="line line2"></span>
|
||||
<span class="line line3"></span>
|
||||
</div>
|
||||
<div class="navbar menu-items">
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="produkte.html">Produkte</a>
|
||||
<a href="warenkorb.html">Warenkorb</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-mobile-farbe">
|
||||
<span class="header-mobile-text">
|
||||
<h1>Second Harvest</h1>
|
||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||
</span>
|
||||
</div>
|
||||
<div id="header-mobile-farbe" class="header-mobile-logo">
|
||||
<a href="index.html">
|
||||
<img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="header_logo">
|
||||
<a href="index.html">
|
||||
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||
</div>
|
||||
<div class="header_desktop">
|
||||
<h1>Second Harvest</h1>
|
||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||
</div>
|
||||
<div class="header_desktop">
|
||||
<nav class="navbar-desktop" style="--items: 4;">
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="produkte.html">Produkte</a>
|
||||
<a href="warenkorb.html">Warenkorb</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
|
@ -0,0 +1,116 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Second Harvest</title>
|
||||
<style>
|
||||
@import 'css/mobile.css' (max-width: 800px);
|
||||
@import 'css/desktop.css' (min-width: 801px);
|
||||
</style>
|
||||
</head>
|
||||
<body class="index">
|
||||
<header>
|
||||
<nav>
|
||||
<div class="navbar-mobile">
|
||||
<div class="nav-container" >
|
||||
<input class="checkbox" type="checkbox" name="" id="" />
|
||||
<div class="hamburger-lines">
|
||||
<span class="line line1"></span>
|
||||
<span class="line line2"></span>
|
||||
<span class="line line3"></span>
|
||||
</div>
|
||||
<div class="navbar menu-items">
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="produkte.html">Produkte</a>
|
||||
<a href="warenkorb.html">Warenkorb</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-mobile-farbe">
|
||||
<span class="header-mobile-text">
|
||||
<h1>Second Harvest</h1>
|
||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||
</span>
|
||||
</div>
|
||||
<div id="header-mobile-farbe" class="header-mobile-logo">
|
||||
<a href="index.html">
|
||||
<img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="header_logo">
|
||||
<a href="index.html">
|
||||
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||
</div>
|
||||
<div class="header_desktop">
|
||||
<h1>Second Harvest</h1>
|
||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||
</div>
|
||||
<div class="header_desktop">
|
||||
<nav class="navbar-desktop" style="--items: 4;">
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="produkte.html">Produkte</a>
|
||||
<a href="warenkorb.html">Warenkorb</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h1>Herzlich Willkommen</h1>
|
||||
<p>Wir freuen uns über Deinen Besuch.</p>
|
||||
<p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
|
||||
verschwenden.</p>
|
||||
<br />
|
||||
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_rot.png"></td>
|
||||
<td>muss sofort verarbeitet werden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_gelb.png"></td>
|
||||
<td>kann ein paar Tage liegen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_gruen.png"></td>
|
||||
<td>lange Haltbarkeit</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
|
||||
etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
|
||||
<strong>noch am selben Tag</strong>
|
||||
ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
|
||||
</p>
|
||||
</br>
|
||||
<p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
|
||||
|
||||
<a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
|
||||
<a class="beispiel_produkte" href="produkte.html">
|
||||
<img src="pictures/sellerie.png" alt="Sellerie"></a>
|
||||
<p>
|
||||
<a class= "button_produkte" href="produkte.html">zu den Produkten</a>
|
||||
</p>
|
||||
<h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
|
||||
<h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar-desktop" style="--items: 2;">
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="datenschutz.html">Datenschutz</a>
|
||||
</nav>
|
||||
<div id="balken"></div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -1,61 +0,0 @@
|
|||
<?php
|
||||
$websitename = "Second Harvest - Startseite";
|
||||
include_once("includes/head.php");
|
||||
?>
|
||||
<body class="index">
|
||||
<?php
|
||||
include_once("includes/header.php");
|
||||
?>
|
||||
|
||||
<div class="content">
|
||||
<h1>Herzlich Willkommen</h1>
|
||||
<p>Wir freuen uns über Deinen Besuch.</p>
|
||||
<p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
|
||||
verschwenden.</p>
|
||||
<br />
|
||||
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_rot.png"></td>
|
||||
<td>muss sofort verarbeitet werden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_gelb.png"></td>
|
||||
<td>kann ein paar Tage liegen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="pictures/food_ampel_gruen.png"></td>
|
||||
<td>lange Haltbarkeit</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
|
||||
etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
|
||||
<strong>noch am selben Tag</strong>
|
||||
ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
|
||||
</p>
|
||||
</br>
|
||||
<p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
|
||||
|
||||
<a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
|
||||
<a class="beispiel_produkte" href="produkte.html">
|
||||
<img src="pictures/sellerie.png" alt="Sellerie"></a>
|
||||
<p>
|
||||
<a class= "button_produkte" href="produkte.html">zu den Produkten</a>
|
||||
</p>
|
||||
<h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
|
||||
<h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar-desktop" style="--items: 2;">
|
||||
<a href="impressum.html">Impressum</a>
|
||||
<a href="datenschutz.html">Datenschutz</a>
|
||||
</nav>
|
||||
<div id="balken"></div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -15,22 +15,28 @@ function checkform(event) {
|
|||
|
||||
fehlerbox.innerHTML = 'Fehler: <br>';
|
||||
|
||||
if (/^[a-zA-Z]{2,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Anrede: mindestens zwei Buchstaben <br>';
|
||||
if (/^[a-zA-Z]{2,}$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
|
||||
if (/^[a-zA-Z]{2,}$/.test(name) === false) fehlerbox.innerHTML += 'Name: mindestens zwei Buchstaben <br>';
|
||||
if (/[a-zA-Z0-9]{2,}/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
|
||||
if (/[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
|
||||
if (/[0-9]{5}/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: gültige Postleitzahl eingeben, z.B 66265 (fünf Zahlen) <br>';
|
||||
if (/^[a-zA-ZÄäÜüÖö]{2,}$/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
|
||||
if (/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
|
||||
if(!anrede || /^[A-Z][a-z]{1,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Bitte teilen Sie uns Ihre Anrede mit <br>';
|
||||
if(!vorname || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
|
||||
if(!name || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?(?:\s[a-zA-ZÄÜÖäüöß]+)?$/.test(name) === false) fehlerbox.innerHTML += 'Name: mindestens zwei Buchstaben <br>';
|
||||
if(!straße || /^[A-ZÄÖÜ][a-zäöüß]+(?:-[A-ZÄÖÜ][a-zäöüß]+)*$/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
|
||||
if(!hausnummer || /[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
|
||||
if(!plz || Number(plz) < 01001 || /^[0-9]{5}$/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: gültige Postleitzahl fünf Zahlen bspw. 66265 <br>';
|
||||
if(!wohnort || /^[A-Z][a-z]*(?:[- ][A-Z][a-z]*)*$/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
|
||||
if(!email || /^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
|
||||
|
||||
if(barzahlbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Barzahlung <br>';
|
||||
if(datenschutzbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Datenschutzerklärung <br>';
|
||||
|
||||
if(fehlerbox.innerHTML.length > 12) {
|
||||
event.preventDefault();
|
||||
let fehlerboxstyle = document.getElementById('fehlerbox');
|
||||
fehlerbox.style = 'display: block;'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const fehlerbox = document.getElementById('fehlerbox');
|
||||
const bestellbutton = document.getElementById('bestellbutton');
|
||||
const barzahlbox = document.getElementById('barzahlung_box');
|
||||
const datenschutzbox = document.getElementById('datenschutz_box');
|
||||
|
||||
bestellbutton.addEventListener('click', checkform, false);
|
|
@ -62,6 +62,7 @@ window.addEventListener('DOMContentLoaded', function () {
|
|||
berechnePreise();
|
||||
|
||||
}
|
||||
|
||||
function berechnePreise() {
|
||||
for (let i = 0; i < standardWerte.length; i++) {
|
||||
let preisID = 'gesamtbetrag' + (i + 1);
|
||||
|
@ -107,12 +108,68 @@ window.addEventListener('DOMContentLoaded', function () {
|
|||
else if ((/^[0-9]{1,}$/.test(feld1) === false) || (/^[0-9]{1,}$/.test(feld2) === false) || (/^[0-9]{1,}$/.test(feld3) === false)
|
||||
|| (/^[0-9]{1,}$/.test(feld4) === false) || (/^[0-9]{1,}$/.test(feld5) === false) || (/^[0-9]{1,}$/.test(feld6) === false)) {
|
||||
event.preventDefault();
|
||||
zeigeHinweisfenster("Es stehten keine (gültigen) Nummern in den Feldern. [gültig = positive Zahlen 0-9]")
|
||||
zeigeHinweisfenster("Es stehen keine (gültigen) Zahlen in den Feldern. [gültig = positive Zahlen 0-9]");
|
||||
}
|
||||
else {
|
||||
window.location.href = event.target.href;
|
||||
// zeigeHinweisfenster("Feld ist nicht leer");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var menue1 = document.getElementById('menue1');
|
||||
var menue2 = document.getElementById('menue2');
|
||||
var menue3 = document.getElementById('menue3');
|
||||
var gesamtbetrag1 = document.getElementById('gesamtbetrag1');
|
||||
var gesamtbetrag2 = document.getElementById('gesamtbetrag2');
|
||||
var gesamtbetrag3 = document.getElementById('gesamtbetrag3');
|
||||
var gesamtpreis = document.getElementById('gesamtpreis');
|
||||
|
||||
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 1
|
||||
function updateGesamtbetrag1() {
|
||||
var menueValue = menue1.value;
|
||||
var kosten = 0.95;
|
||||
var gesamtbetrag = kosten * menueValue;
|
||||
gesamtbetrag1.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
||||
updateGesamtpreis();
|
||||
}
|
||||
|
||||
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 2
|
||||
function updateGesamtbetrag2() {
|
||||
var menueValue = menue2.value;
|
||||
var kosten = 2;
|
||||
var gesamtbetrag = kosten * menueValue;
|
||||
gesamtbetrag2.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
||||
updateGesamtpreis();
|
||||
}
|
||||
|
||||
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 3
|
||||
function updateGesamtbetrag3() {
|
||||
var menueValue = menue3.value;
|
||||
var kosten = 1.1;
|
||||
var gesamtbetrag = kosten * menueValue;
|
||||
gesamtbetrag3.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
|
||||
updateGesamtpreis();
|
||||
}
|
||||
|
||||
// Funktion zum Aktualisieren des Gesamtpreises
|
||||
function updateGesamtpreis() {
|
||||
var menueValue1 = menue1.value;
|
||||
var menueValue2 = menue2.value;
|
||||
var menueValue3 = menue3.value;
|
||||
var kosten1 = 0.95;
|
||||
var kosten2 = 2;
|
||||
var kosten3 = 1.1;
|
||||
var gesamtpreisValue = (kosten1 * menueValue1) + (kosten2 * menueValue2) + (kosten3 * menueValue3) + 2.9;
|
||||
gesamtpreis.innerHTML = gesamtpreisValue.toFixed(2) + "€";
|
||||
}
|
||||
|
||||
// Event-Listener für Änderungen der Anzahl
|
||||
menue1.addEventListener('input', updateGesamtbetrag1);
|
||||
menue2.addEventListener('input', updateGesamtbetrag2);
|
||||
menue3.addEventListener('input', updateGesamtbetrag3);
|
||||
|
||||
// Initialisierung des Gesamtbetrags und Gesamtpreises
|
||||
updateGesamtbetrag1();
|
||||
updateGesamtbetrag2();
|
||||
updateGesamtbetrag3();
|
||||
});
|
|
@ -67,6 +67,7 @@
|
|||
|
||||
<div class="content">
|
||||
<h1>Warenkorb</h1>
|
||||
|
||||
<div id="notification"></div>
|
||||
<div class="desktop_ansicht">
|
||||
<div class="produkte_warenkorb">
|
||||
|
@ -135,13 +136,15 @@
|
|||
</div>
|
||||
<div class="produkte_details">
|
||||
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
|
||||
<span class="eingabefeld_entfernen">
|
||||
<input type="text" id="menue4" value="10">
|
||||
</span>
|
||||
|
||||
</br>
|
||||
<p>Auf Lager: 250</p>
|
||||
</div>
|
||||
<div class="button_mit_menue">
|
||||
<p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p>
|
||||
<input type="text" id="menue4" value="10">
|
||||
|
||||
</div>
|
||||
<p class="gesamtbetrag4" id="gesamtbetrag4"></p>
|
||||
</div>
|
||||
|
@ -152,13 +155,14 @@
|
|||
</div>
|
||||
<div class="produkte_details">
|
||||
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
|
||||
<span class="eingabefeld_entfernen"><input type="text"
|
||||
id="menue5" value="10"></span>
|
||||
|
||||
</br>
|
||||
<p>Auf Lager: 500</p>
|
||||
</div>
|
||||
<div class="button_mit_menue">
|
||||
<p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p>
|
||||
<input type="text" id="menue5" value="10">
|
||||
|
||||
</div>
|
||||
<p class="gesamtbetrag5" id="gesamtbetrag5"></p>
|
||||
</div>
|
||||
|
@ -169,12 +173,14 @@
|
|||
</div>
|
||||
<div class="produkte_details">
|
||||
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
|
||||
<span class="eingabefeld_entfernen"> <input type="text" id="menue6" value="10"></span>
|
||||
|
||||
</br>
|
||||
<p>Auf Lager: 1000</p>
|
||||
</div>
|
||||
<div class="button_mit_menue">
|
||||
<p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p>
|
||||
<input type="text" id="menue6" value="10">
|
||||
|
||||
|
||||
</div>
|
||||
<p class="gesamtbetrag6" id="gesamtbetrag6"></p>
|
||||
|
@ -187,7 +193,8 @@
|
|||
<p class="gesamtpreis" id="gesamtpreis"></p>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button_bestellung_abschließen" id="bestellbutton_mobil" href="bestellformular.html">Kostenpflichtig
|
||||
<a class="button_bestellung_abschließen" id="bestellbutton_mobil"
|
||||
href="bestellformular.html">Kostenpflichtig
|
||||
bestellen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue