Это были инструкции:
1) Добавьте кнопку на дисплей каждой книги, чтобы удалить книгу из библиотеки. Вам нужно будет каким-то образом связать ваши элементы DOM с реальными объектами книги. Одно простое решение - дать им атрибут данных, который соответствует индексу массива библиотеки.
2) Добавьте кнопку на дисплей каждой книги, чтобы изменить ее статус чтения. Чтобы облегчить это, вам нужно создать функцию, которая переключает статус чтения книги в вашем экземпляре прототипа Book.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
</style>
</head>
<body>
<div id="enter"> <!-- Add a modal when Add book button is clicked -->
<label for="bookInfo"> Enter book info </label></br>
<input type="text" id="inputTitle" placeholder="Title"></br>
<input type="text" id="inputAuthor" placeholder="Author"></br>
<input type="text" id="inputPages" placeholder="Pages"></br>
<select id="readingProgress">
<option disabled>--Select--</option>
<option >Read</option>
<option >In Progress</option>
<option >Not Read</option>
</select>
<div id=submit>
<button id="submit">Submit</button>
</div>
<table>
<thead>
<tr> <!--Try to make this hidden until after the first book is added, but remain viewed after first book-->
<th>Title</th>
<th>Author</th>
<th>Pages</th>
<th>Reading Status</th>
</tr>
<thead>
<tbody id="bookList">
</tbody>
</table>
<script>
let myLibrary = []
const submit = document.querySelector('#submit')
//const tableHeading = document.querySelector('th')
//const table = document.querySelector('table')
const list = document.querySelector("#bookList")
const bookTitle = document.querySelector('#inputTitle')
const bookAuthor = document.querySelector('#inputAuthor')
const bookPages = document.querySelector('#inputPages')
const readOptions = document.querySelector('select')
//Constructor to create book objects:
function Book(title, author, pages, read) {
this.title = title
this.author = author
this.pages = pages
this.read = read
}
//New book objects are stored in an array:
function addBookToLibrary(){
if(bookTitle.value && bookAuthor.value && bookPages.value && readOptions.value) {
myLibrary.push(new Book(bookTitle.value, bookAuthor.value, bookPages.value, readOptions.value))
} else {
alert("Please enter all information")
}
console.log(myLibrary)
}
//Display book:
function displayBooks(book){
const row = document.createElement('tr')
const createTitle = document.createElement('td')
const createAuthor = document.createElement('td')
const createPages = document.createElement('td')
const createStatus = document.createElement('td')
createTitle.innerHTML = book.title
createAuthor.innerHTML = book.author
createPages.innerHTML = book.pages
createStatus.innerHTML = book.read
//row.innerHTML = `<td>${book.author}<td><td>${book.pages}<td><td>${book.read}<td>`
//above code I formatting was weird, will try back using this code
row.appendChild(createTitle)
row.appendChild(createAuthor)
row.appendChild(createPages)
row.appendChild(createStatus)
list.appendChild(row)
createTitle.classList.add('deleteRow')
}
//Remove books:
list.addEventListener('click', function removeBook(e){
if(e.target.classList.contains('deleteRow')){
let eachIndex = e.target.parentElement.rowIndex-1
console.log(eachIndex)
e.target.parentElement.remove()
//displayBooks(myLibrary[myLibrary.length-1])
myLibrary.forEach((book, index) => {
if(index === eachIndex){
myLibrary.splice[eachIndex,1]
}
})
}
console.log(myLibrary)
})
//Event Listeners:
submit.addEventListener('click', (e) => {
addBookToLibrary()
displayBooks(myLibrary[myLibrary.length-1])
})
</script>
</body>
</html>