Webleb - fragmentos de código - Administrador de tareas

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

Administrador de tareas

Recomendado

Cartera de dinero

Texto con degradado de neón

Animaciones impulsadas por desplazamiento Detección de desplazamiento

HTML

CSS

JS

Recomendado

Cartera de dinero

Texto con degradado de neón

Animaciones impulsadas por desplazamiento Detección de desplazamiento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS