Liste de tâches intelligentes

1101 hasan

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

16 June 2025

Un code de Mete

22 August 2025

Conception de sites Web, marketing numérique et services vidéo

1 October 2025

Modèle de site Web de portefeuille HTML CSS JavaScript

HTML

CSS

* {
    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

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 = '';
}

Recommandé

Un code de Mete

Conception de sites Web, marketing numérique et services vidéo

Modèle de site Web de portefeuille HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS