PROJEKTARBEIT - final
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pizzeria Albertus</title>
<link rel="stylesheet" href="assets/styles/main.css">
</head>
<body>
<header id="home">
<nav class="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#speisekarte">Speisekarte</a></li>
<li><a href="#order">Bestellung</a></li>
<li><a href="#infos">Informationen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<div class="claim">
<h1>Pizzeria Albertus</h1>
<p><span>hungrig?</span> Pizza geht immer!</p>
</div>
</header>
<main>
<section id="speisekarte" class="main-section">
<h2>Speisekarte</h2>
<p>Lorem ipsum
dolor, sit amet consec
tetur adipisicing elit.<br> Perferendis
neque <strong>aliquid distinctio</strong>, v
elit itaque porro, voluptatem quis, bland
itiis maiores corrupti tempora corporis e
a fugiat quisquam eius? Neque rerum adipi
sci corporis!
</p>
<table class="price-table">
<tr>
<th>Nr.</th>
<th>Pizza</th>
<th>Preis</th>
</tr>
<tr>
<td>1.</td>
<td>Margherita</td>
<td>7,89 €</td>
</tr>
<tr>
<td>2.</td>
<td>Salami</td>
<td>9,99 €</td>
</tr>
<tr>
<td>3.</td>
<td>Funghi</td>
<td>8,99 €</td>
</tr>
</table>
</section>
<section id="order" class="main-section">
<h2>Bestellung</h2>
<table id="price-calc">
<thead>
<tr>
<th>Pizza</th>
<th>Preis</th>
<th>Anzahl</th>
<th>Kosten</th>
</tr>
</thead>
<tbody>
<tr>
<td>Margherita</td>
<td class="price">8</td>
<td class="quantity">
<input type="number" name="quantity[]" id="quantity-1">
</td>
<td class="costs"></td>
</tr>
<tr>
<td>Salami</td>
<td class="price">9</td>
<td class="quantity">
<input type="number" name="quantity[]" id="quantity-2">
</td>
<td class="costs"></td>
</tr>
<tr>
<td>Funghi</td>
<td class="price">10</td>
<td class="quantity">
<input type="number" name="quantity[]" id="quantity-3">
</td>
<td class="costs"></td>
</tr>
<tr>
<td>Tonno</td>
<td class="price">11</td>
<td class="quantity">
<input type="number" name="quantity[]" id="quantity-4">
</td>
<td class="costs"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><strong>Gesamtpreis</strong></td>
<td class="sum"><strong>0</strong></td>
</tr>
</tfoot>
</table>
</section>
<section id="infos" class="main-section">
<h2>Informationen</h2>
<article class="sidebyside">
<img src="https://via.placeholder.com/150x300" alt="Pizza">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
</div>
</article>
</section>
<section id="contact" class="main-section">
<h2>Kontakt</h2>
<form action="form.php" method="post">
<input type="radio" name="anrede" id="anrede-1" value="herr">Herr
<input type="radio" name="anrede" id="anrede-2" value="frau">Frau
<div>
<label for="pizza">Pizza</label>
<select name="pizza" id="pizza">
<option value="margherita">Margherita</option>
<option value="salami">Salami</option>
<option value="funghi">Funghi</option>
</select>
<div>
<label for="quantity">Anzahl</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</div>
</div>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="anschreiben"></label>
<textarea name="anschreiben" id="anschreiben" cols="30" rows="10"></textarea>
</div>
<input type="submit" value="abschicken">
</form>
</section>
</main>
<footer>
<h2>Impressum</h2>
</footer>
<script src="/awb/albertus/assets/scripts/main.js" type="text/javascript"></script>
</body>
</html>
/assets/styles/main.css
/* Initialisierung & Reset */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p {
margin-bottom: 1.1em;
}
table td,
table th {
padding: 0.4em;
text-align: left;
}
/* Struktur */
header#home {
background-color: grey;
min-height: 100vh;
}
section.main-section {
margin-top: 20px;
background-color: #bbbbbb;
min-height: 50vh;
}
.main-section {
padding: 1.3em;
}
.main-section h2 {
margin-bottom: 1.3em;
}
/* Home */
#home {
background-image: url("/awb/albertus/assets/img/blur-blurry-bokeh-close-up-347139.jpg");
background-size: cover;
background-position: center;
padding: 7%;
}
#home .claim {
margin-top: 10%;
}
#home .claim h1 {
font-size: 6em;
}
#home .claim p {
font-size: 3.5em;
margin-left: 25%;
}
#home .claim p span {
font-style: italic;
}
.main-nav {
display: none;
}
@media (min-width: 700px) {
.main-nav {
display: block;
}
}
/* Hauptnavigation */
.main-nav ul li {
display: inline;
margin-right: 10px;
font-size: 1.4em;
background-color: rgba(100, 100, 100, 0.5);
padding: 5px;
}
.main-nav ul li:hover {
background-color: rgba(100, 100, 100, 0.8);
}
.main-nav ul li a {
text-decoration: none;
color: black;
}
.main-nav ul li a:hover {
color: rgb(120, 50, 50);
}
@media (min-width: 1000px) {
}
/************/
/* Sections */
/************/
/* Speisekarte */
table.price-table td {
border: 1px solid white;
}
/* Helpers */
.sidebyside {
display: flex;
}
.sidebyside img {
margin-right: 20px;
}
footer {
min-height: 100vh;
}
/assets/scripts/main.js
// Initialisiere Konstanten
const priceCalc = document.querySelector('#price-calc');
const priceRows = priceCalc.querySelectorAll('tbody tr');
const quantityInputFields = priceCalc.querySelectorAll('tbody input');
// Initialisiere EventListener: Jedes Mal, wenn eine Änderung in einem
// Input-Feld passiert, wird die Funktion "calcAllCosts" aufgerufen
for (quantityInputField of quantityInputFields) {
quantityInputField.addEventListener('change', calcAllCosts);
}
// Berechne die Produkte in allen Zeilen
// und die Summe in der Tabelle
function calcAllCosts() {
const outputSum = priceCalc.querySelector('tfoot .sum strong');
var costs = 0;
for (priceRow of priceRows) {
// rufe die Funktion calcCostsInRow für die aktuelle Zeile auf
// Addiere den Rückgabewert (die Kosten) zu den Gesamtkosten
costs = costs + calcCostsInRow(priceRow);
}
outputSum.innerHTML = costs; // Schreibe Gesamtkosten
}
// Berechne das Produkt aus Preis und Anzahl in einer Zeile
// und schreibe das Ergebnis in das Element costsElement
function calcCostsInRow(row) {
const priceElement = row.querySelector('td.price');
const quantityElement = row.querySelector('td.quantity input');
const costsElement = row.querySelector('td.costs');
// Hole Preis aus dem Element und schreibe ihn in eine Variable
var price = priceElement.innerHTML;
// Hole die Anzahl aus dem Element und schreibe sie in eine Variable
var quantity = quantityElement.value;
var costs = price * quantity; // Berechne Kosten
costsElement.innerHTML = costs; // Schreibe Kosten in Tabelle
// gib die Kosten zurück, damit sie in der aufrufenden Funktion verwendet werden können.
return costs;
}