Administrador de tareas

1,602 chorfla

Abrir en el editor Publica tu código

Recomendado

27 January 2025

Página de destino de una agencia de marketing digital

13 July 2024

Botón de luciérnagas

6 April 2025

Impresionante formulario de inicio de sesión

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

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();
});