+
-
-
@@ -92,5 +87,8 @@ Library
+
+
+
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 75ce6c1d..7ef87587 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -16,15 +16,21 @@ function populateStorage() {
);
myLibrary.push(book1);
myLibrary.push(book2);
- render();
}
}
+const addBtn = document.getElementById("add-btn");
const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
+const bookForm = document.getElementById("book-form");
+//
+bookForm.addEventListener("submit", function (e) {
+ e.preventDefault(); // stop page reload
+ submit(); // call your function
+});
//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() {
@@ -37,9 +43,11 @@ function submit() {
alert("Please fill all fields!");
return false;
} else {
- let book = new Book(title.value, title.value, pages.value, check.checked);
- library.push(book);
+ let book3 = new Book(title.value, author.value, pages.value, check.checked);
+ myLibrary.push(book3);
render();
+ bookForm.reset();
+ document.getElementById("demo").classList.remove("show");
}
}
@@ -54,7 +62,7 @@ function render() {
let table = document.getElementById("display");
let rowsNumber = table.rows.length;
//delete old table
- for (let n = rowsNumber - 1; n > 0; n-- {
+ for (let n = rowsNumber - 1; n > 0; n--) {
table.deleteRow(n);
}
//insert updated row and cells
@@ -76,7 +84,7 @@ function render() {
changeBut.className = "btn btn-success";
wasReadCell.appendChild(changeBut);
let readStatus = "";
- if (myLibrary[i].check == false) {
+ if (myLibrary[i].check === true) {
readStatus = "Yes";
} else {
readStatus = "No";
@@ -89,12 +97,12 @@ function render() {
});
//add delete button to every row and render again
- let delButton = document.createElement("button");
+ let delBut = document.createElement("button");
delBut.id = i + 5;
deleteCell.appendChild(delBut);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
- delBut.addEventListener("clicks", function () {
+ delBut.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css
index 302950cb..42458775 100644
--- a/debugging/book-library/style.css
+++ b/debugging/book-library/style.css
@@ -1,19 +1,53 @@
+html {
+ scroll-behavior: smooth;
+}
+
+.header {
+ background: #2f2e57;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.header h1 {
+ color: white;
+ font-size: 50px;
+ padding: 20px;
+}
+.header p {
+ color: white;
+ font-size: 30px;
+ padding: 20px;
+}
+
.form-group {
+ background-color: #2f2e57;
+ color: whitesmoke;
width: 400px;
- height: 300px;
+ height: 350px;
align-self: left;
- padding-left: 20px;
+ padding: 20px;
+ margin: 20px auto;
+ border-radius: 10px;
+ gap: 10px;
}
.btn {
- display: block;
+ background-color: skyblue;
+ display: flex;
+ margin: 20px auto;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 20px;
+ border: none;
+ outline: none;
+}
+.btn:focus {
+ outline: none;
+ box-shadow: none;
}
.form-check-label {
padding-left: 20px;
margin: 5px 0px 5px 0px;
}
-
-button.btn-info {
- margin: 20px;
-}