mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-06-28 21:05:36 -04:00
feat: logic completed.
This commit is contained in:
parent
104849154f
commit
72997086cc
3 changed files with 84 additions and 24 deletions
|
@ -23,8 +23,12 @@ function Book(title, author, read) {
|
|||
};
|
||||
}
|
||||
|
||||
Book.prototype.toggleBookReadStatus = function(){
|
||||
this.read = !this.read;
|
||||
}
|
||||
|
||||
function addBookToLibrary(book) {
|
||||
let newBook = new Book(book.title, book.author, book.pages, book.read);
|
||||
let newBook = new Book(book.title, book.author, book.read);
|
||||
myLibrary.push(newBook);
|
||||
}
|
||||
|
||||
|
@ -35,25 +39,57 @@ function displayBooks(books) {
|
|||
books.forEach((element, i) => {
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('card');
|
||||
card.classList.add(`data-card${i}`)
|
||||
card.setAttribute("data-card", i);
|
||||
|
||||
const title = document.createElement('p');
|
||||
title.classList.add('card-title');
|
||||
const author = document.createElement('p');
|
||||
author.classList.add('card-author');
|
||||
const readBtn = document.createElement('button');
|
||||
readBtn.classList.add('btn','read-btn');
|
||||
readBtn.textContent = element.read ? "read" : "not read";
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.classList.add('btn', 'delete-btn')
|
||||
deleteBtn.textContent = 'delete book';
|
||||
|
||||
title.textContent = element.title;
|
||||
|
||||
title.textContent = `"${element.title}"`;
|
||||
author.textContent = element.author;
|
||||
|
||||
card.appendChild(title);
|
||||
card.appendChild(author)
|
||||
card.appendChild(author);
|
||||
card.appendChild(readBtn);
|
||||
card.appendChild(deleteBtn);
|
||||
booksDiv.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
booksDiv.addEventListener('click', event => {
|
||||
let target = event.target.className;
|
||||
if (target.includes('read-btn')){
|
||||
let cardIndex = event.target.parentElement.dataset.card;
|
||||
myLibrary[cardIndex].toggleBookReadStatus();
|
||||
displayBooks(myLibrary);
|
||||
};
|
||||
});
|
||||
|
||||
booksDiv.addEventListener('click', event => {
|
||||
let target = event.target.className;
|
||||
if (target.includes('delete-btn')){
|
||||
let cardIndex = event.target.parentElement.dataset.card;
|
||||
myLibrary.splice(cardIndex, 1);
|
||||
displayBooks(myLibrary);
|
||||
};
|
||||
});
|
||||
|
||||
submitButton.addEventListener('click', event => {
|
||||
const author = document.querySelector('#author').value;
|
||||
const title = document.querySelector('#title').value;
|
||||
const newBook = new Book(title, author, false);
|
||||
const readBtn = document.querySelector('#read-button').value;
|
||||
const bookIsRead = readBtn === 'on' ? true : false;
|
||||
|
||||
// create book object
|
||||
const newBook = new Book(title, author, bookIsRead);
|
||||
|
||||
addBookToLibrary(newBook);
|
||||
displayBooks(myLibrary);
|
||||
|
@ -68,13 +104,6 @@ closeDialogButton.addEventListener('click', () => {
|
|||
dialog.close();
|
||||
});
|
||||
|
||||
// document.addEventListener('click', e => {
|
||||
// if (!e.target.closest("dialog")) {
|
||||
// dialog.showModal();
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
// default data
|
||||
myLibrary.push(defaultData)
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue