Add start and end date inputs to To-Do List application

JavaScript/to do/index.html

@@ -48,6 +48,8 @@
     <div class="container">
         <h1>To-Do List</h1>
         <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>
         <ul id="task-list">
             <!-- Tasks will be added here dynamically -->

JavaScript/to do/script.js

@@ -1,10 +1,19 @@
 document.getElementById('add-task').addEventListener('click', function() {
     const taskText = document.getElementById('new-task').value;
+    const startDate = document.getElementById('start-date').value;
+    const endDate = document.getElementById('end-date').value;
     if (taskText === '') return;
 
     const li = document.createElement('li');
     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');
     completeButton.textContent = 'Complete';
     completeButton.addEventListener('click', function() {
@@ -17,9 +26,12 @@ document.getElementById('add-task').addEventListener('click', function() {
         li.remove();
     });
 
+    li.appendChild(taskDetails);
     li.appendChild(completeButton);
     li.appendChild(deleteButton);
 
     document.getElementById('task-list').appendChild(li);
     document.getElementById('new-task').value = '';
+    document.getElementById('start-date').value = '';
+    document.getElementById('end-date').value = '';
 });

JavaScript/to do/styles.css

@@ -33,8 +33,36 @@ li.completed {
     color: #888;
 }
 
-button {
-    background: none;
-    border: none;
-    cursor: pointer;
+input[type="text"], input[type="date"] {
+    margin: 5px 0;
+    padding: 10px;
+    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;
 }