Unterricht 10.07.

2026-07-10 12:12:28 +02:00
parent 13579440d3
commit 0fd38519b5
12 changed files with 132 additions and 35 deletions
@@ -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>
@@ -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') || '';
@@ -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;
+}