Skip to content

Commit c2e2211

Browse files
coderzamancoderzaman
committed
Project-02 Complete with OOP
1 parent 0273c39 commit c2e2211

File tree

3 files changed

+237
-0
lines changed

3 files changed

+237
-0
lines changed

‎20. Project Book List/img/image.png

357 KB
Loading

‎20. Project Book List/index.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Java Script Basics</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.sucess, .error{
16+
color: white;
17+
padding: 5px;
18+
margin: 5px 0px 15px 0px;
19+
}
20+
21+
.sucess{
22+
background: green;
23+
}
24+
25+
.error{
26+
background: red;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div class="container">
33+
<div class="row">
34+
<col-8 class="auto text-center mt-4">
35+
<h2 class="fs-2 text-center">Your Collected Book</h2>
36+
<p>Your Library, Your Journey – Discover, Organize, and Cherish Every Read!</p>
37+
</col-6>
38+
</div>
39+
<div class="row">
40+
<div class="col-8 alertMessage" style="margin: auto;">
41+
<form>
42+
<div class="mb-3">
43+
<input type="text" class="form-control" id="bookTitle" placeholder="Enter Book Title">
44+
</div>
45+
<div class="mb-3">
46+
<input type="text" class="form-control" id="authorName" placeholder="Enter Name of Book Author">
47+
</div>
48+
<div class="mb-3">
49+
<input type="text" class="form-control" id="Isbn" placeholder="Enter ISBN of Book">
50+
</div>
51+
52+
<button type="submit" class="btn btn-primary bg-dark" id="addBookBtn">Add Book</button>
53+
</form>
54+
</div>
55+
</div>
56+
57+
<div class="row mt-5">
58+
<div class="col-8" style="margin: auto;">
59+
<h3 class="fs-4 text-bg-dark p-2 mb-0">Your Books</h3>
60+
</div>
61+
</div>
62+
63+
<div class="row">
64+
<div class="col-8" style="margin: auto;">
65+
<table class="table">
66+
<thead>
67+
<tr>
68+
<th scope="col">Title</th>
69+
<th scope="col">Author</th>
70+
<th scope="col">Isbn</th>
71+
<th scope="col">Action</th>
72+
</tr>
73+
</thead>
74+
<tbody id="book-list">
75+
76+
</tbody>
77+
</table>
78+
</div>
79+
</div>
80+
81+
82+
83+
</div>
84+
85+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
86+
<script src="js/script.js"></script>
87+
<p></p>
88+
</body>
89+
90+
</html>
91+

‎20. Project Book List/js/script.js

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
class Book {
2+
constructor(name, author, isbn) {
3+
this.name = name;
4+
this.author = author;
5+
this.isbn = isbn;
6+
}
7+
}
8+
class UI {
9+
constructor() { }
10+
11+
static addToBookList(book) {
12+
let bookList = document.querySelector('#book-list');
13+
let tableRow = document.createElement('tr');
14+
tableRow.innerHTML = `
15+
<td>${book.name}</td>
16+
<td>${book.author}</td>
17+
<td>${book.isbn}</td>
18+
<td><a href="#">Delete</a></td>
19+
`
20+
bookList.appendChild(tableRow);
21+
}
22+
23+
static showAlert(message, className) {
24+
let div = document.createElement('div');
25+
div.classList = className;
26+
div.appendChild(document.createTextNode(message));
27+
let parenElement = document.querySelector('.alertMessage');
28+
parenElement.insertBefore(div, parenElement.firstChild);
29+
30+
setTimeout(() => {
31+
document.querySelector(`.${className}`).remove();
32+
}, 1000)
33+
}
34+
35+
static clearFiled() {
36+
document.querySelector('#bookTitle').value = '';
37+
document.querySelector('#authorName').value = '';
38+
document.querySelector('#Isbn').value = '';
39+
}
40+
41+
42+
static deleteBook(e) {
43+
if (confirm('Are you sure you want to delete')) {
44+
if (e.target.hasAttribute('href')) {
45+
e.target.parentElement.parentElement.remove();
46+
let deleBookIsbn = e.target.parentElement.previousElementSibling.textContent.trim();
47+
Storage.removeBookFromLs(deleBookIsbn);
48+
UI.showAlert("Sucessfully Delted", "sucess");
49+
50+
}
51+
}
52+
}
53+
54+
55+
}
56+
57+
class Storage {
58+
constructor() { }
59+
60+
static addBook(book) {
61+
let books;
62+
if (localStorage.getItem('books') === null) {
63+
books = [];
64+
} else {
65+
books = JSON.parse(localStorage.getItem('books'));
66+
}
67+
books.push(book);
68+
localStorage.setItem('books', JSON.stringify(books));
69+
}
70+
71+
static getBookList() {
72+
let books;
73+
if (localStorage.getItem('books') === null) {
74+
books = [];
75+
} else {
76+
books = JSON.parse(localStorage.getItem('books'));
77+
}
78+
79+
books.forEach(element => {
80+
UI.addToBookList(element);
81+
});
82+
}
83+
84+
static removeBookFromLs(removeBook) {
85+
let books = JSON.parse(localStorage.getItem('books'));
86+
books.forEach((item, index) => {
87+
if (item.isbn == removeBook) {
88+
books.splice(index, 1);
89+
}
90+
})
91+
92+
localStorage.setItem('books', JSON.stringify(books));
93+
94+
}
95+
}
96+
97+
function addNewBook(e) {
98+
e.preventDefault();
99+
let name = document.querySelector('#bookTitle').value;
100+
let author = document.querySelector('#authorName').value;
101+
let isbn = document.querySelector('#Isbn').value;
102+
let ui = new UI();
103+
104+
105+
let books;
106+
let ifBookExist;
107+
108+
109+
if (name === '' || isbn === '' || isbn === '') {
110+
UI.showAlert("All Filled Required", "error");
111+
} else {
112+
falg = true;
113+
if (localStorage.getItem('books') != null) {
114+
bSearch = JSON.parse(localStorage.getItem('books'));
115+
bSearch.forEach(item => {
116+
if (item.isbn == isbn) {
117+
console.log(item.isbn);
118+
falg = false;
119+
}
120+
})
121+
}
122+
123+
if (falg) {
124+
let book = new Book(name, author, isbn);
125+
UI.addToBookList(book);
126+
UI.clearFiled();
127+
UI.showAlert("Sucessfully Added", "sucess");
128+
129+
130+
Storage.addBook(book);
131+
} else {
132+
UI.showAlert("Book Already Added", "error");
133+
}
134+
135+
}
136+
137+
}
138+
139+
140+
141+
let addBtn = document.querySelector('#addBookBtn');
142+
addBtn.addEventListener('click', addNewBook);
143+
document.addEventListener('DOMContentLoaded', Storage.getBookList);
144+
145+
let delteBtn = document.querySelector('#book-list');
146+
delteBtn.addEventListener('click', UI.deleteBook);

0 commit comments

Comments
 (0)