-
-
Notifications
You must be signed in to change notification settings - Fork 274
London | 26-ITP-May | Russom Gebremeskel | Sprint 2 | Book Library #562
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
c36e8ee
8bd864d
b558fcc
4ae7b33
abbcf09
828f30b
21524fb
5320ca4
76b7b02
e0f84c2
379c91a
eaedbd1
c98ec55
5bab8f7
ce972dd
062e71f
688c8ad
2bf15a0
fe61651
0161843
5632e7c
ab2fe0e
20a09c3
5de411e
39fe2e1
bff1d88
d2087e5
d22da54
d7a80c1
aee7d44
eaf006d
65c5495
6e5b655
dd6c87d
b878045
edef4b7
12ae932
3b68617
db5e654
cec73a4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title> </title> | ||
| <meta | ||
| charset="utf-8" | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| /> | ||
| <title>Book Library</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <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" /> | ||
| href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| <script src="script.js" type="module"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
@@ -31,45 +28,47 @@ <h1>Library</h1> | |
| <div class="form-group"> | ||
| <label for="title">Title:</label> | ||
| <input | ||
| type="title" | ||
| type="text" | ||
| class="form-control" | ||
| id="title" | ||
| name="title" | ||
| required | ||
| /> | ||
| > | ||
| <label for="author">Author: </label> | ||
| <input | ||
| type="author" | ||
| type="text" | ||
| class="form-control" | ||
| id="author" | ||
| name="author" | ||
| required | ||
| /> | ||
| > | ||
| <label for="pages">Pages:</label> | ||
| <input | ||
| type="number" | ||
| class="form-control" | ||
| id="pages" | ||
| name="pages" | ||
| min="1" | ||
| required | ||
| /> | ||
| > | ||
| <label class="form-check-label"> | ||
| <input | ||
| type="checkbox" | ||
| class="form-check-input" | ||
| id="check" | ||
| value="" | ||
| />Read | ||
| > | ||
|
Comment on lines
54
to
+59
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This checkbox is not showing. The issue is related to Bootstrap 4.4.1. Could you use AI to find a way to fix the issue? Mentioning "Bootstrap 4.4.1" might help. |
||
| Read | ||
| </label> | ||
| <input | ||
| type="submit" | ||
| value="Submit" | ||
| <button | ||
| type="button" | ||
| class="btn btn-primary" | ||
| onclick="submit();" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| id="add-book" | ||
| > | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div id="message"></div> | ||
| <table class="table" id="display"> | ||
| <thead class="thead-dark"> | ||
| <tr> | ||
|
|
@@ -80,17 +79,7 @@ <h1>Library</h1> | |
| <th></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td></td> | ||
| <td></td> | ||
| <td></td> | ||
| <td></td> | ||
| <td></td> | ||
| </tr> | ||
| </tbody> | ||
| <tbody id="book-list"></tbody> | ||
| </table> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,92 @@ | ||
| let myLibrary = []; | ||
| const myLibrary = []; | ||
|
|
||
| window.addEventListener("load", function (e) { | ||
| populateStorage(); | ||
| render(); | ||
| }); | ||
|
|
||
| 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 | ||
| function Book(title, author, pages, wasRead) { | ||
| this.title = title; | ||
| this.author = author; | ||
| this.pages = pages; | ||
| this.wasRead = wasRead; | ||
| } | ||
|
|
||
| const titleInput = document.getElementById("title"); | ||
| const authorInput = document.getElementById("author"); | ||
| const pagesInput = document.getElementById("pages"); | ||
| const readInput = document.getElementById("check"); | ||
| const message = document.getElementById("message"); | ||
| const bookList = document.getElementById("book-list"); | ||
| const addBookButton = document.getElementById("add-book"); | ||
|
|
||
| function addDefaultBooks() { | ||
| if (myLibrary.length === 0) { | ||
| myLibrary.push(new Book("Robinson Crusoe", "Daniel Defoe", 252, true)); | ||
| myLibrary.push( | ||
| 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"); | ||
|
|
||
| //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 == "" | ||
| ) { | ||
| function addBook() { | ||
| const title = titleInput.value.trim(); | ||
| const author = authorInput.value.trim(); | ||
| const pages = Number(pagesInput.value); | ||
|
|
||
| if (!title || !author || !pagesInput.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(); | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| function Book(title, author, pages, check) { | ||
| this.title = title; | ||
| this.author = author; | ||
| this.pages = pages; | ||
| this.check = check; | ||
| if (isNaN(pages) || pages <= 0) { | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could consider check if |
||
| alert("Pages must be a valid number!"); | ||
| return; | ||
| } | ||
| myLibrary.push(new Book(title, author, pages, readInput.checked)); | ||
| 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; | ||
| bookList.innerHTML = ""; | ||
|
|
||
| for (let i = 0; i < myLibrary.length; i++) { | ||
| const row = bookList.insertRow(); | ||
|
|
||
| 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); | ||
|
|
||
| titleCell.textContent = myLibrary[i].title; | ||
| authorCell.textContent = myLibrary[i].author; | ||
| pagesCell.textContent = 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 readButton = document.createElement("button"); | ||
|
|
||
| readButton.className = "btn btn-success"; | ||
| readButton.textContent = myLibrary[i].wasRead ? "Yes" : "No"; | ||
|
|
||
| wasReadCell.appendChild(readButton); | ||
|
|
||
| readButton.addEventListener("click", function () { | ||
| myLibrary[i].wasRead = !myLibrary[i].wasRead; | ||
| 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}`); | ||
| const deleteButton = document.createElement("button"); | ||
|
|
||
| deleteButton.className = "btn btn-warning"; | ||
| deleteButton.textContent = "Delete"; | ||
|
|
||
| deleteCell.appendChild(deleteButton); | ||
|
|
||
| deleteButton.addEventListener("click", function () { | ||
| const deleteTitle = myLibrary[i].title; | ||
|
|
||
| myLibrary.splice(i, 1); | ||
| render(); | ||
| message.textContent = `You've deleted title: ${deleteTitle}`; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| addDefaultBooks(); | ||
| render(); | ||
| addBookButton.addEventListener("click", addBook); | ||
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.
The browser checks the input elements against the specified constraints only when a user submits a form.
Without
<form>, the browser won't check the input against the constraints such asrequiredandmin="1".