MUHAMMAD SAMIULLAH
3 years ago
committed by
GitHub
parent
3a5b4b4076
commit
eef58a77b5
@ -0,0 +1,68 @@
|
||||
# Simple Library Management
|
||||
|
||||
A simple library management project that is easy to use and helps the learner to understand the basic concept of JS.
|
||||
|
||||
Visit Website: [Online Library](https://delightful-coast-00b51a700.1.azurestaticapps.net/)
|
||||
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167833386-ec9951a2-fe1f-4c9b-88c9-2b7fe1ef6009.png">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167833479-370a3485-2286-4eed-a7a8-57bb2c5411ed.png">
|
||||
</p>
|
||||
|
||||
## Functionalities :-
|
||||
Input book name, author and book type to add the book. If book name is missing it will shown you error. As I used LocalStorage if you refresh or close the tab your books will not disappear. You can clear book shelf just by clicking on **clear shelf**. You can also search book by book name, author and type.
|
||||
|
||||
## Adding
|
||||
|
||||
### Adding Book in Shelf:
|
||||
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167833690-b5ac19a3-b49b-424a-b258-bae2bcb9dcb9.png">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167833986-826f5ea1-f403-4cc8-9200-2718c15f208f.png">
|
||||
</p>
|
||||
|
||||
### Adding Book Without Entering Book Name:
|
||||
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167834120-d1dae43f-ab4c-46da-9f8f-fb688eed67b2.png">
|
||||
</p>
|
||||
|
||||
### Clearing Book Shelf:
|
||||
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/167834210-e4dfd335-d2fd-438b-904a-b1e3cb1625a2.png">
|
||||
</p>
|
||||
|
||||
## Searching
|
||||
|
||||
### Search Book by type:
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/173614799-51fe4d94-53e5-43a1-b6f7-e63298e9e76b.png">
|
||||
</p>
|
||||
|
||||
### Search Book by author:
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/173615250-765e14dc-9a81-4692-bd3e-c6b842cd6514.png">
|
||||
</p>
|
||||
|
||||
### Search Book by name:
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/52650290/173616186-f208a089-c13a-4ec1-b234-4a59e6ff7d75.png">
|
||||
</p>
|
||||
|
||||
|
||||
## Built with :-
|
||||
- HTML
|
||||
- CSS
|
||||
- Bootstrap
|
||||
- JavaScript
|
||||
|
||||
## How to use :-
|
||||
- Clone the repository
|
||||
- Go to the directory
|
||||
- Run index.html file
|
||||
- Enter book name, author and type of book
|
||||
- Press add book
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
# Simple Library Management
|
||||
|
||||
## How to use :-
|
||||
- Clone the repository
|
||||
- Go to the directory
|
||||
- Run index.html file
|
||||
- Enter book name, author and type of book
|
||||
- Press add book
|
||||
@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Online Library</title>
|
||||
|
||||
<!--Bootstrap CSS-->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
|
||||
<!--FontAwesome-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<style>
|
||||
#clear {
|
||||
display: none;
|
||||
}
|
||||
#libraryForm{
|
||||
border: .5px dashed black;
|
||||
padding: 20px;
|
||||
}
|
||||
#table{
|
||||
border: .5px dashed black;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--NavBar-->
|
||||
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #7952b3; opacity: .8;">
|
||||
<a class="navbar-brand mb-1" href="#" style="font-size: 24px;">Online Library</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
|
||||
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" id="searchText" type="search" style="border-radius: 45px;" placeholder="Search">
|
||||
<button class="btn btn-dark my-2 my-sm-0 px-3" type="submit" style="border-radius: 45px;">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--Message shown on successful adding of book-->
|
||||
<div class="fixed-top" id="message"></div>
|
||||
|
||||
|
||||
<!--Adding books-->
|
||||
<div class="container pt-4 mt-5 my-3">
|
||||
<h1 class="text-center display-4 font-weight-bold">Welcome To Online Library</h1>
|
||||
<hr>
|
||||
<form id="libraryForm">
|
||||
<div class="form-group row">
|
||||
<label for="bookName" class="col-sm-2 col-form-label">Name</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="bookName" placeholder="Book Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="Author" class="col-sm-2 col-form-label">Author</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="author" placeholder="Author">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<div class="row">
|
||||
<legend class="col-form-label col-sm-2 pt-0">Type</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="type" id="fiction" value="fiction">
|
||||
<label class="form-check-label" for="fiction">
|
||||
Fiction
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="type" id="programming"
|
||||
value="programming">
|
||||
<label class="form-check-label" for="programming">
|
||||
Computer Programming
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="type" id="science" value="science">
|
||||
<label class="form-check-label" for="science">
|
||||
Science
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="type" id="other" value="other">
|
||||
<label class="form-check-label" for="other">
|
||||
Other
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<div class="col-lg-12 col-sm-10">
|
||||
<button type="submit" class="btn text-light btn-large btn-block" style="background-color: #7f5bb4f3;">Add Book</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<!--Display of books-->
|
||||
<div id="table mt-0">
|
||||
|
||||
<h1>Your Book Shelf</h1>
|
||||
<hr>
|
||||
|
||||
<div id="table" class="mb-5">
|
||||
<h5 class="float-right" id="books"></h5>
|
||||
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead class="text-center text-light" style="background-color: #7952b3;">
|
||||
<tr>
|
||||
<th scope="col">No.</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Author</th>
|
||||
<th scope="col">Type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-center" id="tableBody"> </tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<!--Display Msg when table is empty-->
|
||||
<h5 id="emptyMsg" class="mb-5"></h5>
|
||||
</div>
|
||||
|
||||
<button type="button" id="clear" class="btn px-3 mb-2 btn-danger float-right">Clear Shelf</button>
|
||||
</div>
|
||||
|
||||
<!--JS file-->
|
||||
<script src="script.js"></script>
|
||||
|
||||
<!--Required Bootrap Jquery first,Popper JS , Bootstrap JS-->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
||||
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
||||
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,262 @@
|
||||
displayBooks(); //As the browser open it show all the stored books
|
||||
|
||||
let libraryForm = document.getElementById('libraryForm');
|
||||
|
||||
// Adding Books
|
||||
libraryForm.addEventListener('submit', (e) => {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
let name = document.getElementById("bookName").value;
|
||||
let author = document.getElementById("author").value;
|
||||
|
||||
let fiction = document.getElementById('fiction');
|
||||
let programming = document.getElementById('programming');
|
||||
let science = document.getElementById('science');
|
||||
let others = document.getElementById('other');
|
||||
|
||||
let type;
|
||||
|
||||
|
||||
if (fiction.checked) {
|
||||
type = fiction.value;
|
||||
programming.unchecked;
|
||||
science.unchecked;
|
||||
}
|
||||
else if (programming.checked) {
|
||||
type = programming.value;
|
||||
science.unchecked;
|
||||
fiction.unchecked;
|
||||
}
|
||||
else if (science.checked) {
|
||||
type = science.value;
|
||||
fiction.unchecked;
|
||||
programming.unchecked;
|
||||
}
|
||||
else if (others.checked) {
|
||||
type = others.value;
|
||||
fiction.unchecked;
|
||||
programming.unchecked;
|
||||
science.unchecked;
|
||||
}
|
||||
|
||||
|
||||
let shelf = localStorage.getItem('shelfOfBooks');
|
||||
let objOfBook; //object which stores books
|
||||
|
||||
if (shelf == null) {
|
||||
objOfBook = [];
|
||||
}
|
||||
else { //We might have multiple books
|
||||
objOfBook = JSON.parse(shelf); //By using JSON we convert it into Object
|
||||
}
|
||||
|
||||
if (name == "") {
|
||||
errorMessage();
|
||||
}
|
||||
else {
|
||||
let myObj = {
|
||||
book: name,
|
||||
bookauthor: author,
|
||||
bookType: type
|
||||
}
|
||||
objOfBook.push(myObj);
|
||||
addMessage();
|
||||
}
|
||||
|
||||
localStorage.setItem('shelfOfBooks', JSON.stringify(objOfBook));
|
||||
|
||||
name = "";
|
||||
author = "";
|
||||
type.value = "";
|
||||
|
||||
UpdateBook();
|
||||
displayBooks();
|
||||
})
|
||||
|
||||
|
||||
//Function to show elements(books) from LocalStorage
|
||||
function displayBooks() {
|
||||
let books = localStorage.getItem('shelfOfBooks');
|
||||
let clearBtn = document.getElementById("clear");
|
||||
let objOfBook;
|
||||
|
||||
if (books == null) {
|
||||
objOfBook = [];
|
||||
}
|
||||
else {
|
||||
objOfBook = JSON.parse(books);
|
||||
}
|
||||
let html="";
|
||||
let index = 1;
|
||||
|
||||
objOfBook.forEach( (books)=> { //index is the length of the array
|
||||
|
||||
html += `
|
||||
<tr class="rows">
|
||||
<th scope="row">${index++}</th>
|
||||
<td class="name">${books.book}</td>
|
||||
<td class="author">${books.bookauthor}</td>
|
||||
<td class="type">${books.bookType}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
let table = document.getElementById('tableBody');
|
||||
let noDisplayMsg = document.getElementById('emptyMsg');
|
||||
|
||||
if (objOfBook.length != 0) {
|
||||
table.innerHTML = html;
|
||||
clearBtn.style.display = "block";
|
||||
noDisplayMsg.innerHTML = "";
|
||||
}
|
||||
else {
|
||||
noDisplayMsg.innerHTML = `Nothing to display! Use "Add book" above to add books`;
|
||||
}
|
||||
|
||||
let libraryForm = document.getElementById('libraryForm');
|
||||
libraryForm.reset();
|
||||
}
|
||||
|
||||
|
||||
//Show adding message
|
||||
function addMessage() {
|
||||
let message = document.getElementById('message');
|
||||
let navbar = document.getElementById('navbar');
|
||||
|
||||
navbar.style.display = "none";
|
||||
|
||||
message.innerHTML = `<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<strong>Message:</strong> Your book has been successfully added.
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>`
|
||||
|
||||
setTimeout(() => {
|
||||
navbar.style.display = "flex";
|
||||
message.innerHTML = ``;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
//Show error message
|
||||
function errorMessage() {
|
||||
let message = document.getElementById('message');
|
||||
let navbar = document.getElementById('navbar');
|
||||
|
||||
navbar.style.display = "none";
|
||||
message.innerHTML = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Error:</strong> To add book, add name of book.
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>`
|
||||
|
||||
setTimeout(() => {
|
||||
navbar.style.display = "flex";
|
||||
message.innerHTML = ``;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
//Show clear message
|
||||
function clearMessage() {
|
||||
let message = document.getElementById('message');
|
||||
let navbar = document.getElementById('navbar');
|
||||
|
||||
navbar.style.display = "none";
|
||||
|
||||
message.innerHTML = `<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<strong>Message:</strong> Your book shelf is clear! To add more books refresh the browser.
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>`
|
||||
|
||||
setTimeout(() => {
|
||||
navbar.style.display = "flex";
|
||||
message.innerHTML = ``;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
// Clearning shelf (Deleting all books)
|
||||
let clearBtn = document.getElementById("clear");
|
||||
|
||||
clearBtn.addEventListener('click', ()=> {
|
||||
localStorage.removeItem("shelfOfBooks");
|
||||
localStorage.removeItem("getBookNumber");
|
||||
|
||||
document.getElementById("books").innerHTML = "No. of Books: " + 0;
|
||||
let table = document.getElementById('tableBody');
|
||||
table.style.display = "none"
|
||||
clearBtn.style.display = "none";
|
||||
|
||||
let noDisplayMsg = document.getElementById('emptyMsg');
|
||||
noDisplayMsg.innerHTML = `Nothing to display! Use "Add book" above to add books`;
|
||||
|
||||
clearMessage();
|
||||
})
|
||||
|
||||
//Searching book by bookname, author and type
|
||||
let searchNote = document.getElementById('searchText');
|
||||
searchNote.addEventListener('input', function () {
|
||||
|
||||
let search = searchNote.value.toLowerCase();
|
||||
|
||||
let tableRows = document.getElementsByClassName('rows');
|
||||
|
||||
Array.from(tableRows).forEach(function (element) {
|
||||
|
||||
let bookName = element.getElementsByClassName("name")[0].innerText.toLowerCase();
|
||||
let authorName = element.getElementsByClassName("author")[0].innerText.toLowerCase();
|
||||
let type = element.getElementsByClassName("type")[0].innerText.toLowerCase();
|
||||
|
||||
if (bookName.includes(search)) {
|
||||
element.style.display = "table-row";
|
||||
}
|
||||
else if(authorName.includes(search)){
|
||||
element.style.display = "table-row";
|
||||
}
|
||||
else if(type.includes(search)){
|
||||
element.style.display = "table-row";
|
||||
}
|
||||
else {
|
||||
element.style.display = "none";
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Update Number of books in Shelf section
|
||||
function UpdateBook() {
|
||||
let bookNumber = localStorage.getItem("getBookNumber");
|
||||
bookNumber = parseInt(bookNumber);
|
||||
|
||||
if (bookNumber) {
|
||||
localStorage.setItem("getBookNumber", bookNumber + 1);
|
||||
document.getElementById("books").innerHTML = "No. of Books: " + (bookNumber + 1);
|
||||
}
|
||||
else {
|
||||
localStorage.setItem("getBookNumber", 1);
|
||||
document.getElementById("books").innerHTML ="No. of Books: 0" + 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//Show Number of books in Shelf section
|
||||
function showNumberOfBooks() {
|
||||
let getBookNumber = localStorage.getItem("getBookNumber");
|
||||
getBookNumber = parseInt(getBookNumber);
|
||||
|
||||
|
||||
if (getBookNumber) {
|
||||
document.getElementById("books").innerHTML = "No. of Books: " + getBookNumber;
|
||||
}
|
||||
else {
|
||||
document.getElementById("books").innerHTML = "No. of Books: " + 0;
|
||||
}
|
||||
}
|
||||
|
||||
showNumberOfBooks();
|
||||
Loading…
Reference in new issue