Scribd
Upload
16 views4 pages

Untitled Document

The document provides code for an interactive to-do list application including HTML, CSS and JavaScript code. It also includes instructions to create the file structure and run the application.

Uploaded by

hrishikeshk890
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views4 pages

Untitled Document

The document provides code for an interactive to-do list application including HTML, CSS and JavaScript code. It also includes instructions to create the file structure and run the application.

Uploaded by

hrishikeshk890
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like