initial commit
This commit is contained in:
106
co2/www/index.html
Normal file
106
co2/www/index.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>co2</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 12px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
label, select, input {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
#output {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background: #eef;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Co2 rechner</h1>
|
||||
|
||||
<label for="art">Antriebsart:</label>
|
||||
<select id="art">
|
||||
<option value="1">E-Auto</option>
|
||||
<option value="2">Hybrid</option>
|
||||
<option value="3">Benziner</option>
|
||||
<option value="4">Diesel</option>
|
||||
</select>
|
||||
|
||||
<label for="ps">PS:</label>
|
||||
<input type="number" id="ps" min="1" max="300" step="1" required >
|
||||
|
||||
<button onclick="berechneSteuer()">Berechnen</button>
|
||||
|
||||
<div id="output">
|
||||
Bitte Daten eingeben und auf Berechnen klicken.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function berechneSteuer() {
|
||||
const art = document.getElementById("art").value;
|
||||
const ps = parseInt(document.getElementById("ps").value);
|
||||
const output = document.getElementById("output");
|
||||
|
||||
if (isNaN(ps) || ps <= 0) {
|
||||
output.innerHTML = "gib eine valide ps zahl ein";
|
||||
return;
|
||||
}
|
||||
|
||||
let stufe = "";
|
||||
let betragMonat = 0;
|
||||
|
||||
switch (art) {
|
||||
case "1":
|
||||
stufe = "E-Auto";
|
||||
betragMonat = 0;
|
||||
break;
|
||||
case "2":
|
||||
stufe = "Hybrid";
|
||||
betragMonat = ps <= 150 ? 35 : 50;
|
||||
break;
|
||||
case "3":
|
||||
stufe = "Benziner";
|
||||
betragMonat = ps <= 150 ? 55 : 70;
|
||||
break;
|
||||
case "4":
|
||||
stufe = "Diesel";
|
||||
betragMonat = ps <= 150 ? 75 : 90;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
const betragJahr = betragMonat * 12;
|
||||
|
||||
output.innerHTML = `
|
||||
<strong>Fahrzeugtyp:</strong> ${stufe}<br>
|
||||
<strong>PS-Zahl:</strong> ${ps}<br>
|
||||
<strong>Monatliche Abgabe:</strong> ${betragMonat} €<br>
|
||||
<strong>Jährliche Abgabe:</strong> ${betragJahr} €
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user