msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Library Management Added

Browse Source
pull/689/head
MUHAMMAD SAMIULLAH 3 years ago committed by GitHub
parent 3a5b4b4076
commit eef58a77b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 612 additions and 0 deletions
Show Stats Download Patch File Download Diff File

68
8-Libray Management/Readme.md
Unescape View File

@ -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

8
8-Libray Management/Solution/Readme.md
Unescape View File

@ -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

158
8-Libray Management/Solution/index.html
Unescape View File

@ -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>

262
8-Libray Management/Solution/script.js
Unescape View File

@ -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">&times;</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">&times;</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">&times;</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();

116
8-Libray Management/Web Storage/Readme.md
Unescape View File

@ -0,0 +1,116 @@
# What is web storage ?
With web storage, web applications can store data locally within the user's browser.
Large amounts of data can be stored locally without affecting website performance, and web storage is more secure. Web storage is based on the origin (per domain and protocol). All pages from a single source can store and access the same information.
## Web Storage Objects
There are two types of web storage which are as follow:
- window.localStorage
- window.sessionStorage
**window.localStorage** - stores data with no expiration date.
**window.sessionStorage** - stores data for one session (data is lost when the browser tab is closed).
Before using web storage, check browser support for localStorage and sessionStorage:
```
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support.
}
```
### The localStorage Object:
The data is stored in the localStorage object with no expiration date. When the browser is closed, the data is not deleted, and it will be available the next day, week, or year.
```html
<!DOCTYPE html>
<html>
<body>
<div id="output"></div>
<script>
// Check browser support
if (typeof Storage !== "undefined") {
// Store
localStorage.setItem("firstname", "Maria");
// Retrieve
document.getElementById("output").innerHTML =
localStorage.getItem("firstname");
} else {
document.getElementById("output").innerHTML =
"Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
```
<!--output-->
Maria
Example explained:
- Create a localStorage name/value pair with name="firstname" and value="Maria"
- Now go to the application tab in any browser's devtools, where you'll find a local storage with the key and value columns, and you'll see "firstname" in the key column and "Maria" in the value column.
- Fetch the value of "firstname" and insert it into the element with id="output"
- Now this will print "Maria"
### The sessionStorage Object:
The sessionStorage object is similar to the localStorage object, with the exception that it only stores data for one session. When the user closes the specific browser tab, the data is deleted.
The following example counts the number of times a user has clicked a button, in the current session:
```html
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof Storage !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("output").innerHTML =
"You have clicked the button " +
sessionStorage.clickcount +
" time(s) in this session.";
} else {
document.getElementById("output").innerHTML =
"Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="output"></div>
<p>Click the button to see the counter increase.</p>
<p>
Close the browser tab (or window), and try again, and the counter is
reset.
</p>
</body>
</html>
```
Output:
![output](https://user-images.githubusercontent.com/55904928/137079262-7fa2b512-1873-4075-88eb-7c7c5bf12d13.jpeg)
Example Explained:
- It will first check whether the clickcount key is present or not in the session storage, and if it is not, it will create the key "clickcount" with a value of 1.
- Now if you click on the "click me" button then the value of clickcount is get incremented by 1.
- You can check session storage in devtools, and the value of clickcount in the value column will show the number of times you clicked.
- If you close the browser tab, the counter will be reset to zero, and the value of clickcount will be 0.
Write Preview
Loading…
Cancel
Save