add hide button. colors pizza.

1 files changed, 16 insertions, 5 deletions

diff --git a/index.html b/index.html
index a8ef5c1..80b8b11 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,11 @@
 		.show-pizza {
 			height: 10cm;
 			width: 10cm;
-			background-color: #bbb;
+			background-color: #a10a09;
 			border-radius: 50%;
 			margin-left: 10px;
 			margin-top: 20px;
+			border: 0.5cm solid #fff38a;
 		}
 		math {
 			font-size: 1.5rem;
@@ -31,6 +32,9 @@
 		.btn-tertiary:hover {
 			filter: brightness(0.85);
 		}
+		.btn-hide {
+			background-color: grey;
+		}
 		.hidden {
 			display: none;
 		}
@@ -50,14 +54,14 @@
 		</label>
 		<div class="form-group">
 			<label for="d1">Durchmesser in cm:</label>
-			<input id="d1" class="form-control" type="float" placeholder="Durchmesser in cm">
+			<input id="d1" class="form-control" type="float" placeholder="Durchmesser in cm" required>
 		</div>
 
 		<div class="form-group">
 			<label for="p1">
 				Preis in Euro:
 			</label>
-			<input id="p1" class="form-control" type="float" placeholder="Preis in €">
+			<input id="p1" class="form-control" type="float" placeholder="Preis in €" required>
 		</div>
 
 		<div class="form-group">
@@ -78,14 +82,14 @@
 		</label>
 		<div class="form-group">
 			<label for="d2">Durchmesser in cm:</label>
-			<input id="d2" class="form-control" type="float" placeholder="Durchmesser in cm">
+			<input id="d2" class="form-control" type="float" placeholder="Durchmesser in cm" required>
 		</div>
 
 		<div class="form-group">
 			<label for="p2">
 				Preis in Euro:
 			</label>
-			<input id="p2" class="form-control" type="float" placeholder="Preis in €">
+			<input id="p2" class="form-control" type="float" placeholder="Preis in €" required>
 		</div>
 
 		<div class="form-group">
@@ -97,6 +101,7 @@
 
 		<div class="form-group">
 			<button class="btn btn-primary" type="submit">Preis berechnen</button>
+			<button id="hide" class="btn btn-tertiary btn-hide" type="button">Verbergen -</button>
 		</div>
 	</form>
 
@@ -245,6 +250,7 @@
 
 			document.getElementById('pizza' + id).style.width = d + "cm";
 			document.getElementById('pizza' + id).style.height= d + "cm";
+			document.getElementById('pizza' + id).style.border= r + "cm solid rgb(230, 219, 128)";
 			document.body.style.zoom = 1.0;
 
 			if ( 0 != r ) {
@@ -325,6 +331,11 @@
 			document.getElementById('pizza-label-1').classList.remove("hidden");
 			document.getElementById('submit-buttons').classList.add("hidden");
 		});
+		document.getElementById('hide').addEventListener("click", function(e){
+			document.getElementById('preis2').classList.add("hidden");
+			document.getElementById('pizza-label-1').classList.add("hidden");
+			document.getElementById('submit-buttons').classList.remove("hidden");
+		});
 		document.getElementById('preis2').addEventListener("submit",function(e) {
 			e.preventDefault(); // before the code