To-Do-List/main.js at main · poulami08/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
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
showtask();
let addtaskinput = document.getElementById("addtaskinput");
let addtaksbtn = document.getElementById("addtaksbtn");


addtaskbtn.addEventListener("click", function(){
    addtaskinputval = addtaskinput.value;
    if(addtaskinputval.trim()!=0){ // to remove blank task
    let webtask = localStorage.getItem("localtask");
    if(webtask == null)
    {
        taskobj =[];
    }
    else
    {
        taskobj=JSON.parse(webtask); //to make it object
    }
    taskobj.push(addtaskinputval); //to add values
    localStorage.setItem("localtask", JSON.stringify(taskobj)); //to save it in local storage
     addtaskinput.value ='';
}
    showtask();

})
//show task
function showtask()
{
    let webtask = localStorage.getItem("localtask");
    if(webtask == null)
    {
        taskobj =[];
    }
    else
    {
        taskobj=JSON.parse(webtask);
    }
    let html = '';
    let addedtasklist = document.getElementById("addedtasklist");
    taskobj.forEach((item, index) => {
        html += `<tr>
        <th scope="row">${index+1}</th>
        <td> ${item}</td>
        <td><button type="button"  onclick="edittask(${index})"
        class="text-primary"><i class="fa fa-edit"></i> Edit</button></td>
        <td><button type="button"  onclick="deleteitem(${index})"
         class="text-danger"><i class="fa fa-trash"></i> Delete</button></td>
    </tr>`;


    });
    addedtasklist.innerHTML = html;

}

//edittask
function edittask(index){
    let saveindex = document.getElementById("saveindex");
    let addtaksbtn = document.getElementById("addtaksbtn");
    let savetaskbtn = document.getElementById("savetaskbtn");
    saveindex.value = index;
    let webtask = localStorage.getItem("localtask");
    let taskobj = JSON.parse(webtask);
    addtaskinput.value =taskobj[index];
    addtaskbtn.style.display="none";
    savetaskbtn.style.display="block";
}

//savetask
let savetaskbtn = document.getElementById("savetaskbtn");
savetaskbtn.addEventListener("click",function(){
    let addtaksbtn = document.getElementById("addtaksbtn");
    let webtask = localStorage.getItem("localtask");
    let taskobj = JSON.parse(webtask);
    let saveindex = document.getElementById("saveindex").value;
    taskobj[saveindex] = addtaskinput.value;
    savetaskbtn.style.display="none";
    addtaskbtn.style.display="block";
    localStorage.setItem("localtask", JSON.stringify(taskobj));
    addtaskinput.value='';
    showtask();

})

//delettask
function deleteitem(index){
    let webtask = localStorage.getItem("localtask");
    let taskobj = JSON.parse(webtask);
    taskobj.splice(index,1);
    localStorage.setItem("localtask", JSON.stringify(taskobj));
    showtask();
}

// deleteall
let deleteallbtn = document.getElementById("deleteallbtn");
deleteallbtn.addEventListener("click",function(){
    let savetaskbtn = document.getElementById("savetaskbtn");
    let addtaskbtn = document.getElementById("addtaskbtn");
    let webtask = localStorage.getItem("localtask");
    let taskobj = JSON.parse(webtask);
    if(webtask == null)
    {
        taskobj =[];
    }
    else
    {
        taskobj=JSON.parse(webtask);
        taskobj =[];
    }
    savetaskbtn.style.display="none";
    addtaskbtn.style.display="block";
    localStorage.setItem("localtask", JSON.stringify(taskobj));
    showtask();
})

//searchlist
let searchtextbox = document.getElementById("searchtextbox");
searchtextbox.addEventListener("input", function(){
    let trlist = document.querySelectorAll("tr");
    Array.from(trlist).forEach(function(item){
        let searchedtext = item.getElementsByTagName("td")[0].innerText;
        let searchtextboxval = searchtextbox.value;
        let re = new RegExp(searchtextboxval, 'gi');
        if(searchedtext.match(re)){
            item.style.display="table-row";
        }
        else{
            item.style.display="none";
        }
    })
})