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

Unterricht 09.07.

Browse Source
This commit is contained in:
Max
2026-07-09 13:36:52 +02:00
parent 25526f7868
commit 13579440d3
7 changed files with 169 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/codeStyles/codeStyleConfig.xml
Generated
+5
View File
@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default - Lejmi" />
</state>
</component>
.idea/inspectionProfiles/Project_Default.xml
Generated
+13
View File
@@ -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>
.idea/vcs.xml
Generated
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
Haushaltsplaner/index.html
+31
View File
@@ -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>
Haushaltsplaner/script.js
+90
View File
@@ -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();
Haushaltsplaner/style.css
+21
View File
@@ -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;
}
Leuchtturm/style.css
+2 -2
View File
@@ -12,7 +12,7 @@ body {
header { header {
margin: 0; margin: 0;
text-align: center; text-align: center;
padding: 1rem 0 3rem; padding: 1rem 0 1.5rem;
background: linear-gradient(to top, deepskyblue, ivory); background: linear-gradient(to top, deepskyblue, ivory);
} }
@@ -25,7 +25,7 @@ main {
footer { footer {
margin: 0; margin: 0;
text-align: center; text-align: center;
padding: 3rem 0 1rem; padding: 1.5rem 0 1rem;
background-color: ivory; background-color: ivory;
} }