-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.js
60 lines (52 loc) · 1.95 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
let dateDisplay = document.querySelector('#date');
let dayDisplay = document.querySelector('#day');
let dates = new Date();
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
let year = dates.getFullYear();
let month = dates.getMonth();
let cDate = dates.getDate();
let day = dates.getDay() - 1;
dateDisplay.innerHTML = `${cDate} - ${months[month]}, ${year}`;
dayDisplay.innerHTML = days[day];
let input = document.querySelector('#input');
let lists = document.querySelector('#lists');
let errorText = document.querySelector('#error-text');
let i = 1;
function filterText(text) {
if(text) {
if(text.length > 1) {
return text;
} else {
errorText.innerHTML = 'Type at least one character.';
return false;
}
}
errorText.innerHTML = 'Input cannot be empty.';
return false;
}
function showList(input) {
lists.innerHTML +=
`<div class="tasks" id="list${i}">
<input type="checkbox" id="t${i}">
<label for="t${i}">${input}</label>
<div id="action">
<i class="" onclick="deleteList(${i})">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</i>
</div>
</div>`;
i++;
}
function addList() {
let inputText = input.value;
if(filterText(inputText)) {
showList(filterText(inputText));
input.value = '';
errorText.innerHTML = '';
}
}
function deleteList(id) {
let deleteList = document.getElementById(`list${id}`);
lists.removeChild(deleteList);
}