I can certainly provide you with a zip file containing the entire project.
However, please note that
I can only generate text and cannot create actual files or perform file operations. I'll give you the
code for each file, and you can manually create them in your development environment.
#### HTML (index.html)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
<button id="clearCompleted">Clear Completed</button>
<p id="taskCount">Tasks: 0</p>
</div>
<script src="script.js"></script>
</body>
</html>
```
#### CSS (style.css)
```css
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 70%;
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
li input[type="checkbox"] {
margin-right: 10px;
}
.deleteTask {
background-color: #ff6f61;
color: #fff;
border: none;
border-radius: 5px;
}
.deleteTask:hover {
background-color: #ff403d;
}
```
#### JavaScript (script.js)
```javascript
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTask');
const taskList = document.getElementById('taskList');
const clearCompletedButton = document.getElementById('clearCompleted');
const taskCount = document.getElementById('taskCount');
let tasks = [];
function addTask() {
const taskText = taskInput.value.trim();
if (taskText !== '') {
const newTask = document.createElement('li');
newTask.innerHTML = `
<input type="checkbox">
<span>${taskText}</span>
<button class="deleteTask">Delete</button>
`;
taskList.appendChild(newTask);
tasks.push({ text: taskText, completed: false });
updateTaskCount();
taskInput.value = '';
}
}
addTaskButton.addEventListener('click', addTask);
taskList.addEventListener('click', function(event) {
const target = event.target;
if (target.classList.contains('deleteTask')) {
const index =
Array.from(target.parentNode.parentNode.children).indexOf(target.parentNode);
tasks.splice(index, 1);
target.parentNode.remove();
updateTaskCount();
} else if (target.type === 'checkbox') {
const index =
Array.from(target.parentNode.parentNode.children).indexOf(target.parentNode);
tasks[index].completed = target.checked;
updateTaskCount();
}
});
clearCompletedButton.addEventListener('click', function() {
tasks = tasks.filter(task => !task.completed);
const completedTasks = document.querySelectorAll('li input[type="checkbox"]:checked');
completedTasks.forEach(task => task.parentNode.remove());
updateTaskCount();
});
function updateTaskCount() {
taskCount.textContent = `Tasks: ${tasks.length}`;
}
```
#### Create a folder structure
- Create a folder named `InteractiveToDoList`.
- Inside this folder, create three files: `index.html`, `style.css`, and `script.js`. Paste the
respective code into these files.
After creating the files, open `index.html` in a web browser. You should see the interactive to-do
list application. You can add tasks, mark them as completed, delete them, and clear completed
tasks.
