WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Liste de tâches intelligentes
741
hasan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
24 June 2025
Elara Aydin : modèle HTML de blog personnel
17 October 2025
Modèle HTML de portfolio de concepteur Web
1 January 2025
Un code par codex
HTML
Copy
Smart To-Do List
Smart To-Do List
Add Task
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; color: #333; } .todo-container { background-color: #fff; width: 400px; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; } h1 { font-size: 28px; color: #333; margin-bottom: 20px; font-weight: 600; } input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; margin-bottom: 15px; background-color: #f9f9f9; transition: background-color 0.3s ease; } input:focus { background-color: #fff; border-color: #4CAF50; outline: none; } button { width: 100%; padding: 15px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } ul { list-style-type: none; margin-top: 20px; padding: 0; } li { display: flex; justify-content: space-between; align-items: center; background-color: #f9f9f9; margin: 10px 0; padding: 12px 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } li:hover { background-color: #f1f1f1; } li.completed { background-color: #e4f9e4; text-decoration: line-through; color: #777; } li button { background-color: #ff4d4d; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; display: flex; justify-content: center; align-items: center; } li button:hover { background-color: #e60000; } li .complete-btn { background-color: #4CAF50; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: white; margin-right: 10px; } li .complete-btn:hover { background-color: #45a049; }
JS
Copy
document.getElementById('add-task-btn').addEventListener('click', addTask); function addTask() { const taskInput = document.getElementById('new-task'); const taskText = taskInput.value.trim(); if (taskText === '') return; // Create a new task list item const li = document.createElement('li'); // Create the task text span const taskSpan = document.createElement('span'); taskSpan.textContent = taskText; li.appendChild(taskSpan); // Create a checkbox for marking task as complete const completeButton = document.createElement('button'); completeButton.classList.add('complete-btn'); completeButton.innerHTML = '✔'; completeButton.addEventListener('click', function() { li.classList.toggle('completed'); }); li.appendChild(completeButton); // Create a delete button for removing the task const deleteButton = document.createElement('button'); deleteButton.innerHTML = '×'; deleteButton.addEventListener('click', function() { li.remove(); }); li.appendChild(deleteButton); // Append the task to the task list document.getElementById('task-list').appendChild(li); // Clear input field after adding task taskInput.value = ''; }