project done

script.js

@@ -0,0 +1,109 @@
+const library = []
+
+function Book(name, pages, author, readed, index) {
+
+    this.name = name
+    this.pages = pages
+    this.author = author
+    this.readed = readed
+
+    this.index = index
+
+    this.deleteBook = function() {
+
+        const book = library.find(o => o.index === index)
+        const indexInLibrary = library.indexOf(book)
+
+        library.splice(indexInLibrary, 1)
+        applyLibraryToDOM()
+    }
+
+    this.alternateReadedValue = function() {
+
+        const book = library.find(o => o.index === index)
+        const indexInLibrary = library.indexOf(book)
+
+        if (library[indexInLibrary]) {
+   
+            library[indexInLibrary].readed = !library[indexInLibrary].readed 
+            
+            applyLibraryToDOM()
+        }
+    }
+}
+
+function addBookToLibrary(event) {
+
+    event.preventDefault()
+
+    const data = {
+        
+        name: document.getElementById('input-name').value.trim(),
+        pages: document.getElementById('input-pages').value.trim(),
+        author: document.getElementById('input-author').value.trim()
+    } 
+
+    library.push(new Book(data.name, data.pages, data.author, false, library.length))
+
+    applyLibraryToDOM()
+
+    document.getElementById('input-name').value = ''
+    document.getElementById('input-pages').value = ''
+    document.getElementById('input-author').value = ''
+}
+
+function applyLibraryToDOM() {
+
+    localStorage.setItem('lastLibrary', JSON.stringify(library))
+
+    const fragment = document.createDocumentFragment()
+
+    library.forEach(book => {
+        
+        const container = document.createElement('div')
+            container.className = 'book'
+
+        let title = document.createElement('h3')
+            title.innerText = book.name
+            container.appendChild(title)
+        
+        let pages = document.createElement('h5')
+            pages.innerText = `${book.pages} pages`
+            container.appendChild(pages)
+
+        let author = document.createElement('h4')
+            author.innerText = book.author
+            container.appendChild(author)
+
+        let deleteButton = document.createElement('button')
+            deleteButton.innerText = 'Delete book'
+            deleteButton.classList.add('delete')
+            deleteButton.onclick = function() {book.deleteBook()}
+            container.appendChild(deleteButton)
+        
+        let readedButton = document.createElement('button')
+
+            if (book.readed) {
+                readedButton.innerText = 'Readed'
+                readedButton.classList.add('readed')
+
+            } else {
+                readedButton.innerText = 'Not readed'
+                readedButton.classList.add('not-readed')
+            }
+
+            readedButton.onclick = function() {book.alternateReadedValue()}
+            container.appendChild(readedButton)
+        
+
+        fragment.appendChild(container)
+    });
+
+    const libraryDOM = document.getElementById('library')
+
+        libraryDOM.innerHTML = ''
+        libraryDOM.appendChild(fragment)
+}
+
+const form = document.getElementById('add-new-book-form')
+form.addEventListener('submit', () => addBookToLibrary(event))