Gestionnaire de tâches

1,870 chorfla

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 April 2026

Exemple de menu HTML avec logo (français)

26 September 2025

Animation de chargement CSS avec image d'arrière-plan

24 October 2025

Chat suiveur de souris HTML CSS JavaScript

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