1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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>
|
