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,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default - Lejmi" />
+  </state>
+</component>
@@ -0,0 +1,13 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="GrazieInspection" enabled="false" level="TYPO" enabled_by_default="false" />
+    <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="NonAsciiCharacters" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
@@ -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;
+}
@@ -12,7 +12,7 @@ body {
 header {
    margin: 0;
    text-align: center;
-    padding: 1rem 0 3rem;
+    padding: 1rem 0 1.5rem;
    background: linear-gradient(to top, deepskyblue, ivory);
 }

@@ -25,7 +25,7 @@ main {
 footer {
    margin: 0;
    text-align: center;
-    padding: 3rem 0 1rem;
+    padding: 1.5rem 0 1rem;
    background-color: ivory;
 }

@@ -110,4 +110,4 @@ main section {
    .right img:hover {
        transform-origin: top right;
    }
-}
+}