Lista de tareas inteligentes

1,652 0 hasan Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

17 February 2026

Plantilla HTML de página de destino de Roblox

28 May 2026

Juego de muñeco de trapo - Código de inserción de juego HTML5

13 April 2026

Plantilla HTML para formulario de inicio de sesión y registro

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

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

Comments 0

…