ToDoApp/ToDo.html at master · Geryke18/ToDoApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="It is just a 'To Do' application">
    <meta name="content-language" content="english">
    <title>To Do App</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<h1>To Do List App</h1>
<div id="NewToDo">
    <label for="input">New To Do</label><br>
    <input id="input" type="text" name="input" placeholder="Write here your task">
    <button id="add">Add</button>
</div>
<br>

<div>To Do
    <table id="todo">
    </table>
</div>
<br>

<div>Done
    <table id="done">
    </table>
</div>

    <script>

        let addButton = document.getElementById('add');
        let tableToDo = document.getElementById("todo");
        let tableDone = document.getElementById("done");

        function AddDone(textOfToDo) {
            var row = tableDone.insertRow(tableDone.length+1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = textOfToDo;
            cell1.classList.add("Done");
            cell2.innerHTML = '<button class="delete" type="text" onclick="delDone(this)">Remove</button>';
        };

        function AddToDo(textOfToDo) {
            var row = tableToDo.insertRow(tableToDo.length+1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = '<div class="glow1 todoText" draggable="true">' + textOfToDo + '</div>';
            cell2.innerHTML = '<button class="doneBtn" type="text" onclick="doneTodo(this)">Done</button>'
            cell3.innerHTML = '<button class="delete" type="text" onclick="delTodo(this)">Remove</button>';
        };

        async function getData() {
            tableToDo.innerHTML = "";
            tableDone.innerHTML = "";
            let response = await fetch('http://' + location.host + '/getdata');
            let myDatas = await response.json();
            myDatas.todos.forEach(element => {
                AddToDo(element)
            });
            myDatas.dones.forEach(element => {
                AddDone(element)
            });
        };
        getData();

        function Done(o) {
            var row = tableDone.insertRow(tableDone.length+1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = o.parentNode.parentNode.firstChild.textContent;
            cell1.classList.add("Done");
            cell2.innerHTML = '<button class="delete" type="text" onclick="delDone(this)">Remove</button>';
            var p=o.parentNode.parentNode;
            p.parentNode.removeChild(p);
        }

        async function AddToDb(x) {
            //console.log(x);
            let response = await fetch('http://' + location.host + '/addtodo', {
            method: 'POST',
            body: x, // string or object
            headers: {
                'Content-Type': 'text/plain'
            }
            });
            getData();
        }

        async function delTodo(o) {
            let x = o.parentNode.parentNode.firstChild.textContent;
            let response = await fetch('http://' + location.host + '/deltodo', {
            method: 'POST',
            body: x, // string or object
            headers: {
                'Content-Type': 'text/plain'
            }
            });
            getData();
        }

        async function doneTodo(o) {
            let x = o.parentNode.parentNode.firstChild.textContent;
            let response = await fetch('http://' + location.host + '/donetodo', {
            method: 'POST',
            body: x, // string or object
            headers: {
                'Content-Type': 'text/plain'
            }
            });
            getData();
        }

        async function delDone(o) {
            let x = o.parentNode.parentNode.firstChild.textContent;
            let response = await fetch('http://' + location.host + '/deldone', {
            method: 'POST',
            body: x, // string or object
            headers: {
                'Content-Type': 'text/plain'
            }
            });
            getData();
        }

        addButton.addEventListener("click",  function(){AddToDb(document.getElementById("input").value)});

    </script>

</body>
</html>