-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
157 lines (133 loc) · 6.06 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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
//Intialize empty array for storing book objects
let myLibrary = [];
// Check for first page load and intialize array with some default books
// this function wouldn't be executed on further page loads on same machine given "loadedBefore" key is not removed
if(localStorage.getItem("loadedBefore") === null){
localStorage.setItem("books", JSON.stringify(myLibrary));
firstLoadInitialize();
localStorage.setItem("loadedBefore", true);
}
//Set "books" to empty array rather than null if "books" key doesn't exist else store array in local storage
if(localStorage.getItem("books") !== null)
myLibrary = JSON.parse(localStorage.getItem("books"));
else
localStorage.setItem("books", JSON.stringify(myLibrary));
// Constructor function for intializing Book objects
function Book(name, author, pages, readStatus) {
this.name = name;
this.author = author;
this.pages = pages;
this.readStatus = readStatus;
}
//fucntion to push book objects to array myLibrary and execute function for rendering said array
function addBookToLibrary(name, author, pages, readStatus) {
let book = new Book(name, author, pages, readStatus);
myLibrary.push(book);
render();
}
//function for rendering myLibrary array, a bit hacky considering every book is re-rendered when a single book is removed or added
function render(){
localStorage.setItem("books", JSON.stringify(myLibrary));
let remove = document.getElementById("bookContainer");
while(remove.firstChild){
remove.removeChild(remove.firstChild);
}
myLibrary.forEach(function(book, index){
const div = document.createElement("div");
div.classList.add("book");
div.id = index;
const bookName = document.createElement("p");
bookName.classList.add("bookName");
bookName.innerHTML = book.name;
div.appendChild(bookName);
const author = document.createElement("p");
author.classList.add("author");
author.innerHTML = book.author;
div.appendChild(author);
const pages = document.createElement("p");
pages.classList.add("pages");
pages.innerHTML = book.pages;
div.appendChild(pages);
const read = document.createElement("p");
read.classList.add("read");
read.innerHTML = (book.readStatus ? "Read" : "Not Read");
div.appendChild(read);
const options = document.createElement("div");
options.classList.add("options");
const toggle = document.createElement("p");
toggle.classList.add("toggle");
toggle.innerHTML = "Toggle Read";
options.appendChild(toggle);
const img = document.createElement("img");
img.classList.add("delete");
img.src = "res/img/icons8-trash-32.png";
options.appendChild(img);
div.appendChild(options);
document.getElementById("bookContainer").appendChild(div);
});
const del = Array.from(document.getElementsByClassName("delete"));
del.forEach(function(button,index){
button.addEventListener("click", function(){
myLibrary.splice(index ,1);
render();
});
});
const toggle = Array.from(document.getElementsByClassName("toggle"));
toggle.forEach(function(button,index){
button.addEventListener("click", function(){
myLibrary[index].readStatus = !myLibrary[index].readStatus;
let read = document.getElementById(index);
//Changing text of Read Status rather than re-rendering every book allows book to remain in transition state
read.querySelector(".read").innerHTML = myLibrary[index].readStatus ? "Read" : "Not Read";
localStorage.setItem("books", JSON.stringify(myLibrary));
});
});
let popupContainer = document.getElementById("popupContainer");
let name = document.getElementById("name");
let authorName = document.getElementById("authorName");
let noPages = document.getElementById("noPages");
let readStatus = document.getElementById("readStatus")
document.getElementById("newBook").onclick = function(){
popupContainer.style.display = "flex";
};
document.getElementById("closeButton").onclick = function(){
popupContainer.style.display = "none";
name.value="";
authorName.value="";
noPages.value="";
readStatus.checked=false;
};
document.getElementById("submit").onclick = function(){
// Check for empty fields if found change popUp display: attr to display
if(name.value.trim() != "" && authorName.value.trim() != "" && noPages.value != ""){
addBookToLibrary(name.value, authorName.value, noPages.value, readStatus.checked);
popupContainer.style.display = "none";
name.value="";
authorName.value="";
noPages.value="";
readStatus.checked=false;
}
else{
document.getElementById("alertContainer").style.display = "flex";
}
};
document.getElementById("alertClose").onclick = function(){
document.getElementById("alertContainer").style.display = "none";
}
}
// function to turn CRT effect ON or OFF as some people may find it annoying
document.getElementById("crtEffect").onclick = function(){
if(document.getElementById("container").className == "CRT")
document.getElementById("container").className = "noCRT";
else
document.getElementById("container").className = "CRT";
}
//render all elements just in case render function never gets called before
render();
// function for intializing myLibrary with default some books on first page load
function firstLoadInitialize(){
addBookToLibrary("1984", "George Orwell", 328, true);
addBookToLibrary("Fahrenheit 451", "Ray Bradbury", 256, true);
addBookToLibrary("Dune", "Frank Herbert", 412, true);
addBookToLibrary("War and Peace", "Leo Tolstoy", 1225, false);
}