Webleb - fragmentos de código - Lista de tareas inteligentes

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

Lista de tareas inteligentes

Recomendado

Pantalla de Carga de Puntos

Un código de ashimadison8

redes sociales

HTML

CSS

JS

Recomendado

Pantalla de Carga de Puntos

Un código de ashimadison8

redes sociales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS