From 1d58b64c77feb59af3fa3f77a7fccda7501b9b7f Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 01:39:46 +0300 Subject: [PATCH 01/42] added index.html + index.js + styles.css --- Project: Library/index.html | 18 ++++++++++++++++++ Project: Library/index.js | 0 Project: Library/styles.css | 0 3 files changed, 18 insertions(+) create mode 100644 Project: Library/index.html create mode 100644 Project: Library/index.js create mode 100644 Project: Library/styles.css diff --git a/Project: Library/index.html b/Project: Library/index.html new file mode 100644 index 0000000..8984b0b --- /dev/null +++ b/Project: Library/index.html @@ -0,0 +1,18 @@ + + + + + + + + Document + + + +
+
+ + + + + \ No newline at end of file diff --git a/Project: Library/index.js b/Project: Library/index.js new file mode 100644 index 0000000..e69de29 diff --git a/Project: Library/styles.css b/Project: Library/styles.css new file mode 100644 index 0000000..e69de29 From d0fa9393e714d3ea287adab6d4584e38ac325444 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 01:48:04 +0300 Subject: [PATCH 02/42] changed index.html skeleton file + added js code from SHA --- Project: Library/index.html | 8 ++------ Project: Library/index.js | 10 ++++++++++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/Project: Library/index.html b/Project: Library/index.html index 8984b0b..714a88d 100644 --- a/Project: Library/index.html +++ b/Project: Library/index.html @@ -8,11 +8,7 @@ Document - -
-
-
- - + + \ No newline at end of file diff --git a/Project: Library/index.js b/Project: Library/index.js index e69de29..6ab2851 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -0,0 +1,10 @@ + +let myLibrary = []; + +function Book() { + // the constructor... +} + +function addBookToLibrary() { + // do stuff here +} \ No newline at end of file From d9f932d2a95da84e0db99492416f95d1d90cf170 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 01:57:01 +0300 Subject: [PATCH 03/42] added function Book() from previous exercise --- Project: Library/index.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/Project: Library/index.js b/Project: Library/index.js index 6ab2851..6650649 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -1,10 +1,25 @@ let myLibrary = []; -function Book() { - // the constructor... +function Book(title, author, pages, isRead) { + this.title = title; + this.author = author; + this.pages = pages; + this.isRead = isRead; + this.info = function () { + if (!isRead) { + return `${this.title} by ${this.author}, ${this.pages} pages, not read yet`; + } else { + return `${this.title} by ${this.author}, ${this.pages} pages, has been read`; + } + }; } +const myBook = new Book("Harry Potter", "J. K. Rowling", 495, true); + +console.log(myBook.info()); + + function addBookToLibrary() { - // do stuff here + // do stuff here } \ No newline at end of file From 75f0f06a0dee73462c4575ddd5e0690d4fed7718 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 01:59:31 +0300 Subject: [PATCH 04/42] changed boolean property name --- Project: Library/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/Project: Library/index.js b/Project: Library/index.js index 6650649..1e4b00a 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -1,14 +1,13 @@ - let myLibrary = []; -function Book(title, author, pages, isRead) { +function Book(title, author, pages, hasBeenRead) { this.title = title; this.author = author; this.pages = pages; - this.isRead = isRead; + this.hasBeenRead = hasBeenRead; this.info = function () { - if (!isRead) { - return `${this.title} by ${this.author}, ${this.pages} pages, not read yet`; + if (!hasBeenRead) { + return `${this.title} by ${this.author}, ${this.pages} pages, has not been read yet`; } else { return `${this.title} by ${this.author}, ${this.pages} pages, has been read`; } @@ -19,7 +18,6 @@ const myBook = new Book("Harry Potter", "J. K. Rowling", 495, true); console.log(myBook.info()); - function addBookToLibrary() { - // do stuff here -} \ No newline at end of file + // do stuff here +} From 92c2b31b8a8f2ebbe83ce14315bee8ce7f0353f5 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 02:22:25 +0300 Subject: [PATCH 05/42] added more books --- Project: Library/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/Project: Library/index.js b/Project: Library/index.js index 1e4b00a..fd6e681 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -14,9 +14,15 @@ function Book(title, author, pages, hasBeenRead) { }; } -const myBook = new Book("Harry Potter", "J. K. Rowling", 495, true); +const newBook1 = new Book("Harry Potter", "J. K. Rowling", 395, true); +const newBook2 = new Book("The Lord of the Rings", "J. R. R. Tolkien", 595, false); +const newBook3 = new Book("The Count of Monte Cristo", "Alexandre Dumas", 385, false); +const newBook4 = new Book("Don Quixote", " Miguel de Cervantes", 483, true); -console.log(myBook.info()); +console.log(newBook1.info()); +console.log(newBook2.info()); +console.log(newBook3.info()); +console.log(newBook4.info()); function addBookToLibrary() { // do stuff here From c6ba9060eb456c2c7efc5c6f8ec802b1186008f8 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 02:39:54 +0300 Subject: [PATCH 06/42] added bootstrap link + added dropdown list --- Project: Library/index.html | 50 +++++++++++++++++++++++++++---------- Project: Library/index.js | 15 ++++++++--- 2 files changed, 48 insertions(+), 17 deletions(-) diff --git a/Project: Library/index.html b/Project: Library/index.html index 714a88d..b15a5cc 100644 --- a/Project: Library/index.html +++ b/Project: Library/index.html @@ -1,14 +1,38 @@ - + - - - - - - Document - - - - - - \ No newline at end of file + + + + + + + Project: Library + + + + +
+
+ +
+ + + +
+
+
+ + + + diff --git a/Project: Library/index.js b/Project: Library/index.js index fd6e681..c3636e9 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -1,5 +1,3 @@ -let myLibrary = []; - function Book(title, author, pages, hasBeenRead) { this.title = title; this.author = author; @@ -24,6 +22,15 @@ console.log(newBook2.info()); console.log(newBook3.info()); console.log(newBook4.info()); -function addBookToLibrary() { - // do stuff here + +let myLibrary = []; + +function addBookToLibrary(selectedBook) { + //TODO function must take user’s input and store the new book objects into an array. + + return myLibrary.push(selectedBook); } +addBookToLibrary(newBook1); +addBookToLibrary(newBook2); + + console.log(myLibrary); \ No newline at end of file From 0eb06a26aa9733273518c40bc028cd03c06b0efd Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 15:50:14 +0300 Subject: [PATCH 07/42] added header + footer + height 100vh --- Project: Library/index.html | 42 +++++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/Project: Library/index.html b/Project: Library/index.html index b15a5cc..70212a0 100644 --- a/Project: Library/index.html +++ b/Project: Library/index.html @@ -11,14 +11,38 @@ integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> + Project: Library - + -
-
- +
+ +
+ +
+
@@ -31,8 +55,18 @@
+
+
+
+ © jeelex 2021. + + +
+
+ + From 04bf79a2a9c25615bf394118f233ae043381bdc6 Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 17:27:06 +0300 Subject: [PATCH 08/42] added book template --- Project: Library/index.html | 118 ++++++++++++++++++++++++++++++------ Project: Library/index.js | 15 +++-- 2 files changed, 110 insertions(+), 23 deletions(-) diff --git a/Project: Library/index.html b/Project: Library/index.html index 70212a0..c6a2585 100644 --- a/Project: Library/index.html +++ b/Project: Library/index.html @@ -11,13 +11,14 @@ integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> - + Project: Library - + + -
+
-
-
-
- - - +
+
+

Add Books to your Library!

+ +
+ +
+
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+ +
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+ +
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+ +
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+ +
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+ +
+
Harry Potter
+
+
by J. K. Rowling
+

392 pages

+
+ + + +
+
+ +
-
+ diff --git a/Project: Library/index.js b/Project: Library/index.js index c3636e9..c70465b 100644 --- a/Project: Library/index.js +++ b/Project: Library/index.js @@ -1,3 +1,8 @@ +const libraryDiv = document.getElementById("library-div"); + + + + function Book(title, author, pages, hasBeenRead) { this.title = title; this.author = author; @@ -17,10 +22,10 @@ const newBook2 = new Book("The Lord of the Rings", "J. R. R. Tolkien", 595, fals const newBook3 = new Book("The Count of Monte Cristo", "Alexandre Dumas", 385, false); const newBook4 = new Book("Don Quixote", " Miguel de Cervantes", 483, true); -console.log(newBook1.info()); -console.log(newBook2.info()); -console.log(newBook3.info()); -console.log(newBook4.info()); +// console.log(newBook1.info()); +// console.log(newBook2.info()); +// console.log(newBook3.info()); +// console.log(newBook4.info()); let myLibrary = []; @@ -33,4 +38,4 @@ function addBookToLibrary(selectedBook) { addBookToLibrary(newBook1); addBookToLibrary(newBook2); - console.log(myLibrary); \ No newline at end of file + // console.log(myLibrary); \ No newline at end of file From f0bd9066ab1d731f7da92c94a4c9f45e787a3a9d Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 17:38:04 +0300 Subject: [PATCH 09/42] fixed title + btn new book --- Project: Library/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Project: Library/index.html b/Project: Library/index.html index c6a2585..dea4782 100644 --- a/Project: Library/index.html +++ b/Project: Library/index.html @@ -43,9 +43,9 @@
-
-

Add Books to your Library!

- +
+

Add Books to your Library!

+
@@ -61,9 +61,9 @@
by J. K. Rowling
-
Harry Potter
+
The Lord of the Rings
-
by J. K. Rowling
+
by J. R. R. Tolkien

392 pages

From 3c703338ab043988569ae6873d3d815dd88d1aad Mon Sep 17 00:00:00 2001 From: Gogi Date: Fri, 23 Apr 2021 23:44:04 +0300 Subject: [PATCH 10/42] renamed folder and started html from scratch --- Project Library/index.html | 56 +++++++ .../index.js | 5 +- Project Library/styles.css | 3 + Project: Library/index.html | 154 ------------------ Project: Library/styles.css | 0 5 files changed, 60 insertions(+), 158 deletions(-) create mode 100644 Project Library/index.html rename {Project: Library => Project Library}/index.js (94%) create mode 100644 Project Library/styles.css delete mode 100644 Project: Library/index.html delete mode 100644 Project: Library/styles.css diff --git a/Project Library/index.html b/Project Library/index.html new file mode 100644 index 0000000..5fd19e6 --- /dev/null +++ b/Project Library/index.html @@ -0,0 +1,56 @@ + + + + + + + + Document + + +
+

Add Books to your Library!

+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+
+ + + + + + + + + + + + + + + +
Book TitleAuthorPage NoHave your read it?
Harry PotterJ. K. Rowling392 +
+ + + + diff --git a/Project: Library/index.js b/Project Library/index.js similarity index 94% rename from Project: Library/index.js rename to Project Library/index.js index c70465b..07f79d7 100644 --- a/Project: Library/index.js +++ b/Project Library/index.js @@ -1,7 +1,3 @@ -const libraryDiv = document.getElementById("library-div"); - - - function Book(title, author, pages, hasBeenRead) { this.title = title; @@ -32,6 +28,7 @@ let myLibrary = []; function addBookToLibrary(selectedBook) { //TODO function must take user’s input and store the new book objects into an array. + return myLibrary.push(selectedBook); } diff --git a/Project Library/styles.css b/Project Library/styles.css new file mode 100644 index 0000000..b55a02b --- /dev/null +++ b/Project Library/styles.css @@ -0,0 +1,3 @@ +td { + padding: 3em; +} \ No newline at end of file diff --git a/Project: Library/index.html b/Project: Library/index.html deleted file mode 100644 index dea4782..0000000 --- a/Project: Library/index.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - - - - - - Project: Library - - - - - -
- -
- -
-
-

Add Books to your Library!

- -
- -
-
-
Harry Potter
-
-
by J. K. Rowling
-

392 pages

-
- - - -
- -
-
The Lord of the Rings
-
-
by J. R. R. Tolkien
-

392 pages

-
- - - -
- -
-
Harry Potter
-
-
by J. K. Rowling
-

392 pages

-
- - - -
- -
-
Harry Potter
-
-
by J. K. Rowling
-

392 pages

-
- - - -
- -
-
Harry Potter
-
-
by J. K. Rowling
-

392 pages

-
- - - -
- -
-
Harry Potter
-
-
by J. K. Rowling
-

392 pages

-
- - - -
-
- - -
- - - - - - diff --git a/Project: Library/styles.css b/Project: Library/styles.css deleted file mode 100644 index e69de29..0000000 From 08fd520bc1a2690f37771c13c2bb389c8ff69587 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 11:31:01 +0300 Subject: [PATCH 11/42] started creating render function --- Project Library/index.html | 28 +++++++++---------- Project Library/index.js | 57 ++++++++++++++++++++++++++++++-------- Project Library/styles.css | 2 +- 3 files changed, 61 insertions(+), 26 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index 5fd19e6..d83f40a 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -3,37 +3,38 @@ - + - Document + Project Library

Add Books to your Library!

- +
-
- - +
- +
- +
- - +
- + +
-
+ + + + @@ -46,8 +47,7 @@

Add Books to your Library!

- +
Harry Potter J. K. Rowling 392 -
diff --git a/Project Library/index.js b/Project Library/index.js index 07f79d7..1c18858 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -1,3 +1,21 @@ +const form = document.getElementById("form"); +const bookTitle = document.getElementById("title"); +const bookAuthor = document.getElementById("author"); +const bookPages = document.getElementById("page-no"); +const bookStatus = document.getElementById("checkbox-add-new-book"); +const btnAddBook = document.getElementById("btn-add-book"); + +// console.log(checkboxAddNewBook); + +form.addEventListener("submit", (e) => { + e.preventDefault(); + // console.log(e.target); + // console.log(bookTitle.value); + // console.log(bookAuthor.value); + // console.log(bookPages.value); + // console.log(bookStatus.value); + addBookToLibrary(); +}); function Book(title, author, pages, hasBeenRead) { this.title = title; @@ -14,25 +32,42 @@ function Book(title, author, pages, hasBeenRead) { } const newBook1 = new Book("Harry Potter", "J. K. Rowling", 395, true); -const newBook2 = new Book("The Lord of the Rings", "J. R. R. Tolkien", 595, false); -const newBook3 = new Book("The Count of Monte Cristo", "Alexandre Dumas", 385, false); -const newBook4 = new Book("Don Quixote", " Miguel de Cervantes", 483, true); +// const newBook2 = new Book("The Lord of the Rings", "J. R. R. Tolkien", 595, false); +// const newBook3 = new Book("The Count of Monte Cristo", "Alexandre Dumas", 385, false); +// const newBook4 = new Book("Don Quixote", " Miguel de Cervantes", 483, true); // console.log(newBook1.info()); // console.log(newBook2.info()); // console.log(newBook3.info()); // console.log(newBook4.info()); - let myLibrary = []; -function addBookToLibrary(selectedBook) { - //TODO function must take user’s input and store the new book objects into an array. +function addBookToLibrary() { + const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.value); - - return myLibrary.push(selectedBook); + myLibrary.push(newBook); + return; } -addBookToLibrary(newBook1); -addBookToLibrary(newBook2); +// addBookToLibrary(newBook); +// addBookToLibrary(newBook2); + +// console.log(myLibrary); + + +function render() { + - // console.log(myLibrary); \ No newline at end of file + const html = ` + + ${bookTitle.value} + ${bookAuthor.value} + ${bookPages.value} + + + + ${bookStatus.value} + + + ` +} \ No newline at end of file diff --git a/Project Library/styles.css b/Project Library/styles.css index b55a02b..0363c99 100644 --- a/Project Library/styles.css +++ b/Project Library/styles.css @@ -1,3 +1,3 @@ td { - padding: 3em; + padding: 1em 3em; } \ No newline at end of file From b47e3cfa81f590892523d45c48bd6c855646e96f Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 13:40:13 +0300 Subject: [PATCH 12/42] completed render function --- Project Library/index.html | 9 ++++++--- Project Library/index.js | 32 +++++++++++++++++++++----------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index d83f40a..d225b7c 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -23,7 +23,7 @@

Add Books to your Library!

- +
@@ -36,7 +36,7 @@

Add Books to your Library!

- +
@@ -47,7 +47,10 @@

Add Books to your Library!

- +
Book Title Author Harry Potter J. K. Rowling 392 + + +
diff --git a/Project Library/index.js b/Project Library/index.js index 1c18858..c974194 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -4,6 +4,7 @@ const bookAuthor = document.getElementById("author"); const bookPages = document.getElementById("page-no"); const bookStatus = document.getElementById("checkbox-add-new-book"); const btnAddBook = document.getElementById("btn-add-book"); +const tableLibrary = document.getElementById("table-library"); // console.log(checkboxAddNewBook); @@ -13,8 +14,9 @@ form.addEventListener("submit", (e) => { // console.log(bookTitle.value); // console.log(bookAuthor.value); // console.log(bookPages.value); - // console.log(bookStatus.value); + // console.log( bookStatus.checked); addBookToLibrary(); + render(); }); function Book(title, author, pages, hasBeenRead) { @@ -44,7 +46,7 @@ const newBook1 = new Book("Harry Potter", "J. K. Rowling", 395, true); let myLibrary = []; function addBookToLibrary() { - const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.value); + const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); myLibrary.push(newBook); return; @@ -56,18 +58,26 @@ function addBookToLibrary() { function render() { + // myLibrary.forEach(book => { + let read = "No"; + + if (bookStatus.checked){ + read = "Yes" ; + } - const html = ` - + const html = ` + ${bookTitle.value} ${bookAuthor.value} ${bookPages.value} - - - - ${bookStatus.value} - - - ` + ${read} + + ` + + tableLibrary.insertAdjacentHTML("beforeend", html); + + // }) + + } \ No newline at end of file From 0de5c7ba104d72ed4ecdf3e465348c05e254cdd2 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 13:53:41 +0300 Subject: [PATCH 13/42] added btnNewBook which makes form appear when clicked --- Project Library/index.html | 11 +++-------- Project Library/index.js | 36 ++++++++++++++---------------------- Project Library/styles.css | 13 ++++++++++++- 3 files changed, 29 insertions(+), 31 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index d225b7c..f66cf61 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -10,10 +10,10 @@

Add Books to your Library!

- +
-
+
@@ -31,9 +31,7 @@

Add Books to your Library!

- - @@ -47,10 +45,7 @@

Add Books to your Library!

- +
Harry Potter J. K. Rowling 392 - - - Yes
diff --git a/Project Library/index.js b/Project Library/index.js index c974194..c464a42 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -3,22 +3,23 @@ const bookTitle = document.getElementById("title"); const bookAuthor = document.getElementById("author"); const bookPages = document.getElementById("page-no"); const bookStatus = document.getElementById("checkbox-add-new-book"); +const btnNewBook = document.getElementById("btn-new-book"); const btnAddBook = document.getElementById("btn-add-book"); const tableLibrary = document.getElementById("table-library"); -// console.log(checkboxAddNewBook); +// console.log(btnNewBook); form.addEventListener("submit", (e) => { e.preventDefault(); - // console.log(e.target); - // console.log(bookTitle.value); - // console.log(bookAuthor.value); - // console.log(bookPages.value); - // console.log( bookStatus.checked); addBookToLibrary(); render(); }); +btnNewBook.addEventListener("click", () => { + form.classList.remove("display-none"); + form.classList.add("display-block"); +}); + function Book(title, author, pages, hasBeenRead) { this.title = title; this.author = author; @@ -56,28 +57,19 @@ function addBookToLibrary() { // console.log(myLibrary); - function render() { - // myLibrary.forEach(book => { let read = "No"; - - if (bookStatus.checked){ - read = "Yes" ; - } - - - const html = ` + if (bookStatus.checked) { + read = "Yes"; + } + const html = ` ${bookTitle.value} ${bookAuthor.value} ${bookPages.value} ${read} - ` - - tableLibrary.insertAdjacentHTML("beforeend", html); - - // }) + `; - -} \ No newline at end of file + tableLibrary.insertAdjacentHTML("beforeend", html); +} diff --git a/Project Library/styles.css b/Project Library/styles.css index 0363c99..3ea7288 100644 --- a/Project Library/styles.css +++ b/Project Library/styles.css @@ -1,3 +1,14 @@ td { - padding: 1em 3em; + padding: 1em 3em; +} + +/* #form { + display: none; +} */ + +.display-none { + display: none; +} +.display-block { + display: block; } \ No newline at end of file From 6ce30f6e4f41728ea76eb518d5b13e1ec9a4ef88 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 16:06:25 +0300 Subject: [PATCH 14/42] added helper funcion for querySelector --- Project Library/index.html | 13 ++++---- Project Library/index.js | 62 +++++++++++++++++++++++++------------- 2 files changed, 48 insertions(+), 27 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index f66cf61..78074a3 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -15,23 +15,23 @@

Add Books to your Library!

@@ -46,6 +46,7 @@

Add Books to your Library!

+
J. K. Rowling 392 Yes
diff --git a/Project Library/index.js b/Project Library/index.js index c464a42..8beb7c1 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -1,24 +1,21 @@ -const form = document.getElementById("form"); -const bookTitle = document.getElementById("title"); -const bookAuthor = document.getElementById("author"); -const bookPages = document.getElementById("page-no"); -const bookStatus = document.getElementById("checkbox-add-new-book"); -const btnNewBook = document.getElementById("btn-new-book"); -const btnAddBook = document.getElementById("btn-add-book"); -const tableLibrary = document.getElementById("table-library"); +function $(selector) { + return document.querySelector(selector); +}; -// console.log(btnNewBook); +const form = $("#form"); +const bookTitle = $("#title"); +const bookAuthor = $("#author"); +const bookPages = $("#page-no"); +const bookStatus = $("#checkbox-add-new-book"); +const btnNewBook = $("#btn-new-book"); +const btnAddBook = $("#btn-add-book"); +const tableLibrary = $("#table-library"); +const btnRemoveBook = document.querySelectorAll(".btn-remove-book"); + +// console.log(btns); + -form.addEventListener("submit", (e) => { - e.preventDefault(); - addBookToLibrary(); - render(); -}); -btnNewBook.addEventListener("click", () => { - form.classList.remove("display-none"); - form.classList.add("display-block"); -}); function Book(title, author, pages, hasBeenRead) { this.title = title; @@ -45,18 +42,19 @@ const newBook1 = new Book("Harry Potter", "J. K. Rowling", 395, true); // console.log(newBook4.info()); let myLibrary = []; +myLibrary.push(newBook1); + +// adding new book to the Library array function addBookToLibrary() { const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); myLibrary.push(newBook); return; } -// addBookToLibrary(newBook); -// addBookToLibrary(newBook2); -// console.log(myLibrary); +// adding new book to the Dom function render() { let read = "No"; if (bookStatus.checked) { @@ -68,8 +66,30 @@ function render() { ${bookAuthor.value} ${bookPages.value} ${read} + `; tableLibrary.insertAdjacentHTML("beforeend", html); } + + +// displaying form (modal) +btnNewBook.addEventListener("click", () => { + form.classList.remove("display-none"); + form.classList.add("display-block"); +}); + + +// displaying book to list +form.addEventListener("submit", (e) => { +e.preventDefault(); +addBookToLibrary(); +render(); +}); + + +// removing book +btnRemoveBook.forEach((btn) => btn.addEventListener("click", () => { +console.log("remove btns work!"); +})); \ No newline at end of file From 654f81218464e59fdcde27d596d06ff3785c3137 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 22:51:17 +0300 Subject: [PATCH 15/42] deleted for loop fron render function --- Project Library/index.js | 81 ++++++++++++++++++++++++++++++---------- 1 file changed, 61 insertions(+), 20 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index 8beb7c1..de82c97 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -1,6 +1,8 @@ +"use strict"; + function $(selector) { - return document.querySelector(selector); -}; + return document.querySelector(selector); +} const form = $("#form"); const bookTitle = $("#title"); @@ -10,12 +12,10 @@ const bookStatus = $("#checkbox-add-new-book"); const btnNewBook = $("#btn-new-book"); const btnAddBook = $("#btn-add-book"); const tableLibrary = $("#table-library"); -const btnRemoveBook = document.querySelectorAll(".btn-remove-book"); - -// console.log(btns); - - +// const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); +const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); +// console.log(btnsRemoveBook); function Book(title, author, pages, hasBeenRead) { this.title = title; @@ -44,15 +44,16 @@ const newBook1 = new Book("Harry Potter", "J. K. Rowling", 395, true); let myLibrary = []; myLibrary.push(newBook1); - // adding new book to the Library array function addBookToLibrary() { const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); myLibrary.push(newBook); - return; -} + // console.log(myLibrary); + render(newBook); + // return; +} // adding new book to the Dom function render() { @@ -60,7 +61,10 @@ function render() { if (bookStatus.checked) { read = "Yes"; } - const html = ` + + let newBook = document.createElement("tr"); + + newBook.innerHTML = ` ${bookTitle.value} ${bookAuthor.value} @@ -70,9 +74,44 @@ function render() { `; - tableLibrary.insertAdjacentHTML("beforeend", html); + // tableLibrary.insertAdjacentHTML("beforeend", html); + tableLibrary.appendChild(newBook); } +// function render(element) { +// // myLibrary.forEach((book) => { + +// for (let i = 0; i < myLibrary.length; i++) { + +// if (myLibrary[i] === element) { +// console.log("book included!"); +// break; +// } + +// let read = "No"; +// if (myLibrary[i].hasBeenRead) { +// read = "Yes"; +// } +// let newBook = document.createElement("tr"); +// newBook.innerHTML = ` +// +// ${myLibrary[i].title} +// ${myLibrary[i].author} +// ${myLibrary[i].pages} +// ${read} +// +// +// `; + +// // tableLibrary.insertAdjacentHTML("beforeend", html); +// tableLibrary.appendChild(newBook); +// } +// // }); +// } + +// myLibrary.forEach((book) => { +// console.log(book.title); +// }); // displaying form (modal) btnNewBook.addEventListener("click", () => { @@ -80,16 +119,18 @@ btnNewBook.addEventListener("click", () => { form.classList.add("display-block"); }); - // displaying book to list form.addEventListener("submit", (e) => { -e.preventDefault(); -addBookToLibrary(); -render(); + e.preventDefault(); + addBookToLibrary(); + // console.log(btnsRemoveBook); }); - // removing book -btnRemoveBook.forEach((btn) => btn.addEventListener("click", () => { -console.log("remove btns work!"); -})); \ No newline at end of file +// const btnsRemoveBookArray = Array.from(btnsRemoveBook); + +// btnsRemoveBook.forEach((btn) => +// btn.addEventListener("click", () => { +// console.log("remove btns work!"); +// }) +// ); From 8e2f9dc464061a761fbce0a9edbd65d367046d3a Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 22:59:02 +0300 Subject: [PATCH 16/42] added clearForm() --- Project Library/index.js | 50 ++++++++-------------------------------- 1 file changed, 10 insertions(+), 40 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index de82c97..eed5b73 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -49,10 +49,7 @@ function addBookToLibrary() { const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); myLibrary.push(newBook); - // console.log(myLibrary); - render(newBook); - - // return; + render(); } // adding new book to the Dom @@ -78,41 +75,6 @@ function render() { tableLibrary.appendChild(newBook); } -// function render(element) { -// // myLibrary.forEach((book) => { - -// for (let i = 0; i < myLibrary.length; i++) { - -// if (myLibrary[i] === element) { -// console.log("book included!"); -// break; -// } - -// let read = "No"; -// if (myLibrary[i].hasBeenRead) { -// read = "Yes"; -// } -// let newBook = document.createElement("tr"); -// newBook.innerHTML = ` -// -// ${myLibrary[i].title} -// ${myLibrary[i].author} -// ${myLibrary[i].pages} -// ${read} -// -// -// `; - -// // tableLibrary.insertAdjacentHTML("beforeend", html); -// tableLibrary.appendChild(newBook); -// } -// // }); -// } - -// myLibrary.forEach((book) => { -// console.log(book.title); -// }); - // displaying form (modal) btnNewBook.addEventListener("click", () => { form.classList.remove("display-none"); @@ -123,9 +85,17 @@ btnNewBook.addEventListener("click", () => { form.addEventListener("submit", (e) => { e.preventDefault(); addBookToLibrary(); - // console.log(btnsRemoveBook); + clearForm(); }); +// clearing form +function clearForm() { + bookTitle.value = ""; + bookAuthor.value = ""; + bookPages.value = ""; + bookStatus.checked = ""; +} + // removing book // const btnsRemoveBookArray = Array.from(btnsRemoveBook); From 8c9ac7d9143691f9de138acc424dacc1719df3e7 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sat, 24 Apr 2021 23:10:50 +0300 Subject: [PATCH 17/42] created event listener to grab clicks inside table --- Project Library/index.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index eed5b73..663595a 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -12,8 +12,8 @@ const bookStatus = $("#checkbox-add-new-book"); const btnNewBook = $("#btn-new-book"); const btnAddBook = $("#btn-add-book"); const tableLibrary = $("#table-library"); -// const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); -const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); +const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); +// const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); // console.log(btnsRemoveBook); @@ -97,10 +97,7 @@ function clearForm() { } // removing book -// const btnsRemoveBookArray = Array.from(btnsRemoveBook); -// btnsRemoveBook.forEach((btn) => -// btn.addEventListener("click", () => { -// console.log("remove btns work!"); -// }) -// ); +tableLibrary.addEventListener("click", (e) => { + console.log(e.target); +}); From 4b0717fadb4a0ef46952a658f7aefd5674549b18 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 00:10:56 +0300 Subject: [PATCH 18/42] added event listener to remove table row when REMOVE button is clicked --- Project Library/index.js | 10 +++++++--- Project Library/styles.css | 17 ++++++++++++++--- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index 663595a..ff6d2cf 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -12,8 +12,9 @@ const bookStatus = $("#checkbox-add-new-book"); const btnNewBook = $("#btn-new-book"); const btnAddBook = $("#btn-add-book"); const tableLibrary = $("#table-library"); -const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); -// const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); +const tableRows = document.getElementsByTagName("tr"); +// const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); +const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); // console.log(btnsRemoveBook); @@ -99,5 +100,8 @@ function clearForm() { // removing book tableLibrary.addEventListener("click", (e) => { - console.log(e.target); + if (e.target.tagName === "BUTTON"){ + e.target.parentNode.parentNode.remove(); + } + }); diff --git a/Project Library/styles.css b/Project Library/styles.css index 3ea7288..752e220 100644 --- a/Project Library/styles.css +++ b/Project Library/styles.css @@ -1,14 +1,25 @@ +body{ + text-align: left; +} + +th, td { padding: 1em 3em; } +/* #table-library { + display: flex; + justify-content: center; + align-items: center; +} */ + /* #form { display: none; } */ .display-none { - display: none; + display: none; } .display-block { - display: block; -} \ No newline at end of file + display: block; +} From e30a1b69328014f78c0b329dad2dc1d33d204478 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 01:36:01 +0300 Subject: [PATCH 19/42] trying to pinpoint books inside myLibrary when deleting from the DOM --- Project Library/index.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index ff6d2cf..00ab03f 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -68,7 +68,7 @@ function render() { ${bookAuthor.value} ${bookPages.value} ${read} - + `; @@ -100,8 +100,25 @@ function clearForm() { // removing book tableLibrary.addEventListener("click", (e) => { - if (e.target.tagName === "BUTTON"){ - e.target.parentNode.parentNode.remove(); + if (e.target.tagName === "BUTTON") { + // e.target.parentNode.parentNode.remove(); + // TODO remove book from myLibrary array + const bookToFind = myLibrary.find((item) => { + item.title === "Harry Potter"; + // console.log(item.title); + }); + console.log(bookToFind); } - }); + +// for (const bookItem of myLibrary) { +// for (const book in Object) { +// // if (book) { +// console.log(book); +// // const element = object[book]; + +// // } +// } +// } + +// myLibrary.forEach(item => console.log(item.title)) From 3a7f0dd34ad90e2a8a5573068b2777758d4e92aa Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 18:54:19 +0300 Subject: [PATCH 20/42] added .closest() to find the parent of remove btn --- Project Library/index.html | 2 +- Project Library/index.js | 40 +++++++++++++++++++++++++------------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index 78074a3..c18d952 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -42,7 +42,7 @@

Add Books to your Library!

Have your read it? - Harry Potter + Harry Potter J. K. Rowling 392 Yes diff --git a/Project Library/index.js b/Project Library/index.js index 00ab03f..31eb3a8 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -11,8 +11,8 @@ const bookPages = $("#page-no"); const bookStatus = $("#checkbox-add-new-book"); const btnNewBook = $("#btn-new-book"); const btnAddBook = $("#btn-add-book"); -const tableLibrary = $("#table-library"); -const tableRows = document.getElementsByTagName("tr"); +const tableBody = $("#table-library > tbody"); +// const tableRows = document.getElementsByTagName("tr"); // const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); @@ -63,17 +63,17 @@ function render() { let newBook = document.createElement("tr"); newBook.innerHTML = ` - - ${bookTitle.value} - ${bookAuthor.value} - ${bookPages.value} - ${read} - + + ${bookTitle.value} + ${bookAuthor.value} + ${bookPages.value} + ${read} + `; // tableLibrary.insertAdjacentHTML("beforeend", html); - tableLibrary.appendChild(newBook); + tableBody.appendChild(newBook); } // displaying form (modal) @@ -99,16 +99,19 @@ function clearForm() { // removing book -tableLibrary.addEventListener("click", (e) => { - if (e.target.tagName === "BUTTON") { - // e.target.parentNode.parentNode.remove(); +tableBody.addEventListener("click", (e) => { + if (!e.target.classList.contains("btn-remove-book")) { + return; + } + console.log(e.target.closest("tr")); + // e.target.closest("tr").remove(); // TODO remove book from myLibrary array const bookToFind = myLibrary.find((item) => { item.title === "Harry Potter"; // console.log(item.title); }); console.log(bookToFind); - } + }); // for (const bookItem of myLibrary) { @@ -122,3 +125,14 @@ tableLibrary.addEventListener("click", (e) => { // } // myLibrary.forEach(item => console.log(item.title)) + +// let value = el.getAttribute("data-state"); +{ + /* */ +} + +// myLibrary[1].title + +// for (let item of myLibrary) { +// console.log(item.title); +// } \ No newline at end of file From bfa53ff14bc2928a9489ab8581e8273d233fdf04 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 23:16:52 +0300 Subject: [PATCH 21/42] fixed rended() -> now it loops through array and displays books in DOM --- Project Library/index.html | 12 ++--- Project Library/index.js | 93 ++++++++++++++++++++++++-------------- 2 files changed, 61 insertions(+), 44 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index c18d952..487bf9a 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -35,19 +35,13 @@

Add Books to your Library!

- + - - - - - - - - + +
Book Title Author Page No Have your read it?
Harry PotterJ. K. Rowling392Yes
diff --git a/Project Library/index.js b/Project Library/index.js index 31eb3a8..6a9353b 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -12,6 +12,7 @@ const bookStatus = $("#checkbox-add-new-book"); const btnNewBook = $("#btn-new-book"); const btnAddBook = $("#btn-add-book"); const tableBody = $("#table-library > tbody"); +const table = $("#table-library"); // const tableRows = document.getElementsByTagName("tr"); // const btnsRemoveBook = document.querySelectorAll(".btn-remove-book"); const btnsRemoveBook = document.getElementsByClassName("btn-remove-book"); @@ -48,32 +49,8 @@ myLibrary.push(newBook1); // adding new book to the Library array function addBookToLibrary() { const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); - myLibrary.push(newBook); - render(); -} - -// adding new book to the Dom -function render() { - let read = "No"; - if (bookStatus.checked) { - read = "Yes"; - } - - let newBook = document.createElement("tr"); - - newBook.innerHTML = ` - - ${bookTitle.value} - ${bookAuthor.value} - ${bookPages.value} - ${read} - - - `; - - // tableLibrary.insertAdjacentHTML("beforeend", html); - tableBody.appendChild(newBook); + render(myLibrary); } // displaying form (modal) @@ -86,9 +63,56 @@ btnNewBook.addEventListener("click", () => { form.addEventListener("submit", (e) => { e.preventDefault(); addBookToLibrary(); + // render(myLibrary); clearForm(); }); +// adding new book to the Dom +// function render() { +// let read = "No"; +// if (bookStatus.checked) { +// read = "Yes"; +// } + +// let newBook = document.createElement("tr"); + +// newBook.innerHTML = ` +// +// ${bookTitle.value} +// ${bookAuthor.value} +// ${bookPages.value} +// ${read} +// +// +// `; + +// // tableLibrary.insertAdjacentHTML("beforeend", html); +// tableBody.appendChild(newBook); +// } + +function render(array) { + tableBody.innerHTML = ""; + let read = "No"; + if (bookStatus.checked) { + read = "Yes"; + } + + for (let book of array) { + let row = ` + ${book.title} + ${book.author} + ${book.pages} + ${read} + + `; + + tableBody.insertAdjacentHTML("beforeend", row); + // tableBody.innerHTML += row; + } +} + + + // clearing form function clearForm() { bookTitle.value = ""; @@ -105,13 +129,12 @@ tableBody.addEventListener("click", (e) => { } console.log(e.target.closest("tr")); // e.target.closest("tr").remove(); - // TODO remove book from myLibrary array - const bookToFind = myLibrary.find((item) => { - item.title === "Harry Potter"; - // console.log(item.title); - }); - console.log(bookToFind); - + // TODO remove book from myLibrary array + const bookToFind = myLibrary.find((item) => { + item.title === "Harry Potter"; + // console.log(item.title); + }); + console.log(bookToFind); }); // for (const bookItem of myLibrary) { @@ -127,12 +150,12 @@ tableBody.addEventListener("click", (e) => { // myLibrary.forEach(item => console.log(item.title)) // let value = el.getAttribute("data-state"); -{ + /* */ -} + // myLibrary[1].title // for (let item of myLibrary) { // console.log(item.title); -// } \ No newline at end of file +// } From acfa0be3d8ad39ba02abe614a75a5853a7631bac Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 23:27:52 +0300 Subject: [PATCH 22/42] swapped if statement from render() with ternary operator --- Project Library/index.js | 48 ++++++---------------------------------- 1 file changed, 7 insertions(+), 41 deletions(-) diff --git a/Project Library/index.js b/Project Library/index.js index 6a9353b..8f369b9 100644 --- a/Project Library/index.js +++ b/Project Library/index.js @@ -50,7 +50,7 @@ myLibrary.push(newBook1); function addBookToLibrary() { const newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookStatus.checked); myLibrary.push(newBook); - render(myLibrary); + // render(myLibrary); } // displaying form (modal) @@ -63,51 +63,24 @@ btnNewBook.addEventListener("click", () => { form.addEventListener("submit", (e) => { e.preventDefault(); addBookToLibrary(); - // render(myLibrary); + render(myLibrary); clearForm(); }); // adding new book to the Dom -// function render() { -// let read = "No"; -// if (bookStatus.checked) { -// read = "Yes"; -// } - -// let newBook = document.createElement("tr"); - -// newBook.innerHTML = ` -// -// ${bookTitle.value} -// ${bookAuthor.value} -// ${bookPages.value} -// ${read} -// -// -// `; - -// // tableLibrary.insertAdjacentHTML("beforeend", html); -// tableBody.appendChild(newBook); -// } - function render(array) { tableBody.innerHTML = ""; - let read = "No"; - if (bookStatus.checked) { - read = "Yes"; - } - + for (let book of array) { let row = ` ${book.title} ${book.author} ${book.pages} - ${read} + ${book.hasBeenRead ? "Yes" : "No"} `; tableBody.insertAdjacentHTML("beforeend", row); - // tableBody.innerHTML += row; } } @@ -121,6 +94,7 @@ function clearForm() { bookStatus.checked = ""; } + // removing book tableBody.addEventListener("click", (e) => { @@ -132,9 +106,9 @@ tableBody.addEventListener("click", (e) => { // TODO remove book from myLibrary array const bookToFind = myLibrary.find((item) => { item.title === "Harry Potter"; - // console.log(item.title); + console.log(item); }); - console.log(bookToFind); + // console.log(bookToFind); }); // for (const bookItem of myLibrary) { @@ -147,15 +121,7 @@ tableBody.addEventListener("click", (e) => { // } // } -// myLibrary.forEach(item => console.log(item.title)) // let value = el.getAttribute("data-state"); /* */ - - -// myLibrary[1].title - -// for (let item of myLibrary) { -// console.log(item.title); -// } From 8e49d0fe4c1b360aaff71f6c7fa25693801ed3c6 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 25 Apr 2021 23:36:48 +0300 Subject: [PATCH 23/42] made input placeholders uppercase --- Project Library/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Project Library/index.html b/Project Library/index.html index 487bf9a..d2745ca 100644 --- a/Project Library/index.html +++ b/Project Library/index.html @@ -15,15 +15,15 @@

Add Books to your Library!