bookLibrary/objects.js at main · chiefkarim/bookLibrary · 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
let myLibrary = [];
class Book {
  constructor(title, author, pages, read) {
    this.title = "title:" + title;
    this.author = "author:" + author;
    this.pages = "pages:" + pages;
    this.read = "read:" + read;
  }
}
function addBookToLibrary() {
  const getInput = {
    title: document.getElementById("title").value,
    author: document.getElementById("author").value,
    pages: document.getElementById("pages").value,
    read: document.getElementById("read").value,
  };
  let book = new Book(
    getInput.title,
    getInput.author,
    getInput.pages,
    getInput.read
  );
  myLibrary.push(book);
  document.querySelector(".formulaContainer").remove();
}
let i = -1;
function Display() {
  let container = document.querySelector(".container");
  let box = document.createElement("div");
  box.classList.add("boxes");
  box.dataset.title = `bok${++i}`;
  container.append(box);
  let boxes = document.querySelector(`div[data-title="bok${i}"]`);
  let bookContent = document.createElement("div");
  bookContent.classList.add("box-content");
  bookContent.dataset.title = `bok${i}`;
  bookContent.textContent = `${myLibrary[myLibrary.length - 1].title}\r\n${
    myLibrary[myLibrary.length - 1].author
  }\r\n${myLibrary[myLibrary.length - 1].pages}\r\n${
    myLibrary[myLibrary.length - 1].read
  }`;
  //read status
  let readStatus = document.createElement("button");
  readStatus.innerText = "read";
  readStatus.classList.add("read");
  readStatus.addEventListener("click", function () {
    if (this.innerText == "read") {
      this.innerText = "not read";
      myLibrary[i].read = "not read";
    } else {
      this.innerText = "read";
      myLibrary[i].read = "read";
    }
  });
  bookContent.append(readStatus);
  boxes.append(bookContent);
  //delete button
  let divbutton = document.createElement("div");
  let button = document.createElement("button");
  divbutton.classList.add("delete");
  button.innerText = "delete";
  let boxContent = document.querySelector(`div[data-title="bok${i}"]`);
  boxContent.append(divbutton);
  divbutton.append(button);
  //delete book from library
  button.addEventListener("click", function () {
    boxes.remove();
    let removedBook = myLibrary[i];
    myLibrary.splice(removedBook, 1);
    console.log(removedBook);
  });
}
//display input formula
let addBookButton = document.querySelector(".Add");
addBookButton.addEventListener("click", function () {
  let formulaContainer = document.createElement("div");
  formulaContainer.classList.add("formulaContainer");
  document.body.append(formulaContainer);
  let formulaboxes = document.createElement("div");
  formulaboxes.classList.add("formulaboxes");
  formulaContainer.append(formulaboxes);
  let title = document.createElement("label");
  title.innerText = "title:";
  formulaboxes.append(title);
  let inputTitle = document.createElement("input");
  inputTitle.setAttribute("id", "title");
  inputTitle.setAttribute.type = "text";
  formulaboxes.append(inputTitle);
  let author = document.createElement("label");
  author.innerText = "author:";
  formulaboxes.append(author);
  let inputAuthor = document.createElement("input");
  inputAuthor.setAttribute("id", "author");
  inputAuthor.setAttribute.type = "text";
  formulaboxes.append(inputAuthor);
  let pages = document.createElement("label");
  pages.innerText = "pages:";
  formulaboxes.append(pages);
  let inputPages = document.createElement("input");
  inputPages.setAttribute("id", "pages");
  inputPages.setAttribute.type = "text";
  formulaboxes.append(inputPages);
  let read = document.createElement("label");
  read.innerText = "read:";
  formulaboxes.append(read);
  let inputRead = document.createElement("input");
  inputRead.setAttribute("id", "read");
  inputRead.setAttribute.type = "text";
  formulaboxes.append(inputRead);
  let submit = document.createElement("button");
  submit.classList.add("submit");
  submit.innerText = "submit";
  formulaboxes.append(submit);
  submit.addEventListener("click", function () {
    addBookToLibrary();
    Display();
  });
});