<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>To-Do List with Search</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 500px;
margin: auto;
transition: background 0.3s, color 0.3s;
}
body.light {
background: #f4f4f4;
color: #000;
}
body.dark {
background: #121212;
color: #f1f1f1;
}
h1 {
text-align: center;
}
.top-controls {
display: flex;
justify-content: space-between;
align-items: center;
}
.toggle-mode {
cursor: pointer;
padding: 5px 10px;
border: none;
border-radius: 6px;
}
input[type="text"],
input[type="date"] {
padding: 10px;
margin: 5px 5px 10px 0;
}
button {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: rgba(255, 255, 255, 0.8);
color: #000;
padding: 10px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
flex-wrap: wrap;
}
body.dark li {
background: rgba(255, 255, 255, 0.05);
color: #f1f1f1;
}
.done {
text-decoration: line-through;
color: gray;
}
.task-text {
flex-grow: 1;
cursor: pointer;
}
.due-date {
font-size: 0.85em;
color: gray;
}
.overdue .task-text {
color: red;
font-weight: bold;
}
.sort-btn {
margin-bottom: 10px;
}
#searchInput {
width: 100%;
margin-bottom: 15px;
padding: 10px;
}
</style>
</head>
<body class="light">
<div class="top-controls">
<h1>📝 To-Do List</h1>
<button class="toggle-mode" onclick="toggleTheme()">🌓</button>
</div>
<input type="text" id="searchInput" placeholder="Search tasks… 🔍"/>
<div>
<input type="text" id="taskInput" placeholder="Add a new task…" />
<input type="date" id="dateInput" />
<button onclick="addTask()">Add</button>
<button class="sort-btn" onclick="sortTasks()">Sort by Date</button>
</div>
<ul id="taskList"></ul>
<script>
const taskInput = document.getElementById(‘taskInput’);
const dateInput = document.getElementById(‘dateInput’);
const searchInput = document.getElementById(‘searchInput’);
const taskList = document.getElementById(‘taskList’);
const body = document.body;
let tasks = JSON.parse(localStorage.getItem(‘tasks’)) || [];
let theme = localStorage.getItem(‘theme’) || ‘light’;
function renderTasks() {
const filter = searchInput.value.toLowerCase();
taskList.innerHTML = ”;
const today = new Date();
tasks.forEach((task, index) => {
if (!task.text.toLowerCase().includes(filter)) return;
const li = document.createElement(‘li’);
const taskDate = task.date ? new Date(task.date) : null;
const isOverdue = taskDate && !task.done && taskDate < today.setHours(0,0,0,0);
if (isOverdue) li.classList.add(‘overdue’);
const textSpan = document.createElement(‘span’);
textSpan.className = ‘task-text’;
textSpan.textContent = task.text;
if (task.done) textSpan.classList.add(‘done’);
textSpan.onclick = () => toggleDone(index);
const dateSpan = document.createElement(‘div’);
dateSpan.className = ‘due-date’;
if (task.date) {
const d = new Date(task.date);
dateSpan.textContent = ‘Due: ‘ + d.toLocaleDateString();
}
const deleteBtn = document.createElement(‘button’);
deleteBtn.textContent = ‘❌’;
deleteBtn.onclick = () => deleteTask(index);
li.appendChild(textSpan);
if (task.date) li.appendChild(dateSpan);
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
function addTask() {
const text = taskInput.value.trim();
const date = dateInput.value;
if (text === ”) return;
tasks.push({ text, date, done: false });
taskInput.value = ”;
dateInput.value = ”;
saveAndRender();
}
function toggleDone(index) {
tasks[index].done = !tasks[index].done;
saveAndRender();
}
function deleteTask(index) {
tasks.splice(index, 1);
saveAndRender();
}
function sortTasks() {
tasks.sort((a, b) => {
if (!a.date) return 1;
if (!b.date) return -1;
return new Date(a.date) – new Date(b.date);
});
saveAndRender();
}
function saveAndRender() {
localStorage.setItem(‘tasks’, JSON.stringify(tasks));
renderTasks();
}
function toggleTheme() {
theme = theme === ‘light’ ? ‘dark’ : ‘light’;
body.className = theme;
localStorage.setItem(‘theme’, theme);
}
// Apply saved theme
body.className = theme;
// Add task on Enter key
taskInput.addEventListener(‘keypress’, function (e) {
if (e.key === ‘Enter’) addTask();
});
// Filter tasks as you type
searchInput.addEventListener(‘input’, renderTasks);
renderTasks();
</script>
</body>
</html>
Mahalo
SIGNATURE:
Clifford "RAY" Hackett I founded www.adapt.org in 1980 it now has over 50 million members.
$500 of material=World’s fastest hydrofoil sailboat. http://sunrun.biz
Solar 