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
.idea/vcs.xml
Generated
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
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
+3 -18
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,14 +60,8 @@ 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')) || [];
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();
@@ -82,9 +70,6 @@ function fuegeEintragHinzu() {
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;
}
Leuchtturm/index.html
-3
View File
@@ -161,9 +161,6 @@
E-Mail: mail@mustermann.de<br>
Website: www.mustermann.de
</p>
<p>
<strong>Bei redaktionellen Inhalten:</strong><br>
TodoListe/index.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufgabenliste</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./media/img/icon.png">
<link rel="stylesheet" href="./style.css">
<!-- Externe Stylesheets und Scripts für Design und Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
</head>
<body>
<div class="container schatten-farbverlauf">
<div class="aufgaben-app">
<h2><img src="./media/img/icon.png" alt="Applogo"> Aufgabenliste</h2>
<div class="input-container">
<input type="text" id="input-box" placeholder="Neue Aufgabe eintragen...">
<button class="swal2-toast" onclick="neueAufgabe()"><i class="material-icons">add</i></button>
</div>
<ul id="todo-list-container"></ul>
</div>
</div>
<script src="./script.js" defer></script>
</body>
</html>
TodoListe/media/fonts/FiraSans-Regular.ttf
BIN
View File
Binary file not shown.
TodoListe/media/img/checked.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

TodoListe/media/img/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

TodoListe/media/img/unchecked.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

TodoListe/script.js
+22
View File
@@ -0,0 +1,22 @@
const inputBox = document.querySelector("#input-box");
const todoListContainer = document.querySelector("#todo-list-container");
function neueAufgabe(){
inputBox.focus();
if (inputBox.value === '') {
return;
}
let newListItem = document.createElement('li');
newListItem.textContent = inputBox.value;
todoListContainer.appendChild(newListItem);
saveData();
inputBox.value = '';
}
function saveData()
{
localStorage.setItem('data', todoListContainer.innerHTML);
}
todoListContainer.innerHTML = localStorage.getItem('data') || '';
TodoListe/style.css
+60
View File
@@ -0,0 +1,60 @@
@font-face {
font-family: 'Fira-Sans';
src: url("./media/fonts/FiraSans-Regular.ttf") format("truetype");
}
html {
font-size: 20px;
box-sizing: border-box;
}
* {
font-family: 'Fira-Sans', sans-serif;
}
.container {
margin: auto;
border-radius: 1em;
corner-shape: squircle bevel;
width: clamp(400px, 60vw, 800px);
}
.aufgaben-app {
margin: 10px;
padding: 10px;
border-radius: 1em;
corner-shape: squircle bevel;
background-color: ivory;
}
.aufgaben-app h2 {
font-size: 2rem;
}
.aufgaben-app h2 img {
max-height: 1em;
}
.input-container {
display: flex;
flex-wrap: nowrap;
gap: 1em;
}
.input-container #input-box {
flex-grow: 1;
}
.input-container button {
cursor: pointer;
background-color: lightskyblue;
border-radius: 100%;
corner-shape: squircle;
}
.schatten-farbverlauf {
background: linear-gradient(45deg, red, orange, yellow, green, blue, violet, pink);
padding: 3px;
}