-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
96 lines (94 loc) · 3.52 KB
/
script.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
var ourList = document.getElementById("ourList");
//Function responsible for creating new list elements after clicking enter
taskName.addEventListener("keydown", keyDownAddItem, false);
function keyDownAddItem(e) {
var keyCode = e.keyCode;
if (keyCode === 13) {
createItem();
}
}
//Function responsible for adding new list elements after clicking the button
button.addEventListener("click", createItem);
function createItem() {
var button = document.getElementById("button");
var taskName = document.getElementById("taskName");
var li = document.createElement("li");
var t = document.createTextNode(taskName.value);
var counterValue = document.getElementById("counterValue");
// Adding new list elements and simple validation
li.appendChild(t);
if (taskName.value == null || taskName.value.trim() == "") {
taskName.style.border = "2px solid red";
} else {
document.getElementById("ourList").appendChild(li);
var listSize = li.parentNode.children.length;
for (var i = 0; i < listSize; i++) {
counterValue.textContent = " " + li.parentNode.children.length;
}
taskName.style.border = "";
}
document.getElementById("taskName").value = "";
// Creating an icon responsible for deleting the list record
var mySpan = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
mySpan.className = "close";
mySpan.appendChild(txt);
li.appendChild(mySpan);
deleteListItem(this);
// Adding class responsible for animating the list item addition
setTimeout(function() {
li.className = li.className + " show";
}, 10);
}
// Deleting and counting li elements
function deleteListItem () {
var close = document.getElementsByClassName("close");
var closeLength = close.length;
for (i = 0; i < closeLength; i++) {
close[i].onclick = function() {
this.parentElement.remove();
counterValue.textContent = close.length;
}
}
}
// Function allowing to clear the whole app
document.getElementById("clearAllButton").addEventListener("click", clearAll);
function clearAll () {
if (confirm("Are you sure?") == true) {
ourList.innerHTML = "";
counterValue.textContent = " " + 0;
}
}
// Function allowing to select the particular list item
ourList.addEventListener("click", activateItem);
function activateItem(e) {
if (e.target.nodeName = "LI") {
var childrenLength = e.target.parentNode.children.length;
for (i = 0; i < childrenLength; i++) {
e.target.parentNode.children[i].classList.remove("activatedItem");
}
e.target.classList.add("activatedItem");
}
}
// Adding date and time
(function showMeTheDateAndTime() {
var date = new Date();
var dayToday = date.getDay();
var month = date.getMonth();
var dayInMonth = date.getDate();
var year = date.getFullYear();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var week = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var monthsInYear = ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."]
if (s<10) {
s="0"+s;
}
if (m<10) {
m="0"+m;
}
document.getElementById("date").innerHTML = (week[dayToday] + " " + monthsInYear[month] + " " + dayInMonth + "." + " " + year);
document.getElementById("time").innerHTML = (h + ":" + m + ":" + s);
window.setTimeout(showMeTheDateAndTime, 500);
})();