To-Do List. HTML, CSS, JS

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>To-Do List</title>
</head>
<body>
    <div class="container">
        <h3>To-Do List</h3>
        <p id="doneOfAll"></p>
        <input type="text" id="task_input" placeholder="New task">
        <button id="add_btn" onclick="addTask()">Add</button>
        <ul id="task_ul"></ul>
    </div>
    http://script.js
</body>
</html>
// style.css

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
    background-color: #7c4791;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background-color: #2acbc6;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
h3 {
    text-align: center;
    margin-bottom: 20px;
}
p {
    margin-bottom: 10px;
}
#task_input, #add_btn {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
}
#add_btn {
    background-color: #ffc107;
    cursor: pointer;
}
#add_btn:hover {
    background-color: #ffd455;
}
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid #9c9c9c;
    margin-top: 5px;
    padding-bottom: 5px;
}
.crossed-out {
    text-decoration: line-through;
    color: #ffffff;
}
.delete_btn {
    width: 50px;
    height: 30px;
    background-color: #d66275;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    text-align: center;
}
.delete_btn:hover {
    background-color: #f393a3;
}
// script.js

const task_input = document.getElementById("task_input");
const add_btn = document.getElementById("add_btn");
const task_ul = document.getElementById("task_ul");
const doneOfAll = document.getElementById("doneOfAll");

let allTasks = 0;
let doneTasks = 0;
doneOfAll.innerHTML = doneTasks + ' / ' + allTasks;

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      addTask();
    }
});

function addTask() {
    if (task_input.value !== "") {
        let li = document.createElement("li");
        let span = document.createElement("span");
        span.innerHTML = task_input.value;
        li.onclick = function() {
            span.classList.toggle("crossed-out");
            if (span.classList.contains("crossed-out")) {
                doneTasks++;
            }
            else {
                doneTasks--;
            }
            doneOfAll.innerHTML = doneTasks + ' / ' + allTasks;
        };
        
        let del_btn = document.createElement("button");
        del_btn.className = 'delete_btn';
        del_btn.innerHTML = "Delete";
        del_btn.onclick = function() {
            li.remove();
            allTasks--;
            if (!span.classList.contains("crossed-out")) {
                doneTasks--;
            }
        };

        task_ul.appendChild(li);
        li.appendChild(span);
        li.appendChild(del_btn);
        task_input.value = "";
        
        allTasks++;
        doneOfAll.innerHTML = doneTasks + ' / ' + allTasks;
    }
}

Leave a comment