devshades-au · April 15, 2024 01:36 · Apr 15, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<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>
diff --git a/script.js b/script.js
@@ -0,0 +1,41 @@
+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");
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,120 @@
+: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; }
diff --git a/todo-list-with-status-indicator.markdown b/todo-list-with-status-indicator.markdown
@@ -0,0 +1,7 @@
+Todo list with status indicator
+-------------------------------
+
+
+A [Pen](https://codepen.io/rcau/pen/eYojjKY) by [devshades](https://codepen.io/rcau) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/eYojjKY).