Unterricht 09.07.

2026-07-09 13:36:52 +02:00
parent 25526f7868
commit 13579440d3
7 changed files with 169 additions and 3 deletions
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <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>
+</head>
+<body>
+
+<main>
+    <h1>Haushaltsbuch</h1>
+    <div 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>
+
+    <h2>Einträge</h2>
+    <ul id="eintragListe"></ul>
+
+    <h2>Bilanz</h2>
+    <p><span id="bilanz">0.00</span> EUR</p>
+</main>
+
+
+<script src ="./script.js" defer></script>
+</body>
+</html>
@@ -0,0 +1,90 @@
+"use strict";
+
+const eintragListe = document.querySelector("#eintragListe");
+
+function ladeEintraege() {
+    const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
+    eintragListe.innerHTML = '';
+
+    let gesamtEinnahmen = 0;
+    let gesamtAusgaben = 0;
+
+    eintraege.forEach((eintrag, index) => {
+        const li = document.createElement('li');
+        li.innerHTML = `<span>${eintrag.beschreibung}: ${eintrag.betrag} EUR am ${eintrag.datum}</span>`;
+        console.log(li);
+        li.appendChild(erstelleLoeschenButton(index));
+
+        eintragListe.appendChild(li);
+
+        if (eintrag.betrag >= 0) {
+            gesamtEinnahmen += parseFloat(eintrag.betrag)
+        } else {
+            gesamtAusgaben += parseFloat(eintrag.betrag);
+        }
+    });
+
+    const bilanz = gesamtEinnahmen + gesamtAusgaben;
+
+    document.getElementById('bilanz').textContent = `${bilanz.toFixed(2)}`;
+}
+
+function erstelleLoeschenButton(index) {
+    const button = document.createElement('button');
+    button.textContent = 'Loeschen';
+    button.addEventListener('click', ((index) => {
+        Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!"
+        }).then((result) => {
+            if (result.isConfirmed) {
+                const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
+                console.log(eintraege);
+                eintraege.splice(index, 1);
+                console.log(eintraege);
+                localStorage.setItem('eintraege', JSON.stringify(eintraege));
+                ladeEintraege();
+                Swal.fire({
+                    title: "Deleted!",
+                    text: "Your file has been deleted.",
+                    icon: "success"
+                });
+            }
+        });
+
+    }));
+    return button;
+}
+
+function fuegeEintragHinzu() {
+    const beschreibung = document.getElementById('beschreibung').value;
+    const betrag = document.getElementById('betrag').value;
+    const datum = document.getElementById('datum').value;
+
+    if (beschreibung && betrag && datum) {
+        const eintraege = JSON.parse(localStorage.getItem('eintraege')) || [];
+
+        eintraege.push({'beschreibung': beschreibung, 'betrag': betrag, 'datum': datum});
+
+        console.log({beschreibung, betrag, datum});
+        console.log({'beschreibung': beschreibung, 'betrag': betrag, 'datum': datum});
+
+        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();
@@ -0,0 +1,21 @@
+body {
+    font-family: 'Verdana', 'Arial', sans-serif;
+    font-size: 1.2rem;
+}
+
+main {
+    margin: auto;
+    width: 90vw;
+    background-color: ivory;
+    box-shadow: 2px 2px 10px 2px lightgray;
+    padding: 1em;
+}
+
+.input-container {
+    display: flex;
+    gap: .7em;
+}
+
+.input-container input {
+    height: 2em;
+}