Heute machen wir mal wieder was ganz spannendes und zwar wir bauen ein Kredit / Zinsrechner. Wir bauen also ein Formular mit HTML, dort können wir dann die Kredithöhe, den Zinss
atz und die Laufzeit eingeben und zack er brechnet euch dann sofor wie hoch eure monatlichen Kosten sind. Und dafür verwenden wir nur HTML, CSS und Javascript.
Was können wir daraus lernen? Nun ganz einfach – wie kann ich aus einem Input Feld mit Javascript was auslesen, verarbeiten und woanders wieder ausgeben. Das kann man dann für viele andere Formulare gebrauchen.
Also ich hoffe ihr lernt etwas von der heutigen Lektion und ich freue mich über euer Feedback
Video
HTML
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 | <div class="container">
<h1>Kreditrechner</h1>
<div class="box">
<h2>Betrag:</h2>
<input class="" type="number" id="betrag" min="1" max="100000" value="1000" onchange="zinsrechner()">
</div>
<div class="box">
<h2>Zinssatz %:</h2>
<input class="" type="number" id="zinssatz" min="0" max="100" value="10" onchange="zinsrechner()">
</div>
<div class="box">
<h2>Laufzeit in Monate:</h2>
<input class="" type="number" id="laufzeit" min="3" max="60" value="12" onchange="zinsrechner()">
</div>
<div class="box">
<h2>Monatliche Kosten:</h2>
<div class="bezahlen" id="bezahlen"></div>
</div>
</div>
<h3>CSS</h3>
<pre lang="html" line="1">:root {
--bg: #023047;
--ct: #219ebc;
--titel: #ffb703;
--resultat: #fb8500;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: var(--bg)
}
.container {
width: 500px;
background-color: var(--ct);
color: #000;
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.7);
}
h1 {
text-transform: uppercase;
color: var(--titel);
}
h2 {
color: var(--titel);
margin: 15px 0 5px 0;
}
.box {
font-size: 18px;
font-weight: bold;
color: var(--titel);
}
.container input {
width: 100%;
font-size: 20px;
height: 25px;
border-radius: 5px;
margin-bottom: 20px;
border: none;
}
.bezahlen {
color: var(--resultat);
font-size: 3rem;
text-align: center;
font-weight: bold;
} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function zinsrechner(){
betrag = document.getElementById("betrag").value;
zinssatz = document.getElementById("zinssatz").value;
laufzeit = document.getElementById("laufzeit").value;
monatlicherZinssatz = zinssatz / 12 / 100;
rate = (betrag * monatlicherZinssatz * Math.pow(1 + monatlicherZinssatz, laufzeit)) / (Math.pow(1 + monatlicherZinssatz, laufzeit) - 1);
kosten = rate.toFixed(2);
document.getElementById("bezahlen").innerHTML=`${kosten}`;
} |
0 Kommentare