To-Do-List/todoList.html at master · XInterns/To-Do-List · 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
<!DOCTYPE html>
<title>To-Do List</title>
<body>
    <h1>To-Do List</h1>
    <br>
    <input type="text" id='txtbox' placeholder="Enter Your Task">
    <br>
    <input type="button" id="btn" value="Add Task" onclick="addTask()">
    <input type="button" id="clr" value="Clear List" onclick="cl()">
    <p id='para'></p>

    <script>
        var tasks=[{checkbox:'', lab:'' }]
        var x=0

        function addTask()
        {
            var t=document.getElementById("txtbox").value
            if(t=='')
            {
                alert("Please Enter Task")
            }
            else
            {
                show(t)
                //console.log(tasks[x].checkbox.id+" "+tasks[x].lab.textContent)
                x++
                document.getElementById("txtbox").value=null
            }
        }

        function show(task)
        {
            var checkbx=document.createElement('input')
            checkbx.type = "checkbox"
            checkbx.value = task
            checkbx.id = "checkbox"+x
            checkbx.onclick=function()
            {
                //console.log("check strike")
                if(this.checked==true)
                    {
                        this.nextElementSibling.style.setProperty("text-decoration", "line-through")
                        //console.log("content striked")
                    }
                else
                    {
                        this.nextElementSibling.style.textDecoration='none'
                        //console.log("content unstriked")
                    }
            }
            //console.log("checkbox created")

            var lb = document.createElement('label')
            lb.htmlFor = "checkbox"+x;
            lb.appendChild(document.createTextNode(task))
            //console.log("label created")

            tasks[x]={checkbox:checkbx, lab:lb}
            //console.log("task added")

            var space=document.createElement('br')

            document.getElementById("para").appendChild(tasks[x].checkbox)
            document.getElementById("para").appendChild(tasks[x].lab)
            document.getElementById("para").appendChild(space)
        }

        function cl()
        {
            tasks=[{checkbox:'', lab:''}]
            var pnode=document.getElementById("para")
            while(pnode.firstChild)
                pnode.removeChild(pnode.firstChild)
        }

    </script>