From 9680fd3d39550b68f354f53bd33da4dfe2ee20b4 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 14 Jul 2026 14:26:09 +0200 Subject: [PATCH] =?UTF-8?q?React-App=20f=C3=BCr=20Todoliste=20aus=20Beispi?= =?UTF-8?q?el=20aus=20der=20Ellmann-Vorlesung=20und=20der=20urspr=C3=BCngl?= =?UTF-8?q?ichen=20Todo-App=20zusammengebastelt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- react-todolist/index.html | 17 ++-- react-todolist/src/App.jsx | 159 +++++++++-------------------------- react-todolist/src/index.css | 111 ------------------------ react-todolist/src/main.jsx | 2 +- react-todolist/src/style.css | 79 +++++++++++++++++ 6 files changed, 130 insertions(+), 242 deletions(-) delete mode 100644 react-todolist/src/index.css create mode 100644 react-todolist/src/style.css diff --git a/README.md b/README.md index 9cc1cdd..0e70c28 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # React App zum Laufen bringen -1. 'Erster React Test' Ordner in Eingabeaufforderung oder PowerShell öffnen +1. 'react-todolist' Ordner in Eingabeaufforderung oder PowerShell öffnen 2. `npm install` -> npm installiert Abhängigkeiten für React 3. `npm run dev` -> npm startet React-Development-Server; Ausgabe sollte ungefähr sein: ``` @@ -11,4 +11,4 @@ ``` 4. Eingabeaufforderung / PowerShell geöffnet lassen, da sonst auch der Server beendet wird 5. Falls sich Browserfenster nicht automatisch öffnet, ist die React App über den Link (siehe oben) erreichbar -6. Dateien innerhalb von 'Erster React Test/src' verändern, um die React App weiterzuentwickeln +6. Dateien innerhalb von 'react-todolist/src' verändern, um die React App weiterzuentwickeln diff --git a/react-todolist/index.html b/react-todolist/index.html index 134c4e3..592dd3c 100644 --- a/react-todolist/index.html +++ b/react-todolist/index.html @@ -1,13 +1,12 @@ - - - - + + + react-todolist - - -
- - + + +
+ + diff --git a/react-todolist/src/App.jsx b/react-todolist/src/App.jsx index 4f03aa1..45c4a00 100644 --- a/react-todolist/src/App.jsx +++ b/react-todolist/src/App.jsx @@ -1,122 +1,43 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import heroImg from './assets/hero.png' -import './App.css' +import {useState} from "react"; -function App() { - const [count, setCount] = useState(0) +export default function App() { + const [input, setInput] = useState(""); + const [todos, setTodos] = useState([]); - return ( - <> -
-
- - React logo - Vite logo + function addTodo() { + if (input.trim() === "") return; + setTodos([...todos, {id: Date.now(), text: input, erledigt: false}]); + setInput(""); + } + + function deleteTodo(id) { + setTodos(todos.filter((todo) => todo.id !== id)); + } + + function toggleTodo(id) { + setTodos(todos.map((todo) => + todo.id === id ? {...todo, erledigt: !todo.erledigt} : todo + )); + } + + return ( +
+
+

Aufgabenliste

+
+ setInput(e.target.value)} placeholder="Neue Aufgabe eintragen..."/> + +
+
    + {todos.map((todo) => ( +
  • + toggleTodo(todo.id)}> + {todo.text}: {todo.erledigt ? "bereits " : "noch nicht "} erledigt + + +
    • ))} +
+
-
-

Get started

-

- Edit src/App.jsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- - ) -} - -export default App + ); +} \ No newline at end of file diff --git a/react-todolist/src/index.css b/react-todolist/src/index.css deleted file mode 100644 index 2c84af0..0000000 --- a/react-todolist/src/index.css +++ /dev/null @@ -1,111 +0,0 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } -} - -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } -} - -body { - margin: 0; -} - -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} diff --git a/react-todolist/src/main.jsx b/react-todolist/src/main.jsx index b9a1a6d..29a1802 100644 --- a/react-todolist/src/main.jsx +++ b/react-todolist/src/main.jsx @@ -1,6 +1,6 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' +import './style.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( diff --git a/react-todolist/src/style.css b/react-todolist/src/style.css new file mode 100644 index 0000000..d525506 --- /dev/null +++ b/react-todolist/src/style.css @@ -0,0 +1,79 @@ +@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; +} + +.checked-list-item +{ + text-decoration: line-through; + color: lightslategrey; +} + +ul { + list-style: none; +} + +li { + display: flex; + gap: .7em; +} + +label { + flex-grow: 1; +} \ No newline at end of file