Skip to content

Commit 145b65b

Browse files
MaximilianSteimarMaximilianSteimar
committed
added pizza calculator
1 parent 1a7e1ca commit 145b65b

4 files changed

Lines changed: 83 additions & 0 deletions

File tree

‎PizzaCalc.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pizza Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="PizzaCalc.js"></script>
9+
</head>
10+
<body>
11+
<nav>
12+
<a class="title" href="index.html">← Back</a>
13+
</nav>
14+
<div class="container">
15+
<p>
16+
Welcome to my Pizza Calculator.
17+
With this page you can calculate the size
18+
of your pizza by choosing its shape and diameter.
19+
<br><br>
20+
</p>
21+
<br>
22+
<p>Which shape is your Pizza?</p>
23+
<center>
24+
<select onchange="shapechange()" name="pizzashape" id="pizzashape">
25+
<option value="round">🔴 Round</option>
26+
<option value="square">🟥 Square</option>
27+
</select>
28+
</center>
29+
<p>Which size does you pizza have? (cm)</p>
30+
<div id="round">
31+
<input type="number" id="diameter" placeholder="diameter">
32+
<br><br>
33+
<button onclick="calcround()">Calculate</button>
34+
</div>
35+
<div id="square" style="display: none;">
36+
<input type="number" id="side_a" placeholder="Side A">
37+
<br><br>
38+
<input type="number" id="side_b" placeholder="Side B">
39+
<br><br>
40+
<button onclick="calcsquare()">Calculate</button>
41+
</div>
42+
<br><br>
43+
<p class="result" id="result"></p>
44+
</div>
45+
</body>
46+
</html>

‎PizzaCalc.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function shapechange() {
2+
pizzashape = document.getElementById("pizzashape").value;
3+
4+
if (pizzashape == "round") {
5+
document.getElementById("square").style.display = "none";
6+
document.getElementById("round").style.display = "block";
7+
}
8+
else if (pizzashape == "square") {
9+
document.getElementById("round").style.display = "none";
10+
document.getElementById("square").style.display = "block";
11+
}
12+
}
13+
14+
function calcround() {
15+
diameter = document.getElementById("diameter").value;
16+
let pi = Math.PI;
17+
18+
result = diameter * 2 * pi;
19+
document.getElementById("result").innerHTML = (result.toFixed(2))/100+"m²";
20+
}
21+
22+
function calcsquare() {
23+
side_a = document.getElementById("side_a").value;
24+
side_b = document.getElementById("side_b").value;
25+
let pi = Math.PI;
26+
27+
result = side_a * side_b
28+
document.getElementById("result").innerHTML = (result.toFixed(2))/100+"m²";
29+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<a href="BMI.html">🏋️‍♀️ BMI Calculator</a>
1616
<a href="MacAdressConv.html">📫 MAC-Adress Converter</a>
1717
<a href="PetrolCalc.html">⛽ Petrol Calculator</a>
18+
<a href="PizzaCalc.html">🍕 Pizza Calculator</a>
1819
<a href="PowerConv.html">🚗 PS-KW Converter</a>
1920
<a href="RandomGame.html">🎮 Random Number Game</a>
2021
<a href="RandomGameScores.html">📊 Random Number Game Scoreboard</a>

‎style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@ button:active {
5656
transform: scale(1.2)
5757
}
5858

59+
select {
60+
font-size: 22px;
61+
border: none;
62+
border-radius: 8px;
63+
margin: 16px;
64+
}
65+
5966
.container {
6067
padding: 16px;
6168
}

0 commit comments

Comments
 (0)