Todo list with status indicator

index.html

<div class="todo-container">
        <header class="todo-header">
            <h1>Tasks</h1>
            <div class="status-indicator yellow"></div>
            <div class="input-container">
                <input type="text" id="todo-input" placeholder="Add a new task..." aria-label="New task input">
                <button onclick="addTask()">Add Task</button>
            </div>
        </header>
        <ul class="todo-list" id="todo-list"></ul>
    </div>

script.js

document.getElementById("todo-input").addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        addTask();
    }
});

function addTask() {
    const input = document.getElementById("todo-input");
    const newTask = input.value.trim();
    if (!newTask) return;

    const list = document.getElementById("todo-list");
    const listItem = document.createElement("li");
    listItem.className = "todo-item";
    listItem.innerHTML = `<input type="checkbox" class="task-completion" onchange="toggleCompletion(this)">
                          <p class="todo-item-text">${newTask}</p>
                          <button onclick="removeTask(this)">X</button>`;
    list.appendChild(listItem);
    input.value = "";
    updateStatusIndicator();
}

function removeTask(button) {
    const listItem = button.closest(".todo-item");
    listItem.remove();
    updateStatusIndicator();
}

function toggleCompletion(checkbox) {
    const taskText = checkbox.nextElementSibling;
    taskText.classList.toggle("completed", checkbox.checked);
    updateStatusIndicator();
}

function updateStatusIndicator() {
    const allTasks = document.querySelectorAll(".todo-item");
    const statusIndicator = document.querySelector(".status-indicator");
    const allCompleted = Array.from(allTasks).every(task => task.querySelector(".task-completion").checked);

    statusIndicator.className = "status-indicator " + (allTasks.length === 0 ? "yellow" : allCompleted ? "green" : "red");
}

style.css

:root {
    --platinum: #d9dcd6;
    --lapiz-lazuli: #2f6690;
    --cerulean: #3a7ca5;
    --indigo-dye: #16425b;
    --sky-blue: #81c3d7;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--indigo-dye);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 20px;
}

.todo-container {
    background-color: var(--cerulean);
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.todo-header {
    background-color: var(--lapiz-lazuli);
    color: var(--platinum);
    padding: 20px;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.input-container {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    margin-right: 10px;
}

button {
    padding: 10px 20px;
    background-color: var(--sky-blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: var(--indigo-dye);
}

.todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-item {
    background: var(--platinum);
    border-bottom: 1px solid var(--cerulean);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-item-text {
    margin: 0;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.todo-item-text::after {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--indigo-dye);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.task-completion:checked + .todo-item-text::after {
    transform: scaleX(1);
}

.status-indicator {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--yellow);
    margin: 5px auto 10px;
    transition: background-color 0.3s;
    border: 2px solid var(--platinum);
    box-shadow: 0 0 10px var(--platinum);
}

.red { background-color: #ff0000; }
.green { background-color: #00ff00; }
.yellow { background-color: #ffff00; }

todo-list-with-status-indicator.markdown

Todo list with status indicator

A Pen by devshades on CodePen.

License.