Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>task</title>
        <meta
            charset="UTF-8"
            name="viewport"
            http-equiv="X-UA-Compatible"
            content="width=device-width, initial-scale=1.0, user-scalable=no, ie=edge"
        />
        <style>
            #taskList {
                display: flex;
                flex-direction: column;
                text-align: center;
                border: 3px solid rgb(0, 0, 200);
                border-radius: 10px;
                background-image: linear-gradient(rgb(155, 255, 155), rgb(155, 155, 255));
            }
            #taskList > h4 {
                margin: 0;
                color: rgb(255, 255, 255);
                background-color: rgb(0, 0, 255);
            }
            #taskList > input, #taskList > small > input {
                flex: 2;
                outline: none;
                text-align: center;
            }
            #taskList > button, #taskList > small > button {
                border: 0;
                color: rgb(255, 255, 255);
                background-color: rgb(0, 0, 255);
            }
            #taskList > small {
                display: inherit;
                border-top: 3px solid rgb(0, 0, 200);
            }
            #taskList > small > b {
                flex: 2;
            }
        </style>
    </head>
    <body>
        <div id="taskList">
            <h4>Tasks</h4>
            <input type="text" id="taskInput" />
            <button>+</button>
        </div>
        <script>
            var index = 1;

            var taskList = document.getElementById("taskList");

            taskList.children[2].addEventListener("click", ()=>{post(taskList.children[1].value)});

            var createTask = (id, val) => {
                var task = document.createElement("small");
                task.id = id;
                task.innerHTML = `
                    <button onclick="updateTask('${id}')">/</button>
                    <b>${val}</b>
                    <button onclick="deleteTask('${id}')">-</button>
                `;
                taskList.appendChild(task);
            };

            var deleteTask = (taskId) => {
                var el = document.getElementById(taskId);
                var text = "";
                for(var i=2;i < el.innerText.length-2; i++){
                    text += el.innerText[i];
                }
                fetch("/delete", {
                    method: "DELETE",
                    body: JSON.stringify({id: taskId, task: text})
                });
                document.getElementById(taskId).remove();
            };

            var updateTask = (id) => {
                var el = document.getElementById(id);
                var text = "";
                for(var i=1;i < el.innerText.length-1; i++){
                    text += el.innerText[i];
                }
                el.innerHTML = `<button>ok</button><input type="text" value="${text}" />`;
                el.children[0].addEventListener("click", () => {
                    text = el.children[1].value;
                    el.innerHTML = `
                        <button onclick="updateTask('${id}')">/</button>
                        <b>${text}</b>
                        <button onclick="deleteTask('${id}')">-</button>
                    `;
                });
            };

            fetch("/getTasks", {method: "GET"}).then(response => response.text()).then(data => {
                const parser = new DOMParser();
                const xml = parser.parseFromString(data, "text/xml");
                const items = xml.getElementsByTagName("task");
                for(var i=0; i < items.length; i++){
                    createTask(items[i].children[0].textContent, items[i].children[1].textContent);
                }
                index = Number(items[items.length - 1].children[0].textContent);
            }).catch(err => alert(err));

            post = (val) => {
                fetch("/postTask", {
                    method: "POST",
                    body: JSON.stringify({task: val})
                }).then(response => response.json()).then(data => {
                    if(data.error){
                        alert(data.error);
                        document.getElementById(data.field).style.cssText = `
                            color: rgb(255, 0, 0);
                            border-color: rgb(255, 0, 0);
                        `;
                    } else if(data.success){
                        index++;
                        createTask(index.toString(), val);
                        taskList.children[1].style.cssText = `
                            color: rgb(0, 0, 0);
                            border-color: default;
                        `;
                    }
                });
            };
        </script>
    </body>
</html>