alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 11:06:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add To-Do List application with HTML, CSS, and JavaScript

Browse Source
This commit is contained in:
vista-man
2025-01-27 18:09:53 +01:00
parent f829630017
commit ab03df87da
3 changed files with 123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
JavaScript/to do/index.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Add some basic styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
li.completed {
text-decoration: line-through;
color: #888;
}
button {
background: none;
border: none;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task">
<button id="add-task">Add</button>
<ul id="task-list">
<!-- Tasks will be added here dynamically -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>

25
JavaScript/to do/script.js Normal file
View File

@@ -0,0 +1,25 @@
document.getElementById('add-task').addEventListener('click', function() {
const taskText = document.getElementById('new-task').value;
if (taskText === '') return;
const li = document.createElement('li');
li.textContent = taskText;
const completeButton = document.createElement('button');
completeButton.textContent = 'Complete';
completeButton.addEventListener('click', function() {
li.classList.toggle('completed');
});
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
li.remove();
});
li.appendChild(completeButton);
li.appendChild(deleteButton);
document.getElementById('task-list').appendChild(li);
document.getElementById('new-task').value = '';
});

40
JavaScript/to do/styles.css Normal file
View File

@@ -0,0 +1,40 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
li.completed {
text-decoration: line-through;
color: #888;
}
button {
background: none;
border: none;
cursor: pointer;
}