Skip to content
Snippets Groups Projects
Commit ca4313c5 authored by Famboupe Abbas's avatar Famboupe Abbas
Browse files

finished UI with dummy data

parent 6457a024
Branches main
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/Controller.js
+ 64
− 0
View file @ ca4313c5
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();
}
src/Layout.html
+ 9
− 20
View file @ ca4313c5
......@@ -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>
src/Stylesheet.css
+ 91
− 22
View file @ ca4313c5
......@@ -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);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment