107 lines
2.5 KiB
HTML
107 lines
2.5 KiB
HTML
<!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>
|