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 start and end date inputs to To-Do List application

Browse Source
This commit is contained in:
vista-man
2025-01-27 18:11:45 +01:00
parent ab03df87da
commit 96a79e60e9
3 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
JavaScript/to do/index.html
View File

@@ -48,6 +48,8 @@
<div class="container"> <div class="container">
<h1>To-Do List</h1> <h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task"> <input type="text" id="new-task" placeholder="Add a new task">
<input type="date" id="start-date" placeholder="Start Date">
<input type="date" id="end-date" placeholder="End Date">
<button id="add-task">Add</button> <button id="add-task">Add</button>
<ul id="task-list"> <ul id="task-list">
<!-- Tasks will be added here dynamically --> <!-- Tasks will be added here dynamically -->

12
JavaScript/to do/script.js
View File

@@ -1,10 +1,19 @@
document.getElementById('add-task').addEventListener('click', function() { document.getElementById('add-task').addEventListener('click', function() {
const taskText = document.getElementById('new-task').value; const taskText = document.getElementById('new-task').value;
const startDate = document.getElementById('start-date').value;
const endDate = document.getElementById('end-date').value;
if (taskText === '') return; if (taskText === '') return;
const li = document.createElement('li'); const li = document.createElement('li');
li.textContent = taskText; li.textContent = taskText;
const taskDetails = document.createElement('div');
taskDetails.className = 'task-details';
taskDetails.innerHTML = `
<span>Start Date: ${startDate}</span>
<span>End Date: ${endDate}</span>
`;
const completeButton = document.createElement('button'); const completeButton = document.createElement('button');
completeButton.textContent = 'Complete'; completeButton.textContent = 'Complete';
completeButton.addEventListener('click', function() { completeButton.addEventListener('click', function() {
@@ -17,9 +26,12 @@ document.getElementById('add-task').addEventListener('click', function() {
li.remove(); li.remove();
}); });
li.appendChild(taskDetails);
li.appendChild(completeButton); li.appendChild(completeButton);
li.appendChild(deleteButton); li.appendChild(deleteButton);
document.getElementById('task-list').appendChild(li); document.getElementById('task-list').appendChild(li);
document.getElementById('new-task').value = ''; document.getElementById('new-task').value = '';
document.getElementById('start-date').value = '';
document.getElementById('end-date').value = '';
}); });

36
JavaScript/to do/styles.css
View File

@@ -33,8 +33,36 @@ li.completed {
color: #888; color: #888;
} }
button { input[type="text"], input[type="date"] {
background: none; margin: 5px 0;
border: none; padding: 10px;
cursor: pointer; border: 1px solid #ddd;
border-radius: 3px;
width: calc(100% - 22px);
}
button {
background: #007BFF;
color: white;
border: none;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
}
button:hover {
background: #0056b3;
}
.task-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.task-details span {
margin: 2px 0;
font-size: 0.9em;
color: #555;
} }