From beaa62e9f01b0c6cf414187074eca7044c5bf653 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 9 May 2021 15:13:15 +0300 Subject: [PATCH 1/2] created new folder and new branch for project Library with classses --- Project Library with Classes/index.html | 53 ++++++ Project Library with Classes/index.js | 166 ++++++++++++++++++ Project Library with Classes/library-icon.png | Bin 0 -> 23448 bytes Project Library with Classes/styles.css | 6 + 4 files changed, 225 insertions(+) create mode 100644 Project Library with Classes/index.html create mode 100644 Project Library with Classes/index.js create mode 100644 Project Library with Classes/library-icon.png create mode 100644 Project Library with Classes/styles.css diff --git a/Project Library with Classes/index.html b/Project Library with Classes/index.html new file mode 100644 index 0000000..44c126b --- /dev/null +++ b/Project Library with Classes/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + Project Library + + +
+

A Personal Library inside your Browser

+

Add Books to the list below!

+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ + + + + + + + + + +
Book TitleAuthorPage NoHave your read it?Remove Book?
+ + + + diff --git a/Project Library with Classes/index.js b/Project Library with Classes/index.js new file mode 100644 index 0000000..ef14729 --- /dev/null +++ b/Project Library with Classes/index.js @@ -0,0 +1,166 @@ +"use strict"; + +let myLibrary = []; +const form = document.querySelector("#form"); +const bookTitle = document.querySelector("#title"); +const bookAuthor = document.querySelector("#author"); +const bookPages = document.querySelector("#pages"); +const bookStatus = document.querySelector("#status"); +const btnNewBook = document.querySelector("#btn-new-book"); +const btnAddBook = document.querySelector("#btn-add-book"); +const tableBody = document.querySelector("#table-library > tbody"); + +// Book Object constructor +function Book(title, author, pages, status) { + this.title = title; + this.author = author; + this.pages = pages; + this.status = status; + this.toggleStatus = function () { + this.status = !this.status; + }; + this.info = function () { + if (!status) { + 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`; + } + }; +} + +// adding new book to the Library array +function addBookToLibrary(title, author, pages, status, array) { + const newBook = new Book(title, author, pages, status); + array.push(newBook); +} + +// reload localStorage +function reloadLocalStorage() { + if (localStorage.length === 0 || localStorage.myLibrary === "[]") { + addBookToLibrary("Harry Potter", "J. K. Rowling", 395, true, myLibrary); + } else { + let arrayDestringified = JSON.parse(localStorage.getItem("myLibrary")); + arrayDestringified.forEach((element) => { + addBookToLibrary(element.title, element.author, element.pages, element.status, myLibrary); + }); + } +} +reloadLocalStorage(); + +// displaying form (modal) +btnNewBook.addEventListener("click", () => { + // form.classList.remove("hide"); + displayElement(form); + form.classList.add("display-block"); + hideElement(btnNewBook); +}); + +// adding book in DOM list +const getFormInfo = (e) => { + e.preventDefault(); + const targetTitle = e.target.title.value; + const targetAuthor = e.target.author.value; + const targetPages = e.target.pages.value; + const targetStatus = e.target.status.checked; + + addBookToLibrary(targetTitle, targetAuthor, targetPages, targetStatus, myLibrary); + render(myLibrary, tableBody); + saveLibraryToLocalStorage("myLibrary", myLibrary); + clearForm(); + hideElement(form); + displayElement(btnNewBook); +}; +form.addEventListener("submit", getFormInfo); + +// rendering new book from myLibrary array to the Dom +function render(array, parentDiv) { + parentDiv.innerHTML = ""; + for (let i = 0; i < array.length; i++) { + let row = ` + ${array[i].title} + ${array[i].author} + ${array[i].pages} + + + + + `; + + parentDiv.insertAdjacentHTML("beforeend", row); + } +} +render(myLibrary, tableBody); + +// hiding element from the page +function hideElement(element) { + element.classList.add("hide"); +} +hideElement(form); + +// displaying element to the page +function displayElement(element) { + element.classList.remove("hide"); + form.classList.add("display-block"); +} + +// clearing form +function clearForm() { + bookTitle.value = ""; + bookAuthor.value = ""; + bookPages.value = ""; + bookStatus.checked = ""; +} + +// removing book from Library and from the DOM +tableBody.addEventListener("click", (e) => { + if (!e.target.classList.contains("btn-remove-book")) { + return; + } + e.target.closest("tr").remove(); + + let currentBookTitle = e.target.closest("tr").dataset.bookTitle; + removeBookFromLibrary(myLibrary, currentBookTitle); + saveLibraryToLocalStorage("myLibrary", myLibrary); +}); + +function removeBookFromLibrary(libraryArray, bookTitle) { + if (libraryArray.length === 0) { + return; + } + + for (let book of libraryArray) { + if (book.title === bookTitle) { + let bookToRemoveIndex = libraryArray.indexOf(book); + libraryArray.splice(bookToRemoveIndex, 1); + } + } +} + +// Changing the book status in the DOM and inside myLibrary +tableBody.addEventListener("click", (e) => { + if (!e.target.classList.contains("btn-status")) { + return; + } + let currentBtn = e.target; + let currentBookTitle = e.target.closest("tr").dataset.bookTitle; + toggleBookStatus(myLibrary, currentBookTitle, currentBtn); + saveLibraryToLocalStorage("myLibrary", myLibrary); +}); + +function toggleBookStatus(libraryArray, bookTitle, currentElement) { + for (let book of libraryArray) { + if (book.title === bookTitle) { + book.toggleStatus(); + currentElement.innerText = book.status ? "Read" : "Unread"; + currentElement.classList.remove(`${book.status ? "btn-warning" : "btn-success"}`); + currentElement.classList.add(`${book.status ? "btn-success" : "btn-warning"}`); + } + } +} + +// saving library to localStorage +function saveLibraryToLocalStorage(arrayName, array) { + localStorage.setItem(arrayName, JSON.stringify(array)); +} diff --git a/Project Library with Classes/library-icon.png b/Project Library with Classes/library-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..7a4798d53acc2fde93691de7890671d21372fbcf GIT binary patch literal 23448 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]EZe3 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 MsjQ_0S2Pd)FOG;Bng9R* literal 0 HcmV?d00001 diff --git a/Project Library with Classes/styles.css b/Project Library with Classes/styles.css new file mode 100644 index 0000000..5a17545 --- /dev/null +++ b/Project Library with Classes/styles.css @@ -0,0 +1,6 @@ +.hide { + display: none!important; + /* visibility: hidden!important; */ +} + + From 33d85c6eed94c854a5098d66ec78c3777e95e3f2 Mon Sep 17 00:00:00 2001 From: Gogi Date: Sun, 9 May 2021 15:27:13 +0300 Subject: [PATCH 2/2] switched Object Constructor for Class Constructor --- Project Library with Classes/index.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/Project Library with Classes/index.js b/Project Library with Classes/index.js index ef14729..d730003 100644 --- a/Project Library with Classes/index.js +++ b/Project Library with Classes/index.js @@ -10,22 +10,27 @@ const btnNewBook = document.querySelector("#btn-new-book"); const btnAddBook = document.querySelector("#btn-add-book"); const tableBody = document.querySelector("#table-library > tbody"); -// Book Object constructor -function Book(title, author, pages, status) { - this.title = title; - this.author = author; - this.pages = pages; - this.status = status; - this.toggleStatus = function () { +// Book Class constructor +class Book { + constructor(title, author, pages, status) { + this.title = title; + this.author = author; + this.pages = pages; + this.status = status; + } + + toggleStatus = function () { this.status = !this.status; }; - this.info = function () { - if (!status) { + + info = function () { + if (!this.status) { 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`; } }; + } // adding new book to the Library array