.todo-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
max-width: 400px;
margin: 0 auto;
}
.todo-container h2 {
margin: 0 0 20px 0;
color: #1f2937;
}
.input-row {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.input-row input {
flex: 1;
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 8px;
outline: none;
}
.input-row input:focus {
border-color: #3b82f6;
}
.input-row button {
background: #3b82f6;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
#taskList {
list-style: none;
padding: 0;
margin: 0;
}
#taskList li {
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background 0.2s;
border-radius: 6px;
margin-bottom: 5px;
}
#taskList li.checked {
text-decoration: line-through;
color: #9ca3af;
background: #f0fdf4;
}
.close {
padding: 4px 8px;
color: #ef4444;
font-weight: bold;
border-radius: 4px;
}
.close:hover {
background: #fee2e2;
}
function addTask() {
const inputValue = document.getElementById("taskInput").value;
if (inputValue === "") return;
const li = document.createElement("li");
const t = document.createTextNode(inputValue);
li.appendChild(t);
// Toggle complete
li.addEventListener("click", function() {
this.classList.toggle("checked");
});
// Delete button
const span = document.createElement("span");
const txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
span.onclick = function(e) {
e.stopPropagation();
const div = this.parentElement;
div.style.display = "none";
};
li.appendChild(span);
document.getElementById("taskList").appendChild(li);
document.getElementById("taskInput").value = "";
}
