diff options
| author | Horus | 2020-09-23 03:13:19 +0200 |
|---|---|---|
| committer | Horus | 2020-09-23 03:13:19 +0200 |
| commit | 3ec70ad903b600097f6c4dbf2e90a014fec84ee4 (patch) | |
| tree | 987542e61459e51e9825bc53b229d67901e38e38 | |
| download | pizza-3ec70ad903b600097f6c4dbf2e90a014fec84ee4.tar.gz | |
Initial commit.
| -rw-r--r-- | index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..d6a19a7 --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ +<!doctype html> +<head> + <style> + html { + width: 100%; + } + #pizza { + height: 10cm; + width: 10cm; + background-color: #bbb; + border-radius: 50%; + margin-left: 10px; + margin-top: 20px; + } + math { + font-size: 1.5rem; + } + </style> +</head> + +<body> + <h1>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</h1> + <p>Auch bekannt als: Sollte man die kleinere oder größere Pizza nehmen? Ist es günstiger zwei Pizzen zu kaufen, oder eine zu teilen?</p> + <!-- Flächeninhalt: π * r^2 + Umfang: π * d + --> + <form id="preis"> + Durchmesser in cm: + <input id="d" type="float" placeholder="Durchmesser in cm"> + Preis in Euro: + <input id="p" type="float" placeholder="Preis in €"> + Randstärke in cm (Wie viel der Pizza ist Rand?) + <input id="r" type="float" placeholder="Randstärke in cm"> + <input type="submit" value="Preis berechnen"> + </form> + <br> + <div id="flächeninhalt"></div> + <div id="ohneRand"></div> + <div id="nurRand"></div> + <br> + <div id="verhältnis"></div> + <br> + <div id="kostenVerhältnisMitRand"></div> + <div id="kostenVerhältnisOhneRand"></div> + <br> + <div id="kostenOhneRand"></div> + <div id="kostenNurRand"></div> + <p>Ungefähre Darstellung der Pizzagröße <a href="#disclaimer">*</a></p> + <div id="pizza"></div> + + <p id="disclaimer"><strong>* Warnung: Sehr ungenau! Hängt von eurem Bildschirm ab und schwankt sogar um mehrere Centimeter!</strong></p> + + <script> + window.addEventListener("load",function() { + document.getElementById('preis').addEventListener("submit",function(e) { + e.preventDefault(); // before the code + + d = document.getElementById('d').value.replace(",", "."); + p = document.getElementById('p').value.replace(",", "."); + r = document.getElementById('r').value.replace(",", "."); + + f = ( Math.PI * Math.pow((d/2),2) ); + fr = ( Math.PI * Math.pow((d-r)/2,2) ); + frpp = (( Math.PI * Math.pow((d)/2,2) ) - ( Math.PI * Math.pow((d-r)/2,2) )); + v = fr / frpp; + fp = f / p; + frp = fr / p; + pf = p / f; + fpr = pf * fr; + fprpp = pf * frpp; + + document.getElementById('flächeninhalt').innerHTML = "Flächeninhalt inklusive Rand: " + f.toFixed(2) + " cm²"; + document.getElementById('ohneRand').innerHTML = "Flächeninhalt ohne Rand (nur Pizzabelag): " + fr.toFixed(2) + " cm²"; + document.getElementById('nurRand').innerHTML = "Flächeninhalt des Randes (ohne Belag!): " + frpp.toFixed(2) + " cm²"; + + document.getElementById('verhältnis').innerHTML = "Verhältnis Rand zu Belag: 1 : " + v.toFixed(2) + " (je höher, desto besser)"; + + document.getElementById('kostenVerhältnisMitRand').innerHTML = "Kosten pro Pizza-cm² inklusive Rand: " + fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)"; + document.getElementById('kostenVerhältnisOhneRand').innerHTML = "Kosten nur des Belags in cm² pro Euro: " + frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)"; + + document.getElementById('kostenOhneRand').innerHTML = "Anteilige Kosten nur für den Pizzabelag: " + fpr.toFixed(2) + " €"; + document.getElementById('kostenNurRand').innerHTML = "Anteilige Kosten nur für den Rand: " + fprpp.toFixed(2) + " €"; + + document.getElementById('pizza').style.width = d + "cm"; + document.getElementById('pizza').style.height= d + "cm"; + document.body.style.zoom = 1.0; + + }); + }); + </script> +</body> +</html> |