-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (96 loc) · 3.28 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css" />
<link rel="manifest" href="manifest.json" />
<link rel="canonical" href="https://codingmaster.glitch.me/" />
<link
rel="shortcut icon"
href="https://pbs.twimg.com/profile_images/1080557016463147008/sPN7F0Dd_400x400.jpg"
/>
<script>
// This is just to force HTTPS (can't do it statically on glitch)
if (location.protocol == "http:") location.protocol = "https:";
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/sw.js")
.then(reg => console.log("Service Worker registered", reg))
.catch(err =>
console.error("Service Worker **not** registered", err)
);
} else {
console.warn("Service Worker not supported in this browser");
}
</script>
<title>My PWA</title>
<meta name="theme-color" content="lightblue" />
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">My To Do List</h2>
<input type="text" id="myInput" placeholder="Title..." />
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
};
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector("ul");
list.addEventListener(
"click",
function(ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
},
false
);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === "") {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
};
}
}
</script>
<script src="index.js"></script>
</body>
</html>