꧁AŇÐŘØᏦᎥᏁᏳD𝖔ϻ࿐

Dec 8
Todo List

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo-List</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 10px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        button {
            cursor: pointer;
            border: none;
            background-color: inherit;
        }

        .box .noteArea {
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 2px;
        }

        .show {
            border: 1px solid black;
            padding: 6px;
        }

        #note {
            text-align: center;
            max-width: 200px;
            min-width: 100px;
            max-height: 50px;
            min-height: 50px;
        }

        .btnBox{
            text-align: center;
            transition: all 200ms ease-in;
        }

        .btnBox:hover {
            background-color: #dadbe1;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="noteArea">
            <h1>Note Saving App</h1>
            <textarea name="note" id="note" placeholder="Write Note Here"></textarea>
            <div class="btnBox">
                <button id="noteBtn">Save</button>
                <button id="del">Delete All</button>
            </div>
        </div>

        <div class="show">

        </div>

    </div>



    <script>
        let container = document.getElementsByClassName("show")[0];
        let saveBtn = document.getElementById("noteBtn");
        let deleteAllBtn = document.getElementById("del");
        let noteText = document.getElementById("note");
        let table = document.createElement("table");

        const WriteNote = () => {
            table.innerHTML = "";
            let tableHeadRow = document.createElement("tr");

            let tableHeadData1 = document.createElement("th");
            let tableHeadData2 = document.createElement("th");
            let tableHeadData3 = document.createElement("th");
            let tableHeadData4 = document.createElement("th");

            tableHeadData1.innerText = "S.No";
            tableHeadData2.innerText = "Note";
            tableHeadData3.innerText = "Delete";
            tableHeadData4.innerText = "Edit";

            tableHeadRow.append(tableHeadData1);
            tableHeadRow.append(tableHeadData2);
            tableHeadRow.append(tableHeadData3);
            tableHeadRow.append(tableHeadData4);

            table.append(tableHeadRow);
            container.append(table);

            // Sort notes by key (timestamp)
            let notes = Object.keys(localStorage).map((key) => ({
                key: key,
                value: localStorage.getItem(key)
            }));

            notes.sort((a, b) => a.key - b.key); // Sort by the timestamp key

            notes.forEach((note, index) => {
                let tableRow = document.createElement("tr");
                let tableDataKey = document.createElement("td");
                let tableDataValue = document.createElement("td");
                let tableDataRemoveBtn = document.createElement("td");
                let tableDataEditBtn = document.createElement("td");
                let RemoveBtn = document.createElement("button");
                let EditBtn = document.createElement("button");

                tableDataRemoveBtn.classList = "btnBox";
                tableDataEditBtn.classList = "btnBox";

                RemoveBtn.innerText = "X";
                tableDataRemoveBtn.append(RemoveBtn);

                EditBtn.innerText = "Click Me";
                tableDataEditBtn.append(EditBtn);
                
                tableDataKey.textContent = index + 1;  // Display sequence number
                tableDataValue.textContent = note.value;

                tableRow.append(tableDataKey);
                tableRow.append(tableDataValue);
                tableRow.append(tableDataRemoveBtn);
                tableRow.append(tableDataEditBtn);

                table.insertAdjacentElement("beforeend", tableRow);

                RemoveBtn.addEventListener("click", (element) => {
                    let key = element.target.parentElement.parentElement.firstElementChild.textContent;
                    if (confirm("Are you sure you want to delete this note?")) {
                        localStorage.removeItem(localStorage.key(key-1));
                        WriteNote();
                    }
                });

                EditBtn.addEventListener(("click"), (element) => {
                    let key = element.target.parentElement.parentElement.firstElementChild.textContent;
                    if (confirm("Confirm Edit?")) {
                        let newData = prompt("Change Note:");
                        localStorage.setItem(localStorage.key(key-1), newData);
                        WriteNote();
                    }
                })
            });
        };


        saveBtn.addEventListener("click", () => {
            let ValueData = noteText.value.trim();

            if (Object.values(localStorage).includes(ValueData)) {
                alert("This note already exists!");
                noteText.value = "";
                return;
            } else if (ValueData) {
                let UniqueKey = Date.now();
                localStorage.setItem(UniqueKey, ValueData);
                noteText.value = "";
            } else {
                alert("NO DATA!!!");
            }

            WriteNote();
        });


        deleteAllBtn.addEventListener(("click"), () => {
            if (confirm("Are you sure you want to delete all notes?")) {
                localStorage.clear()
                WriteNote()
            }
        })

        WriteNote();
    </script>
</body>

</html>