Webleb - UI Elements - Task Manager

HTML

CSS

/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h1 {
  text-align: center;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#taskInput {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filters button {
  background-color: #6c757d;
}

.filters button:hover {
  background-color: #5a6268;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  animation: fadeIn 0.5s;
}

li.completed {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

li.pending {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

li button {
  background

JS

document.addEventListener('DOMContentLoaded', () => {
  const taskInput = document.getElementById('taskInput');
  const addTaskBtn = document.getElementById('addTaskBtn');
  const taskList = document.getElementById('taskList');
  const darkModeToggle = document.getElementById('darkModeToggle');
  const filterButtons = document.querySelectorAll('.filters button');

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// Render tasks
  function renderTasks(filter = 'all') {
    taskList.innerHTML = '';
    const filteredTasks = filter === 'all' ? tasks : tasks.filter(task => filter === 'completed' ? task.completed : !task.completed);
    filteredTasks.forEach((task, index) => {
      const li = document.createElement('li');
      li.className = task.completed ? 'completed' : 'pending';
      li.innerHTML = `
        <span>${task.text}</span>
        <button onclick="removeTask(${index})">Remove</button>
      `;
      li.addEventListener('click', () => toggleTaskCompletion(index));
      taskList.appendChild(li);
    });
  }

// Add task
  addTaskBtn.addEventListener('click', () => {
    const text = taskInput.value.trim();
    if (text) {
      tasks.push({ text, completed: false });
      taskInput.value = '';
      saveTasks();
      renderTasks();
    }
  });

// Toggle task completion
  window.toggleTaskCompletion = (index) => {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();
    renderTasks();
  };

// Remove task
  window.removeTask = (index) => {
    tasks.splice(index, 1);
    saveTasks();
    renderTasks();
  };

// Save tasks to localStorage
  function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }

// Filter tasks
  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const filter = button.getAttribute('data-filter');
      renderTasks(filter);
    });
  });

// Dark mode toggle
  darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
  });

// Initial render
  renderTasks();
});

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS