max/react-basics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unterricht 10.07.

Browse Source
This commit is contained in:
Max
2026-07-10 12:12:28 +02:00
parent 13579440d3
commit 0fd38519b5
12 changed files with 132 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Haushaltsplaner/index.html
+4 -4
View File
@@ -5,18 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haushaltsplaner</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
</head>
<body>
<main>
<h1>Haushaltsbuch</h1>
<div class="input-container">
<form onsubmit="fuegeEintragHinzu()" class="input-container">
<input type="text" id="beschreibung" placeholder="Beschreibung" required>
<input type="number" id="betrag" placeholder="Betrag" required>
<input type="date" id="datum" required>
<input type="submit" value="Hinzufügen" id="hinzufuegenButton" onclick="fuegeEintragHinzu()">
</div>
<input type="submit" value="Hinzufügen" id="hinzufuegenButton">
</form>
<h2>Einträge</h2>
<ul id="eintragListe"></ul>
Haushaltsplaner/script.js
+10 -25
View File
@@ -6,8 +6,7 @@ function ladeEintraege() {
const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
eintragListe.innerHTML = '';
let gesamtEinnahmen = 0;
let gesamtAusgaben = 0;
let bilanz = 0;
eintraege.forEach((eintrag, index) => {
const li = document.createElement('li');
@@ -17,14 +16,9 @@ function ladeEintraege() {
eintragListe.appendChild(li);
if (eintrag.betrag >= 0) {
gesamtEinnahmen += parseFloat(eintrag.betrag)
} else {
gesamtAusgaben += parseFloat(eintrag.betrag);
}
});
bilanz += parseFloat(eintrag.betrag)
const bilanz = gesamtEinnahmen + gesamtAusgaben;
});
document.getElementById('bilanz').textContent = `${bilanz.toFixed(2)}`;
}
@@ -66,25 +60,16 @@ function fuegeEintragHinzu() {
const betrag = document.getElementById('betrag').value;
const datum = document.getElementById('datum').value;
if (beschreibung && betrag && datum) {
const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
eintraege.push({'beschreibung': beschreibung, 'betrag': betrag, 'datum': datum});
localStorage.setItem('eintraege', JSON.stringify(eintraege));
eintraege.push({'beschreibung': beschreibung, 'betrag': betrag, 'datum': datum});
ladeEintraege();
console.log({beschreibung, betrag, datum});
console.log({'beschreibung': beschreibung, 'betrag': betrag, 'datum': datum});
document.getElementById('beschreibung').value = '';
document.getElementById('betrag').value = '';
document.getElementById('datum').value = '';
localStorage.setItem('eintraege', JSON.stringify(eintraege));
ladeEintraege();
document.getElementById('beschreibung').value = '';
document.getElementById('betrag').value = '';
document.getElementById('datum').value = '';
} else {
Swal.fire("Bitte alle Felder ausfüllen")
}
}
ladeEintraege();
Haushaltsplaner/style.css
+2 -2
View File
@@ -11,11 +11,11 @@ main {
padding: 1em;
}
.input-container {
.form-container {
display: flex;
gap: .7em;
}
.input-container input {
.form-container input {
height: 2em;
}