This web application allows users to manage a list of tasks, organizing them into three categories: To Do, In Progress, and Done. New tasks can be added, and existing tasks can be moved manually across the three stages using control buttons.
Create the Project Directory
Start by creating a new folder named ToDoJS inside the directory C:\src\IW17\Demos\.
Navigate into the ToDoJS folder. This will contain all the files required for the application.
Create the HTML Layout
Inside the ToDoJS folder, create a new file called index.html.
This file defines the structure and layout of the task board. Add the following content to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>To Do List</title>
</head>
<body>
<!-- Top-level container with horizontal layout and spacing -->
<div style="display: flex; gap: 20px">
<!-- To Do Column -->
<div>
<h3>To Do</h3>
<!-- Toggle between Add Task and input -->
<div id="inputToggle">
<button id="showInputBtn">Add Task +</button>
</div>
<div id="inputForm" style="display: none;">
<input id="taskInput" placeholder="Task name" />
<button id="saveTaskBtn">Save</button>
</div>
<!-- List of To Do tasks -->
<div id="todoList"></div>
</div>
<!-- In Progress Column -->
<div>
<h3>In Progress</h3>
<div id="inprogressList"></div>
</div>
<!-- Done Column -->
<div>
<h3>Done</h3>
<div id="doneList"></div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
Add JavaScript Logic
Next, create a file called game.js in the same folder. This script contains all the logic for adding tasks and moving them between columns.
Paste the following code:
// Define the task data structure
const tasks = {
todo: [],
inprogress: [],
done: []
};
// Get references to UI elements
const taskInput = document.getElementById('taskInput');
const showInputBtn = document.getElementById('showInputBtn');
const saveTaskBtn = document.getElementById('saveTaskBtn');
const inputToggle = document.getElementById('inputToggle');
const inputForm = document.getElementById('inputForm');
const todoList = document.getElementById('todoList');
const inprogressList = document.getElementById('inprogressList');
const doneList = document.getElementById('doneList');
// Show the input field when "Add Task +" is clicked
showInputBtn.addEventListener('click', () => {
inputToggle.style.display = 'none';
inputForm.style.display = 'block';
taskInput.focus();
});
// Save the new task when "Save" is clicked
saveTaskBtn.addEventListener('click', () => {
const text = taskInput.value.trim();
if (!text) return;
tasks.todo.push(text); // Add to To Do list
taskInput.value = ''; // Clear input
inputForm.style.display = 'none';
inputToggle.style.display = 'block';
renderAll(); // Re-render task lists
});
// Move a task from one column to another
function moveTask(task, from, to) {
if (from === to) return;
const fromList = tasks[from];
const toList = tasks[to];
const index = fromList.indexOf(task);
if (index !== -1) {
fromList.splice(index, 1); // Remove from source
toList.push(task); // Add to destination
renderAll(); // Update UI
}
}
// Render a single column with task elements and control buttons
function renderColumn(container, items, type) {
container.innerHTML = ''; // Clear previous content
items.forEach(task => {
const row = document.createElement('div');
row.className = 'task-row';
// Add back button for 'inprogress' and 'done'
if (type === 'inprogress') {
row.appendChild(makeButton('←', () => moveTask(task, 'inprogress', 'todo')));
}
if (type === 'done') {
row.appendChild(makeButton('←', () => moveTask(task, 'done', 'inprogress')));
}
// Add task text
const label = document.createElement('span');
label.textContent = task;
row.appendChild(label);
// Add forward button for 'todo' and 'inprogress'
if (type === 'todo') {
row.appendChild(makeButton('→', () => moveTask(task, 'todo', 'inprogress')));
}
if (type === 'inprogress') {
row.appendChild(makeButton('→', () => moveTask(task, 'inprogress', 'done')));
}
container.appendChild(row);
});
}
// Create a control button for task movement
function makeButton(label, handler) {
const btn = document.createElement('button');
btn.textContent = label;
btn.onclick = handler;
return btn;
}
// Render all three columns
function renderAll() {
renderColumn(todoList, tasks.todo, 'todo');
renderColumn(inprogressList, tasks.inprogress, 'inprogress');
renderColumn(doneList, tasks.done, 'done');
}
// Initial render on page load
renderAll();
Launching the Application
Before testing the application, ensure that the Apache Server is running and properly configured.
Once it’s running, open your browser and navigate to http://127.0.0.1/demo/ToDoJS/.
You should see a fully working task management board with three columns and buttons to add and move tasks between them.
See also