To-Do List

[HansMavik]

<title>To-Do App</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h1 { text-align: center; } .main-container { max-width: 500px; margin: 0 auto; } input[type="text"], input[type="date"], input[type="color"] { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; font-size: 16px; } button { padding: 10px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; } ul { list-style-type: none; padding: 0; } li { padding: 10px; background-color: #f4f4f4; margin: 5px 0; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } li.done { text-decoration: line-through; background-color: #d3ffd3; } .cat-section { margin-top: 20px; padding: 10px; border-radius: 5px; } .high-priority-task { background-color: #ff6666 !important; } .cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .due-date { font-size: 14px; color: #555; } .task-colors { display: flex; gap: 10px; margin-bottom: 10px; } .subcat-section { margin-left: 20px; border-left: 2px solid #ddd; padding-left: 20px; } </style>

To-Do App

Add Category

<div id="all-categories"></div>

<button class="delete-all-btn" onclick="deleteEverything()" style="background-color: #f44336; color: white;">
  Clear All Tasks
</button>

<script> function makeCategory() { const categoryInput = document.getElementById('cat-name-input'); const categoryColor = document.getElementById('cat-bg-color'); const newCategoryName = categoryInput.value.trim(); if (newCategoryName === '') return alert('Category needs a name!'); const allCategoriesDiv = document.getElementById('all-categories'); if (document.getElementById(`cat-${newCategoryName}`)) { return alert('This category already exists.'); } const catDiv = document.createElement('div'); catDiv.className = 'cat-section'; catDiv.id = `cat-${newCategoryName}`; catDiv.style.backgroundColor = categoryColor.value; catDiv.innerHTML = `

${newCategoryName}

Remove Category

Text Color: BG Color:

Add Task Add Subcategory

`; allCategoriesDiv.appendChild(catDiv); categoryInput.value = ''; categoryColor.value = '#ffffff'; } function addTaskToCategory(catName) { const taskInput = document.getElementById(`task-name-${catName}`); const taskTextColor = document.getElementById(`task-text-color-${catName}`).value; const taskBgColor = document.getElementById(`task-bg-color-${catName}`).value; const dueDate = document.getElementById(`task-due-${catName}`).value; const taskName = taskInput.value.trim(); if (taskName === '') return alert('Task name cannot be empty.'); const taskList = document.getElementById(`tasks-list-${catName}`); const taskItem = document.createElement('li'); taskItem.style.color = taskTextColor; taskItem.style.backgroundColor = taskBgColor; taskItem.innerHTML = ` ${taskName} ${dueDate ? `(Due: ${dueDate})` : ''} Done Priority Delete `; taskList.appendChild(taskItem); taskInput.value = ''; } function makeSubcategory(parentCatName) { const subcatInput = document.getElementById(`subcat-name-${parentCatName}`); const subcatName = subcatInput.value.trim(); if (subcatName === '') return alert('Subcategory needs a name!'); const parentCatDiv = document.getElementById(`cat-${parentCatName}`); const subcatDiv = document.createElement('div'); subcatDiv.className = 'subcat-section'; subcatDiv.id = `subcat-${parentCatName}-${subcatName}`; subcatDiv.innerHTML = `

${subcatName}

Remove Subcategory

Text Color: BG Color:

Add Task

`; parentCatDiv.appendChild(subcatDiv); subcatInput.value = ''; } function addTaskToSubcategory(parentCatName, subcatName) { const taskInput = document.getElementById(`task-name-${parentCatName}-${subcatName}`); const taskTextColor = document.getElementById(`task-text-color-${parentCatName}-${subcatName}`).value; const taskBgColor = document.getElementById(`task-bg-color-${parentCatName}-${subcatName}`).value; const dueDate = document.getElementById(`task-due-${parentCatName}-${subcatName}`).value; const taskName = taskInput.value.trim(); if (taskName === '') return alert('Task name cannot be empty.'); const taskList = document.getElementById(`tasks-list-${parentCatName}-${subcatName}`); const taskItem = document.createElement('li'); taskItem.style.color = taskTextColor; taskItem.style.backgroundColor = taskBgColor; taskItem.innerHTML = ` ${taskName} ${dueDate ? `(Due: ${dueDate})` : ''} Done Priority Delete `; taskList.appendChild(taskItem); taskInput.value = ''; } function markTaskDone(button) { const taskLi = button.parentElement; taskLi.classList.toggle('done'); } function markTaskHighPriority(button) { const taskLi = button.parentElement; taskLi.classList.toggle('high-priority-task'); } function deleteTask(button) { const taskLi = button.parentElement; taskLi.remove(); } function removeCategory(catName) { const catDiv = document.getElementById(`cat-${catName}`); catDiv.remove(); } function removeSubcategory(parentCatName, subcatName) { const subcatDiv = document.getElementById(`subcat-${parentCatName}-${subcatName}`); subcatDiv.remove(); } function deleteEverything() { if (confirm('Are you sure you want to delete everything?')) { document.getElementById('all-categories').innerHTML = ''; } } </script>