Okay, let's create a simple web application to track daily tasks through different stages. We'll use HTML, CSS, and JavaScript for this. Task Tracker

Task Tracker

body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; color: #333; } .container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #555; margin-bottom: 30px; } .add-task { display: flex; margin-bottom: 20px; } #newTaskInput { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; } #addTaskBtn { padding: 10px 15px; background-color: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } #addTaskBtn:hover { background-color: #4cae4c; } .task-list { margin-top: 20px; } .task-item { background-color: #eee; padding: 15px; margin-bottom: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #5bc0de; /* Default stage color */ } .task-item span { flex-grow: 1; margin-right: 10px; } .task-item .stage { font-weight: bold; padding: 5px 10px; border-radius: 4px; background-color: #ddd; /* Default stage background */ color: #333; margin-right: 10px; min-width: 100px; /* Ensure stage name fits */ text-align: center; } .task-item button { padding: 5px 10px; background-color: #f0ad4e; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 5px; transition: background-color 0.3s ease; } .task-item button:hover { background-color: #ec971f; } .task-item button.delete-btn { background-color: #d9534f; } .task-item button.delete-btn:hover { background-color: #c9302c; } /* Stage-specific styling */ .task-item[data-stage="Design"] { border-left-color: #5bc0de; } .task-item[data-stage="Design"] .stage { background-color: #5bc0de; color: white; } .task-item[data-stage="CNC"] { border-left-color: #f0ad4e; } .task-item[data-stage="CNC"] .stage { background-color: #f0ad4e; color: white; } .task-item[data-stage="Casting"] { border-left-color: #d9534f; } .task-item[data-stage="Casting"] .stage { background-color: #d9534f; color: white; } .task-item[data-stage="Stone Work"] { border-left-color: #777; } .task-item[data-stage="Stone Work"] .stage { background-color: #777; color: white; } .task-item[data-stage="Glazing"] { border-left-color: #5cb85c; } .task-item[data-stage="Glazing"] .stage { background-color: #5cb85c; color: white; } .task-item[data-stage="Packaging"] { border-left-color: #337ab7; } .task-item[data-stage="Packaging"] .stage { background-color: #337ab7; color: white; } .task-item[data-stage="Completed"] { border-left-color: #aaa; text-decoration: line-through; } .task-item[data-stage="Completed"] .stage { background-color: #aaa; color: #fff; } .task-item[data-stage="Completed"] .next-stage-btn { display: none; } /* Hide next button when completed */ document.addEventListener('DOMContentLoaded', () => { const taskList = document.getElementById('taskList'); const newTaskInput = document.getElementById('newTaskInput'); const addTaskBtn = document.getElementById('addTaskBtn'); const stages = [ 'Design', 'CNC', 'Casting', 'Stone Work', 'Glazing', 'Packaging', 'Completed', ]; // Load tasks from local storage or use default let tasks = JSON.parse(localStorage.getItem('tasks')) || [ { id: 1, name: 'Sample Task 1', stage: 'Design' }, { id: 2, name: 'Sample Task 2', stage: 'Casting' }, ]; let nextId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1; // Function to save tasks to local storage function saveTasks() { localStorage.setItem('tasks', JSON.stringify(tasks)); } // Function to render tasks function renderTasks() { taskList.innerHTML = ''; // Clear existing list tasks.forEach(task => { const taskElement = document.createElement('div'); taskElement.classList.add('task-item'); taskElement.dataset.id = task.id; taskElement.dataset.stage = task.stage; // For CSS styling taskElement.innerHTML = ` ${task.name} ${task.stage} `; // Add event listeners for buttons const nextStageBtn = taskElement.querySelector('.next-stage-btn'); const deleteBtn = taskElement.querySelector('.delete-btn'); if (task.stage === 'Completed') { nextStageBtn.style.display = 'none'; // Hide button if completed } else { nextStageBtn.addEventListener('click', () => moveToNextStage(task.id)); } deleteBtn.addEventListener('click', () => deleteTask(task.id)); taskList.appendChild(taskElement); }); } // Function to add a new task function addTask() { const taskName = newTaskInput.value.trim(); if (taskName === '') { alert('Please enter a task name.'); return; } const newTask = { id: nextId++, name: taskName, stage: stages[0], // Start at the first stage ('Design') }; tasks.push(newTask); newTaskInput.value = ''; // Clear input saveTasks(); renderTasks(); } // Function to move a task to the next stage function moveToNextStage(taskId) { const taskIndex = tasks.findIndex(task => task.id === taskId); if (taskIndex === -1) return; const currentStageIndex = stages.indexOf(tasks[taskIndex].stage); if (currentStageIndex < stages.length - 1) { tasks[taskIndex].stage = stages[currentStageIndex + 1]; saveTasks(); renderTasks(); } } // Function to delete a task function deleteTask(taskId) { if (confirm('Are you sure you want to delete this task?')) { tasks = tasks.filter(task => task.id !== taskId); saveTasks(); renderTasks(); } } // Event listeners addTaskBtn.addEventListener('click', addTask); newTaskInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { addTask(); } }); // Initial render renderTasks(); }); This sets up a basic task tracker. You can add new tasks, see their current stage, move them to the next stage, and delete them. The tasks are saved in your browser's local storage, so they'll persist even if you close the tab.