diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 252 |
1 files changed, 213 insertions, 39 deletions
@@ -1,10 +1,19 @@ <!doctype html> <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?"> + <link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css"> + <link rel='icon' href="https://iamfabulous.de/favicon.ico"> + <title>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</title> <style> html { width: 100%; } - #pizza { + .main { + margin-top: 1rem; + } + .show-pizza { height: 10cm; width: 10cm; background-color: #bbb; @@ -15,49 +24,190 @@ math { font-size: 1.5rem; } + .btn-tertiary { + background-color: #fd8a02; + margin-left: .01rem; + } + .btn-tertiary:hover { + filter: brightness(0.85); + } + .hidden { + display: none; + } </style> </head> <body> +<div class="container main"> <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"> + <label id="pizza-label-1" class="hidden"> + <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"> + </div> + + <div class="form-group"> + <label for="p"> + Preis in Euro: + </label> + <input id="p" class="form-control" type="float" placeholder="Preis in €"> + </div> + + <div class="form-group"> + <label for="r"> + <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"> + </div> + + <div class="form-group" id="submit-buttons"> + <button class="btn btn-primary" type="submit">Preis berechnen</button> + <button id="compare" class="btn btn-tertiary" type="button">Vergleichen +</button> + </div> </form> + <form id="preis2" class="hidden"> + <label> + <h2>Zweite Pizza</h2> + </label> + <div class="form-group"> + <label for="d2">Durchmesser in cm:</label> + <input id="d2" class="form-control" type="float" placeholder="Durchmesser in cm"> + </div> + + <div class="form-group"> + <label for="p2"> + Preis in Euro: + </label> + <input id="p2" class="form-control" type="float" placeholder="Preis in €"> + </div> + + <div class="form-group"> + <label for="r2"> + <strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?) + </label> + <input id="r2" class="form-control" type="float" placeholder="Randstärke in cm"> + </div> + + <div class="form-group"> + <button class="btn btn-primary" type="submit">Preis berechnen</button> + </div> + </form> + + <div id="result" class="hidden"> + <table class="table table-striped table-responsive-sm"> + <thead> + <tr> + <th> + (~˘▾˘)~ + </th> + <th id="pizza-head-1"> + Pizza + </th> + <th id="pizza-head-2" class="hidden"> + Pizza 2 + </th> + </tr> + </thead> + + <tbody> + <tr> + <th> + Flächeninhalt inklusive Rand: + </th> + <td id="flächeninhalt"> + </td> + <td id="flächeninhalt2"> + </td> + </tr> + <tr> + <th> + Flächeninhalt ohne Rand (nur Pizzabelag): + </th> + <td id="ohneRand"> + </td> + <td id="ohneRand2"> + </td> + </tr> + <tr> + <th> + Flächeninhalt des Randes (ohne Belag!): + </th> + <td id="nurRand"> + </td> + <td id="nurRand2"> + </td> + </tr> + <tr> + <th> + ➔ Verhältnis Rand zu Belag (je höher, desto besser): + </th> + <td id="verhältnis"> + </td> + <td id="verhältnis2"> + </td> + </tr> + <tr> + <th> + ➔ Kosten pro Pizza-cm² inklusive Rand (je höher, desto besser): + </th> + <td id="kostenVerhältnisMitRand"> + </td> + <td id="kostenVerhältnisMitRand2"> + </td> + </tr> + <tr> + <th> + ➔ Kosten pro Pizza-cm² ohne Rand (je höher, desto besser): + </th> + <td id="kostenVerhältnisOhneRand"> + </td> + <td id="kostenVerhältnisOhneRand2"> + </td> + </tr> + <tr> + <th> + Anteilige Kosten nur für den Pizzabelag: + </th> + <td id="kostenOhneRand"> + </td> + <td id="kostenOhneRand2"> + </td> + </tr> + <tr> + <th> + Anteilige Kosten nur für den Rand: + </th> + <td id="kostenNurRand"> + </td> + <td id="kostenNurRand2"> + </td> + </tr> + </tbody> + </table> + </div> + <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> + <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="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> + <p id="disclaimer"><strong>* Warnung: Sehr ungenau! Hängt von eurem Bildschirm ab und schwankt sogar um mehrere Centimeter!</strong></p> + </span> +</div> <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(",", "."); + function calc(id) { + d = document.getElementById('d' + id).value.replace(",", "."); + p = document.getElementById('p' + id).value.replace(",", "."); + r = document.getElementById('r' + id).value.replace(",", "."); f = ( Math.PI * Math.pow((d/2),2) ); fr = ( Math.PI * Math.pow((d-r)/2,2) ); @@ -69,22 +219,46 @@ 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('flächeninhalt' + id).innerHTML = f.toFixed(2) + " cm²"; + document.getElementById('ohneRand' + id).innerHTML = fr.toFixed(2) + " cm²"; + document.getElementById('nurRand' + id).innerHTML = 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('verhältnis' + id).innerHTML = "1 : " + v.toFixed(2); - 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('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('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('kostenOhneRand' + id).innerHTML = fpr.toFixed(2) + " €"; + document.getElementById('kostenNurRand' + id).innerHTML = fprpp.toFixed(2) + " €"; - document.getElementById('pizza').style.width = d + "cm"; - document.getElementById('pizza').style.height= d + "cm"; + document.getElementById('pizza' + id).style.width = d + "cm"; + document.getElementById('pizza' + id).style.height= d + "cm"; document.body.style.zoom = 1.0; + }; + function clicked() { + document.getElementById('result').classList.remove("hidden"); + document.getElementById('pizza-wrap').classList.remove("hidden"); + calc(""); + }; + window.addEventListener("load",function() { + document.getElementById('preis').addEventListener("submit",function(e) { + e.preventDefault(); // before the code + clicked(); + }); + document.getElementById('compare').addEventListener("click", function(e){ + document.getElementById('preis2').classList.remove("hidden"); + document.getElementById('pizza-label-1').classList.remove("hidden"); + document.getElementById('submit-buttons').classList.add("hidden"); + }); + document.getElementById('preis2').addEventListener("submit",function(e) { + e.preventDefault(); // before the code + + document.getElementById('pizza-head-1').innerHTML = "Pizza 1"; + document.getElementById('pizza-head-2').classList.remove("hidden"); + document.getElementById('pizza2').classList.remove("hidden"); + clicked(); + calc("2"); }); }); </script> |