To-Do Task Manager
This clean and modern To-Do Task Manager web app is designed for simplicity and ease of use. Built with pure HTML, CSS, and JavaScript, it allows you to quickly add new tasks, view your task list, and mark tasks as complete with a single click. The intuitive interface and smooth interactions make task management a breeze, whether for personal productivity or daily reminders. Perfect for beginners and anyone who loves lightweight, responsive web tools.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple To-Do Task Manager</title>
<style>
/* Reset */
* {
box-sizing: border-box;
}
body {
background: #f0f0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 40px 0;
min-height: 100vh;
}
.todo-container {
background: #fff;
width: 400px;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
h1 {
margin: 0 0 20px;
font-weight: 700;
color: #222;
text-align: center;
}
.input-group {
display: flex;
gap: 10px;
}
input[type="text"] {
flex-grow: 1;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #00bcd4;
border-radius: 6px;
outline: none;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
border-color: #007c91;
}
button {
background-color: #00bcd4;
border: none;
color: white;
padding: 12px 20px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #007c91;
}
ul.task-list {
margin-top: 25px;
list-style: none;
padding: 0;
max-height: 300px;
overflow-y: auto;
}
ul.task-list li {
background: #e0f7fa;
padding: 14px 18px;
border-radius: 8px;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: #007c91;
}
ul.task-list li button.delete-btn {
background: #f44336;
border: none;
color: white;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s ease;
}
ul.task-list li button.delete-btn:hover {
background-color: #b71c1c;
}
/* Scrollbar styling */
ul.task-list::-webkit-scrollbar {
width: 6px;
}
ul.task-list::-webkit-scrollbar-thumb {
background-color: #00bcd4;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="todo-container">
<h1>To-Do Task Manager</h1>
<div class="input-group">
<input type="text" id="taskInput" placeholder="Enter new task..." />
<button id="addTaskBtn">Add Task</button>
</div>
<ul class="task-list" id="taskList">
<!-- Tasks will appear here -->
</ul>
</div>
<script>
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
// Add task function
function addTask() {
const taskText = taskInput.value.trim();
if (!taskText) {
alert('Please enter a task.');
return;
}
// Create li
const li = document.createElement('li');
li.textContent = taskText;
// Create delete button
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Complete';
deleteBtn.classList.add('delete-btn');
deleteBtn.onclick = () => {
taskList.removeChild(li);
};
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = '';
taskInput.focus();
}
addTaskBtn.addEventListener('click', addTask);
// Also add task on Enter key press
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTask();
}
});
</script>
</body>
</html>
