Webleb - Extraits de Code - Liste de tâches intelligentes

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

Liste de tâches intelligentes

Recommandé

Un code par yuhhxn

Un code de Mete

Bouton de changement de thème

HTML

CSS

JS

Recommandé

Un code par yuhhxn

Un code de Mete

Bouton de changement de thème

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS