Gestionnaire de tâches

1,795 chorfla

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 January 2024

Formulaire de connexion avec validation des entrées

17 April 2026

Modèle HTML de site web de films

30 October 2025

Barre de navigation CSS pour les réseaux sociaux

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