From ca4313c51b82ad954504d046e8c4bec488d6ff68 Mon Sep 17 00:00:00 2001
From: abbasf <Famboupe.Abbas@Student.Reutlingen-University.DE>
Date: Tue, 18 Mar 2025 16:15:46 +0100
Subject: [PATCH] finished UI with dummy data
---
src/Controller.js | 64 +++++++++++++++++++++++++
src/Layout.html | 29 ++++--------
src/Stylesheet.css | 113 ++++++++++++++++++++++++++++++++++++---------
3 files changed, 164 insertions(+), 42 deletions(-)
diff --git a/src/Controller.js b/src/Controller.js
index e69de29..3db8379 100644
--- a/src/Controller.js
+++ b/src/Controller.js
@@ -0,0 +1,64 @@
+const todoForm = document.querySelector('form');
+const todoInput = document.getElementById('txt-todo');
+const todoList = document.getElementById('list-todo');
+
+// Alle Elemente werden hier gespeichert
+let todoElements = [];
+
+todoForm.addEventListener('submit', function(e) {
+ // Verhindert das Neuladen der Seite
+ e.preventDefault();
+ addElement();
+});
+
+function addElement() {
+ const todoTxt = todoInput.value.trim();
+ if (todoTxt.length > 0) {
+ todoElements.push(todoTxt);
+ updateList();
+ todoInput.value = "";
+ }
+}
+
+function updateList() {
+ todoList.innerHTML = "";
+ todoElements.forEach((todo, index) => {
+ const todoElement = createItem(todo, index);
+ todoList.append(todoElement);
+ });
+}
+
+function createItem(item, index) {
+ const todoListNode = document.createElement("li");
+ const itemId = "item-" + index;
+ todoListNode.className = "items-todo";
+
+ todoListNode.innerHTML = `
+ <input type="checkbox" id="${itemId}">
+ <label class="custom-checkbox" for="${itemId}">
+ <svg fill="transparent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+ <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
+ </svg>
+ </label>
+ <label for="${itemId}" class="item-text">
+ ${item}
+ </label>
+ <button class="btn-delete">
+ <svg fill="var(--secondary-color)" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+ <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
+ </svg>
+ </button>
+ `;
+
+ // Event-Listener für das Löschen einer Aufgabe
+ todoListNode.querySelector(".btn-delete").addEventListener("click", function() {
+ removeElement(index);
+ });
+
+ return todoListNode;
+}
+
+function removeElement(index) {
+ todoElements.splice(index, 1);
+ updateList();
+}
diff --git a/src/Layout.html b/src/Layout.html
index cc416a1..c0a3efa 100644
--- a/src/Layout.html
+++ b/src/Layout.html
@@ -3,34 +3,23 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Stylesheet.css">
- <script src="Controller.js"></script>
+ <script src="Controller.js" defer></script>
<title>To-Do-List</title>
</head>
<body>
- <h1>TODO-Liste</h1>
- <div id="main-container">
+ <div id="container">
+ <div id="left-side">
+ <h1>TODO-Liste</h1>
<form>
<input id="txt-todo" type="text" placeholder="Aufgabe">
<button id="btn-add">Hinzufügen</button>
</form>
+ </div>
+ <div id="right-side">
<ul id="list-todo">
- <li class="items-todo">
- <input type="checkbox" id="item-1">
- <label class="custom-checkbox" for="item-1">
- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
- <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
- </svg>
- </label>
- <label for="item-1" class="item-text">
- webdev project for uni
- </label>
- <button class="btn-delete">
- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
- <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
- </svg>
- </button>
- </li>
+ <li class="items-todo"></li>
</ul>
</div>
+</div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/Stylesheet.css b/src/Stylesheet.css
index 2b700c9..94dcdcf 100644
--- a/src/Stylesheet.css
+++ b/src/Stylesheet.css
@@ -6,6 +6,12 @@
--text-color: #000000;
}
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
html{
font-family: "Consolas", Arial, sans-serif;
font-size: 16px;
@@ -14,62 +20,125 @@ html{
body{
min-height: 100vh;
- padding: 10px;
background-color: var(--background);
display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#container{
+ display: flex;
+ width: 80%;
+ max-width: 1200px;
+}
+
+
+#left-side{
+ flex: 1;
+ display: flex;
flex-direction: column;
align-items: center;
+ justify-content: center;
+ padding: 20px;
}
h1{
- margin-top: 100px;
- margin-bottom: 20px;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
- text-align: center;
color: var(--accent-color);
+ margin-bottom: 20px;
}
-.main-container{
- width: 700px;
- max-width: 100%;
- display: flex;
- flex-direction: column;
- gap: 10px;
+form{
+ position: relative;
+ width: 100%;
+ max-width: 400px;
}
#txt-todo{
- box-sizing: border-box;
- padding: 12px 20px;
width: 100%;
- background: none;
+ padding: 12px 20px;
+ border: 2px solid var(--secondary-color);
border-radius: 1000px;
font: inherit;
color: var(--text-color);
caret-color: var(--accent-color);
+ background: none;
}
-#text-todo:focus{
+#txt-todo:focus{
outline: none;
}
-form{
- position: relative;
-}
-
#btn-add{
position: absolute;
top: 0;
right: 0;
-
- background-color: var(--accent-color);
height: 100%;
padding: 0 30px;
border: none;
border-radius: 1000px;
font: inherit;
- font-weight: lighter;
color: var(--background);
+ background-color: var(--accent-color);
cursor: pointer;
-}
\ No newline at end of file
+}
+
+
+#right-side{
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+#list-todo{
+ width: 100%;
+ max-width: 400px;
+ list-style: none;
+}
+
+.items-todo{
+ background-color: var(--primary-color);
+ padding: 15px;
+ margin-bottom: 10px;
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+}
+
+.items-todo .item-text{
+ flex-grow: 1;
+ padding-left: 10px;
+}
+
+.btn-delete{
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.custom-checkbox{
+ border: 2px solid var(--accent-color);
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+input[type="checkbox"]{
+ display: none;
+}
+
+input[type="checkbox"]:checked ~ .custom-checkbox{
+ background-color: var(--accent-color);
+}
+
+input[type="checkbox"]:checked ~ .item-text{
+ text-decoration: line-through;
+ color: var(--secondary-color);
+}
--
GitLab