From c5335d8225289c3389cefbafad3c7d01c540e244 Mon Sep 17 00:00:00 2001
From: Horus
Date: Sat, 10 Oct 2020 02:33:44 +0200
Subject: clearer presentation.

---
 index.html | 76 +++++++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 51 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 1c45dc4..6da5d91 100644
--- a/index.html
+++ b/index.html
@@ -49,22 +49,22 @@
 			<h2>Erste Pizza</h2>
 		</label>
 		<div class="form-group">
-			<label for="d">Durchmesser in cm:</label>
-			<input id="d" class="form-control" type="float" placeholder="Durchmesser in cm">
+			<label for="d1">Durchmesser in cm:</label>
+			<input id="d1" class="form-control" type="float" placeholder="Durchmesser in cm">
 		</div>
 
 		<div class="form-group">
-			<label for="p">
+			<label for="p1">
 				Preis in Euro:
 			</label>
-			<input id="p" class="form-control" type="float" placeholder="Preis in €">
+			<input id="p1" class="form-control" type="float" placeholder="Preis in €">
 		</div>
 
 		<div class="form-group">
-			<label for="r">
+			<label for="r1">
 				<strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?)
 			</label>
-			<input id="r" class="form-control" type="float" placeholder="Randstärke in cm">
+			<input id="r1" class="form-control" type="float" placeholder="Randstärke in cm">
 		</div>
 
 		<div class="form-group" id="submit-buttons">
@@ -100,6 +100,8 @@
 		</div>
 	</form>
 
+	<div id="rec">
+	</div>
 	<div id="result" class="hidden">
 		<table class="table table-striped table-responsive-sm">
 			<thead>
@@ -121,7 +123,7 @@
 					<th>
 						Flächeninhalt inklusive Rand:
 					</th>
-					<td id="flächeninhalt">
+					<td id="flächeninhalt1">
 					</td>
 					<td id="flächeninhalt2">
 					</td>
@@ -130,43 +132,43 @@
 					<th>
 						Flächeninhalt ohne Rand (nur Pizzabelag):
 					</th>
-					<td id="ohneRand">
+					<td id="ohneRand1">
 					</td>
 					<td id="ohneRand2">
 					</td>
 				</tr>
-				<tr>
+				<tr class="Rand">
 					<th>
 						Flächeninhalt des Randes (ohne Belag!):
 					</th>
-					<td id="nurRand">
+					<td id="nurRand1">
 					</td>
 					<td id="nurRand2">
 					</td>
 				</tr>
-				<tr>
+				<tr class="Rand">
 					<th>
 						&#10132; Verhältnis Rand zu Belag (je höher, desto besser):
 					</th>
-					<td id="verhältnis">
+					<td id="verhältnis1">
 					</td>
 					<td id="verhältnis2">
 					</td>
 				</tr>
 				<tr>
 					<th>
-						&#10132; Kosten pro Pizza-cm² inklusive Rand (je höher, desto besser):
+						&#10132; Wie viel Pizza-cm² pro Euro (inklusive Rand):
 					</th>
-					<td id="kostenVerhältnisMitRand">
+					<td id="kostenVerhältnisMitRand1">
 					</td>
 					<td id="kostenVerhältnisMitRand2">
 					</td>
 				</tr>
-				<tr>
+				<tr class="Rand">
 					<th>
-						&#10132; Kosten pro Pizza-cm² ohne Rand (je höher, desto besser):
+						&#10132; Wie viel Pizza-cm² pro Euro (nur Belag):
 					</th>
-					<td id="kostenVerhältnisOhneRand">
+					<td id="kostenVerhältnisOhneRand1">
 					</td>
 					<td id="kostenVerhältnisOhneRand2">
 					</td>
@@ -175,16 +177,16 @@
 					<th>
 						Anteilige Kosten nur für den Pizzabelag:
 					</th>
-					<td id="kostenOhneRand">
+					<td id="kostenOhneRand1">
 					</td>
 					<td id="kostenOhneRand2">
 					</td>
 				</tr>
-				<tr>
+				<tr class="Rand">
 					<th>
 						Anteilige Kosten nur für den Rand:
 					</th>
-					<td id="kostenNurRand">
+					<td id="kostenNurRand1">
 					</td>
 					<td id="kostenNurRand2">
 					</td>
@@ -196,7 +198,7 @@
 	<br>
 	<span id="pizza-wrap" class="hidden">
 		<p>Ungefähre Darstellung der Pizzagröße <a href="#disclaimer">*</a></p>
-		<div id="pizza" class="show-pizza"></div>
+		<div id="pizza1" class="show-pizza"></div>
 		<div id="pizza2" class="show-pizza hidden"></div>
 
 		<p id="disclaimer"><strong>* Warnung: Sehr ungenau! Hängt von eurem Bildschirm ab und schwankt sogar um mehrere Centimeter!</strong></p>
@@ -204,6 +206,7 @@
 </div>
 
 	<script>
+	var hatKeinenRand = true;
 	function calc(id) {
 			d = document.getElementById('d' + id).value.replace(",", ".");
 			p = document.getElementById('p' + id).value.replace(",", ".");
@@ -225,8 +228,8 @@
 
 			document.getElementById('verhältnis' + id).innerHTML =  "1 : " + v.toFixed(2);
 
-			document.getElementById('kostenVerhältnisMitRand' + id).innerHTML =  fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math> <br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)";
-			document.getElementById('kostenVerhältnisOhneRand' + id).innerHTML =  frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math> <br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)";
+			document.getElementById('kostenVerhältnisMitRand' + id).innerHTML =  fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";
+			document.getElementById('kostenVerhältnisOhneRand' + id).innerHTML =  frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";
 
 			document.getElementById('kostenOhneRand' + id).innerHTML =  fpr.toFixed(2) + " €";
 			document.getElementById('kostenNurRand' + id).innerHTML =  fprpp.toFixed(2) + " €";
@@ -234,11 +237,34 @@
 			document.getElementById('pizza' + id).style.width = d + "cm";
 			document.getElementById('pizza' + id).style.height= d + "cm";
 			document.body.style.zoom = 1.0;
+
+			if ( 0 != r ) {
+				hatKeinenRand = false;
+			}
+
 	};
 	function clicked() {
 			document.getElementById('result').classList.remove("hidden");
 			document.getElementById('pizza-wrap').classList.remove("hidden");
-			calc("");
+			calc("1");
+
+			document.getElementById('result').scrollIntoView({
+				behavior: 'smooth'
+			});
+
+			if ( hatKeinenRand ) {
+				// Keinen Rand angegeben, muss also auch nicht angezeigt werden
+				document.querySelectorAll('.Rand').forEach(function(item) {
+					item.classList.add('hidden');
+				});
+			} else {
+				// Zeige auch die Ergebnisse, die den Rand berücksichtigen
+				document.querySelectorAll('.Rand').forEach(function(item) {
+					item.classList.remove('hidden');
+				});
+			}
+
+			hatKeinenRand = true; // back to default
 	};
 	window.addEventListener("load",function() {
 		document.getElementById('preis').addEventListener("submit",function(e) {
@@ -257,8 +283,8 @@
 			document.getElementById('pizza-head-2').classList.remove("hidden");
 			document.getElementById('pizza2').classList.remove("hidden");
 
-			clicked();
 			calc("2");
+			clicked();
 		});
 	});
 	</script>
-- 
cgit v1.2.3