Skip to content
Open
76 changes: 29 additions & 47 deletions debugging/book-library/index.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title> </title>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Book Library</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" href="style.css" />
</head>

<body>
Expand All @@ -23,49 +23,38 @@ <h1>Library</h1>
<p>Add books to your virtual library</p>
</div>

<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
<button class="btn btn-info" data-toggle="collapse" data-target="#demo">
Add new book
</button>

<div id="demo" class="collapse">
<div class="form-group">
<label for="title">Title:</label>
<input
type="title"
class="form-control"
id="title"
name="title"
required
/>
<label for="author">Author: </label>
<input
type="author"
class="form-control"
id="author"
name="author"
required
/>
<label for="pages">Pages:</label>
<label for="title">Title</label>
<input type="text" id="title" class="form-control" required />

<label for="author">Author</label>
<input type="text" id="author" class="form-control" required />

<label for="pages">Pages</label>
<input
type="number"
class="form-control"
id="pages"
name="pages"
class="form-control"
min="1"
step="1"
required
/>

<label class="form-check-label">
<input
type="checkbox"
class="form-check-input"
id="check"
value=""
/>Read
<input type="checkbox" id="check" class="form-check-input" />
Read
</label>

<input
type="submit"
value="Submit"
class="btn btn-primary"
onclick="submit();"
id="submitButton"
/>
</div>
</div>
Expand All @@ -75,22 +64,15 @@ <h1>Library</h1>
<tr>
<th>Title</th>
<th>Author</th>
<th>Number of Pages</th>
<th>Pages</th>
<th>Read</th>
<th></th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

<tbody></tbody>
</table>

<script src="script.js"></script>
<script src="script.js" type="module"></script>
</body>
</html>
164 changes: 84 additions & 80 deletions debugging/book-library/script.js
Original file line number Diff line number Diff line change
@@ -1,103 +1,107 @@
let myLibrary = [];
const myLibrary = [];

window.addEventListener("load", function (e) {
window.addEventListener("load", () => {
populateStorage();
render();
});
function Book(title, author, pages, check) {
this.title = title;
this.author = author;
this.pages = pages;
this.check = check;
}

function populateStorage() {
if (myLibrary.length == 0) {
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
let book2 = new Book(
"The Old Man and the Sea",
"Ernest Hemingway",
"127",
true
if (myLibrary.length === 0) {
myLibrary.push(
new Book("Robinson Crusoe", "Daniel Defoe", 252, true),
new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true)
);
myLibrary.push(book1);
myLibrary.push(book2);
render();
}
}

const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
const titleInput = document.getElementById("title");
const authorInput = document.getElementById("author");
const pagesInput = document.getElementById("pages");
const checkInput = document.getElementById("check");

const submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", submit);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better practice to keep all the code that needs to be executed once on page load in the one place.


//check the right input from forms and if its ok -> add the new book (object in array)
//via Book function and start render function
function submit() {
if (
title.value == null ||
title.value == "" ||
pages.value == null ||
pages.value == ""
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
render();
const title = titleInput.value.trim();
const author = authorInput.value.trim();
const pages = Number(pagesInput.value);

if (title === "" || author === "" || !Number.isInteger(pages) || pages < 1) {
alert("Please enter valid book details.");
return;
}
}

function Book(title, author, pages, check) {
this.title = title;
this.author = author;
this.pages = pages;
this.check = check;
myLibrary.push(new Book(title, author, pages, checkInput.checked));

titleInput.value = "";
authorInput.value = "";
pagesInput.value = "";
checkInput.checked = false;

render();
}

function render() {
let table = document.getElementById("display");
let rowsNumber = table.rows.length;
//delete old table
for (let n = rowsNumber - 1; n > 0; n-- {
table.deleteRow(n);
}
//insert updated row and cells
let length = myLibrary.length;
for (let i = 0; i < length; i++) {
let row = table.insertRow(1);
let titleCell = row.insertCell(0);
let authorCell = row.insertCell(1);
let pagesCell = row.insertCell(2);
let wasReadCell = row.insertCell(3);
let deleteCell = row.insertCell(4);
titleCell.innerHTML = myLibrary[i].title;
authorCell.innerHTML = myLibrary[i].author;
pagesCell.innerHTML = myLibrary[i].pages;

//add and wait for action for read/unread button
let changeBut = document.createElement("button");
changeBut.id = i;
changeBut.className = "btn btn-success";
wasReadCell.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
readStatus = "Yes";
} else {
readStatus = "No";
}
changeBut.innerText = readStatus;

changeBut.addEventListener("click", function () {
myLibrary[i].check = !myLibrary[i].check;
const tbody = document.querySelector("#display tbody");

tbody.textContent = "";

myLibrary.forEach((book, index) => {
const row = document.createElement("tr");

const titleCell = document.createElement("td");
titleCell.textContent = book.title;

const authorCell = document.createElement("td");
authorCell.textContent = book.author;

const pagesCell = document.createElement("td");
pagesCell.textContent = book.pages;

const readCell = document.createElement("td");

const readButton = document.createElement("button");
readButton.className = "btn btn-success";
readButton.textContent = book.check ? "Yes" : "No";

readButton.addEventListener("click", () => {
book.check = !book.check;
render();
});

//add delete button to every row and render again
let delButton = document.createElement("button");
delBut.id = i + 5;
deleteCell.appendChild(delBut);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
delBut.addEventListener("clicks", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
readCell.appendChild(readButton);

const deleteCell = document.createElement("td");

const deleteButton = document.createElement("button");
deleteButton.className = "btn btn-warning";
deleteButton.textContent = "Delete";

deleteButton.addEventListener("click", () => {
const deletedTitle = book.title;

myLibrary.splice(index, 1);

render();

// Allows the table to update before showing alert
setTimeout(() => {
alert(`You've deleted "${deletedTitle}".`);
}, 0);
});
}

deleteCell.appendChild(deleteButton);

row.append(titleCell, authorCell, pagesCell, readCell, deleteCell);

tbody.appendChild(row);
});
}
4 changes: 1 addition & 3 deletions debugging/book-library/style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.form-group {
width: 400px;
height: 300px;
align-self: left;
padding-left: 20px;
}

Expand All @@ -11,7 +9,7 @@

.form-check-label {
padding-left: 20px;
margin: 5px 0px 5px 0px;
margin: 5px 0;
}

button.btn-info {
Expand Down
Loading