-
Notifications
You must be signed in to change notification settings - Fork 31
/
main.js
115 lines (96 loc) · 3.12 KB
/
main.js
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
const errorMsg = document.querySelector(".err-msg");
const todotInput = document.querySelector(".todoInput");
const editInput = document.querySelector(".editInput");
const addbtn = document.querySelector(".btn");
const editbtn = document.getElementById("editBtn");
const todos = document.querySelector(".todos");
const editForm = document.getElementById("editForm");
const addForm = document.getElementById("addForm");
addbtn.addEventListener("click", addMe);
todos.addEventListener("click",deleteCheck);
function htmlEncode(str) {
return String(str).replace(/[^\w. ]/gi, function(c) {
return '&#' + c.charCodeAt(0) + ';';
});
}
function addMe(e) {
e.preventDefault();
//console.log("goat")
if (todotInput.value.trim() == "") {
errorMsg.style.display = "block";
setTimeout(() => {
errorMsg.style.display = "none";
}, 1000);
} else {
let todoDiv = document.createElement("div");
todoDiv.classList.add("todoDiv");
let list = document.createElement("li");
list.innerHTML = htmlEncode(todotInput.value);
list.classList.toggle("fish");
todoDiv.appendChild(list);
// let editForm = document.createElement("form");
// editForm.style.display="flex";
let done = document.createElement("button");
done.innerHTML = "<img src = './images/check.png' >";
done.classList.add("done");
todoDiv.appendChild(done);
let trash = document.createElement("button");
trash.innerHTML = "<img src = './images/trash1.png'>";
trash.classList.add("trash");
todoDiv.appendChild(trash);
let edit = document.createElement("button");
edit.innerHTML = "<img src='./images/edit.png' height='25px' width='25px'/>";
edit.classList.add("edit");
todoDiv.appendChild(edit);
todos.appendChild(todoDiv);
todotInput.value = "";
}
}
function deleteCheck(e) {
if (e.target.classList[0] === "trash") {
let move = e.target.parentElement;
move.classList.add("fall");
todos.addEventListener("transitionend", () => {
move.remove();
});
}
if (e.target.classList[0] === "done") {
let open = e.target.parentElement;
open.classList.toggle("completed");
}
if (e.target.classList[0] === "edit") {
let open = e.target.parentElement;
open.classList.add('beingEdited');
addForm.classList.add('invisible');
editForm.classList.remove('invisible');
editbtn.addEventListener('click',()=>{
if (editInput.value.trim() == "") {
errorMsg.style.display = "block";
setTimeout(() => {
errorMsg.style.display = "none";
}, 1000);
}
else{
open.classList.remove('beingEdited');
addForm.classList.remove('invisible');
editForm.classList.add('invisible');
open.getElementsByClassName('fish')[0].innerHTML = editInput.value;
}
})
}
}
function dark(){
var elem= document.body;
elem.classList.toggle("dark-mode");
var mode = document.getElementById("mode");
if(mode.classList == "fa-sharp fa-solid fa-moon")
{
mode.classList.add("fa-sun");
mode.classList.remove("fa-moon");
}
else
{
mode.classList.toggle("fa-moon");
mode.classList.remove("fa-sun");
}
}