Sheffield| 26-ITP-Jan| Mona- Eltantawy | Sprint 2 | Book library #472
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,80 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <title>Book Library</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <!-- Bootstrap --> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | ||
|
|
||
| <!-- Optional JS (needed for collapse button) --> | ||
| <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="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="jumbotron text-center"> | ||
| <h1>Library</h1> | ||
| <p>Add books to your virtual library</p> | ||
| </div> | ||
|
|
||
| <!-- Toggle form --> | ||
| <div class="text-center mb-3"> | ||
| <button data-toggle="collapse" data-target="#demo" class="btn btn-info"> | ||
| Add new book | ||
| </button> | ||
| </div> | ||
|
|
||
| <!-- ✅ FORM added --> | ||
| <div id="demo" class="collapse"> | ||
| <form id="bookForm" class="form-group"> | ||
|
|
||
| <label for="title">Title:</label> | ||
| <input type="text" class="form-control" id="title" required minlength="2" maxlength="100"> | ||
|
|
||
| <label for="author">Author:</label> | ||
| <input type="text" class="form-control" id="author" required minlength="2" maxlength="100"> | ||
|
|
||
| <label for="pages">Pages:</label> | ||
| <input type="number" class="form-control" id="pages" required min="1" max="9999"> | ||
|
|
||
| <div class="form-check mt-2 mb-3"> | ||
| <input type="checkbox" class="form-check-input" id="check"> | ||
| <label class="form-check-label" for="check">Read</label> | ||
| </div> | ||
|
|
||
| <!-- ✅ FIXED BUTTON --> | ||
| <button type="submit" class="btn btn-primary"> | ||
| Add Book | ||
| </button> | ||
|
|
||
| </form> | ||
| </div> | ||
|
|
||
| <!-- Message --> | ||
| <div id="message" class="text-center mt-2 text-success"></div> | ||
|
|
||
| <!-- Table --> | ||
| <table class="table mt-3" id="display"> | ||
| <thead class="thead-dark"> | ||
| <tr> | ||
| <th>Title</th> | ||
| <th>Author</th> | ||
| <th>Number of Pages</th> | ||
| <th>Read</th> | ||
| <th>Delete</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
|
|
||
| <!-- ✅ ES module (no inline JS anywhere) --> | ||
| <script src="script.js" type="module"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,128 @@ | ||
| // ✅ Data | ||
| const myLibrary = []; | ||
|
|
||
| // ✅ DOM elements (clear naming) | ||
| const formEl = document.getElementById("bookForm"); | ||
| const titleInputEl = document.getElementById("title"); | ||
| const authorInputEl = document.getElementById("author"); | ||
| const pagesInputEl = document.getElementById("pages"); | ||
| const checkInputEl = document.getElementById("check"); | ||
| const tableBodyEl = document.querySelector("#display tbody"); | ||
| const messageEl = document.getElementById("message"); | ||
|
|
||
| // ✅ Init | ||
| window.addEventListener("load", () => { | ||
| populateStorage(); // only called once | ||
| render(); | ||
| }); | ||
|
|
||
| // ✅ Populate initial data | ||
| function populateStorage() { | ||
| 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) | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // ✅ Handle form submit (NO inline onclick) | ||
| formEl.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
|
Contributor
There was a problem hiding this comment. What is the purpose of this statement (line 31)?
Author
There was a problem hiding this comment. this line helped sorting the issue of missing the data submitted to the form with every page reload that was one of the issues I struggled with
Contributor
There was a problem hiding this comment. That's not what |
||
|
|
||
| // 🔹 Preprocessing | ||
| const title = titleInputEl.value.trim(); | ||
| const author = authorInputEl.value.trim(); | ||
| const pages = Number(pagesInputEl.value); | ||
| const isRead = checkInputEl.checked; | ||
|
|
||
| // 🔹 Validation | ||
| if (!title || !author) { | ||
| showMessage("Title and Author cannot be empty."); | ||
| return; | ||
| } | ||
|
|
||
| if (Number.isNaN(pages) || pages < 1 || pages > 9999) { | ||
| showMessage("Pages must be between 1 and 9999."); | ||
| return; | ||
| } | ||
|
|
||
| // 🔹 Add book | ||
| const book = new Book(title, author, pages, isRead); | ||
| myLibrary.push(book); | ||
|
|
||
| // 🔹 Reset form | ||
| formEl.reset(); | ||
|
|
||
| render(); | ||
| }); | ||
|
|
||
| // ✅ Constructor | ||
| function Book(title, author, pages, isRead) { | ||
| this.title = title; | ||
| this.author = author; | ||
| this.pages = pages; // number (correct type) | ||
| this.isRead = isRead; | ||
| } | ||
|
|
||
| // ✅ Render table | ||
| function render() { | ||
| // 🔹 Efficient clear | ||
| tableBodyEl.innerHTML = ""; | ||
|
|
||
| myLibrary.forEach((book, index) => { | ||
| const row = document.createElement("tr"); | ||
|
|
||
| const titleCell = document.createElement("td"); | ||
| const authorCell = document.createElement("td"); | ||
| const pagesCell = document.createElement("td"); | ||
| const readCell = document.createElement("td"); | ||
| const deleteCell = document.createElement("td"); | ||
|
Contributor
There was a problem hiding this comment. Why use this approach instead of the original approach to create table cell? const titleCell = row.insertCell(0);
const authorCell = row.insertCell(1);
const pagesCell = row.insertCell(2);
const wasReadCell = row.insertCell(3);
const deleteCell = row.insertCell(4);
Author
There was a problem hiding this comment. actually I used the original one and fixed it in my first edit to the code and when I passed it to an AI tool for review it fixed it to this one and I considered it when no issues came out in validation. I understand that there are differences between the two approaches but I considered the validation impact.
Contributor
There was a problem hiding this comment. In you opinion, which approach is better, and why?
Author
There was a problem hiding this comment. for me the document .create element the original one and this because it's the one I'm confident to use right now actually but I'm afraid to change it to affect the validation again |
||
|
|
||
| // 🔹 Safe text assignment | ||
| titleCell.textContent = book.title; | ||
| authorCell.textContent = book.author; | ||
| pagesCell.textContent = book.pages; | ||
|
|
||
| // 🔹 Toggle read button (simplified) | ||
| const toggleBtn = document.createElement("button"); | ||
| toggleBtn.className = "btn btn-success"; | ||
| toggleBtn.textContent = book.isRead ? "Yes" : "No"; | ||
|
|
||
| toggleBtn.addEventListener("click", () => { | ||
| book.isRead = !book.isRead; | ||
| render(); | ||
| }); | ||
|
|
||
| readCell.appendChild(toggleBtn); | ||
|
|
||
| // 🔹 Delete button | ||
| const deleteBtn = document.createElement("button"); | ||
| deleteBtn.className = "btn btn-warning"; | ||
| deleteBtn.textContent = "Delete"; | ||
|
|
||
| deleteBtn.addEventListener("click", () => { | ||
| // delete first | ||
| const deletedTitle = book.title; | ||
| myLibrary.splice(index, 1); | ||
|
|
||
| // then show message (non-blocking) | ||
| showMessage(`Deleted: "${deletedTitle}"`); | ||
| render(); | ||
| }); | ||
|
|
||
| deleteCell.appendChild(deleteBtn); | ||
|
|
||
| row.append(titleCell, authorCell, pagesCell, readCell, deleteCell); | ||
| tableBodyEl.appendChild(row); | ||
| }); | ||
| } | ||
|
|
||
| // ✅ Non-blocking message (instead of alert) | ||
| function showMessage(text) { | ||
| messageEl.textContent = text; | ||
|
|
||
| setTimeout(() => { | ||
| messageEl.textContent = ""; | ||
| }, 2000); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does class
mt-2andmb-3do?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
they are mainly styling and doesn't affect the javascript but it makes the style for the checkbox looks clear. as the mt-2 add space above the dive and prevents it from sticking too close to the page input.
Also mt-3 add space blow that section to separate it from the submit button.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you look it up ?