To-Do-List/script.js at main · sofiaRibis/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
131
132
133
134
135
136
137
138
139
//day name
const week = new Date();
let days = [
	"Sunday",
	"Monday",
	"Tuesday",
	"Wednesday",
	"Thursday",
	"Friday",
	"Saturday",
];
document.getElementById("week-name").innerHTML = days[week.getDay()] + ",";

//day number
const d = new Date();
document.getElementById("day-number").innerHTML = d.getDate();

//month day
const month = new Date();
let months = [
	"January",
	"February",
	"March",
	"April",
	"May",
	"June",
	"July",
	"August",
	"September",
	"October",
	"November",
	"December",
];
document.getElementById("month").innerHTML = months[month.getMonth()];

//* VARIABLES
//launch popup
let LaunchPopupDiv = document.querySelector(".Launch-popup");
let launchBtn = document.querySelector(".Launch-popup button");
let main = document.querySelector("main");

//per quando gli li vengono flaggati
let checkedItems = document.querySelectorAll("label input");

//modal pop up
let addTask = document.querySelector(".addTask");
let modalPopupTask = document.querySelector(".modal-add-task");
let saved = document.querySelector("input[type=submit]");

//create new element
let inputValue = document.querySelector(".popup input");
let listWrapper = document.querySelector("ul");

//delete item
let trash = document.querySelectorAll(".delete");

//label
let label = document.querySelectorAll("label");

//======================================================

//launch popup
launchBtn.addEventListener("click", function () {
	LaunchPopupDiv.style.display = "none";
	main.style.display = "flex";
});

//create new element
saved.addEventListener("click", function () {
	if (inputValue != "") {
		let newToDo = document.createElement("li");
		newToDo.innerHTML = `
                    <label>
                        <input type="checkbox">
                        <p class="list-item">${inputValue.value}</p>
                        <div class="delete">
                        </div>
                    </label>
                    `;

		inputValue.value = "";
		listWrapper.appendChild(newToDo);
		//to  delete newToDo
		newToDo.querySelector(".delete").addEventListener("click", () => {
			deleteItem(newToDo);
		});

		// newToDo.querySelector("label").addEventListener("click", () => {
		// 	isChecked(newToDo);
		// 	console.log(isChecked(newToDo));
		// });
	}

	modalPopupTask.classList.remove("flex-popup");
});

//modal pop up
addTask.addEventListener("click", function () {
	modalPopupTask.classList.add("flex-popup");
});

//delete todo
label.forEach((element) => {
	const trash = element.querySelector(".delete");
	trash.addEventListener("click", function () {
		// element.style.display = "none";
		deleteItem(element);
	});
});

function deleteItem(element) {
	element.remove();
}

//check todo
// function isChecked(element) {
// 	let click = 0;
// 	if (click % 2 == 0) {
// 		element.style.backgroundColor = "rgba(240, 243, 255, 0.4)";
// 	} else {
// 		element.style.backgroundColor = "#F0F3FF";
// 	}
// }

// label.forEach((element) => {
// 	// element.addEventListener("click", function (e) {
// 	// 	if (e % 2 == 0) {
// 	// 		element.style.backgroundColor = "rgba(240, 243, 255, 0.4)";
// 	// 	} else {
// 	// 		element.style.backgroundColor = "#F0F3FF";
// 	// 	}
// 	// });
// 	element.addEventListener("click", isChecked(element));
// });

// function isChecked(element) {
// 	element.classList.toggle("checked-item");
// 	element.style.color = "red";
// }