Skip to content

Commit ab89221

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#454 from samipak458/main
Simple Library Management Added
2 parents d0fea13 + 85a005e commit ab89221

File tree

5 files changed

+459
-0
lines changed

5 files changed

+459
-0
lines changed

‎Simple Libray Management/images/SimpleLibraryManagement(mobile).png

13.7 KB
Loading

‎Simple Libray Management/images/SimpleLibraryManagement.png

18.6 KB
Loading

‎Simple Libray Management/index.html

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Online Library</title>
9+
10+
<!--Bootstrap CSS-->
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
12+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
13+
14+
<!--FontAwesome-->
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
16+
17+
<style>
18+
#clear {
19+
display: none;
20+
}
21+
#libraryForm{
22+
border: .5px dashed black;
23+
padding: 20px;
24+
}
25+
#table{
26+
border: .5px dashed black;
27+
padding: 10px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<!--NavBar-->
35+
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #7952b3; opacity: .8;">
36+
<a class="navbar-brand mb-1" href="#" style="font-size: 24px;">Online Library</a>
37+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
38+
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
39+
<span class="navbar-toggler-icon"></span>
40+
</button>
41+
42+
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
43+
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
44+
45+
</ul>
46+
<form class="form-inline my-2 my-lg-0">
47+
<input class="form-control mr-sm-2" id="searchText" type="search" style="border-radius: 45px;" placeholder="Search">
48+
<button class="btn btn-dark my-2 my-sm-0 px-3" type="submit" style="border-radius: 45px;">Search</button>
49+
</form>
50+
</div>
51+
</nav>
52+
53+
<!--Message shown on successful adding of book-->
54+
<div class="fixed-top" id="message"></div>
55+
56+
57+
<!--Adding books-->
58+
<div class="container pt-4 mt-5 my-3">
59+
<h1 class="text-center display-4 font-weight-bold">Welcome To Online Library</h1>
60+
<hr>
61+
<form id="libraryForm">
62+
<div class="form-group row">
63+
<label for="bookName" class="col-sm-2 col-form-label">Name</label>
64+
<div class="col-sm-10">
65+
<input type="text" class="form-control" id="bookName" placeholder="Book Name">
66+
</div>
67+
</div>
68+
<div class="form-group row">
69+
<label for="Author" class="col-sm-2 col-form-label">Author</label>
70+
<div class="col-sm-10">
71+
<input type="text" class="form-control" id="author" placeholder="Author">
72+
</div>
73+
</div>
74+
<fieldset class="form-group">
75+
<div class="row">
76+
<legend class="col-form-label col-sm-2 pt-0">Type</legend>
77+
<div class="col-sm-10">
78+
<div class="form-check">
79+
<input class="form-check-input" type="radio" name="type" id="fiction" value="fiction">
80+
<label class="form-check-label" for="fiction">
81+
Fiction
82+
</label>
83+
</div>
84+
<div class="form-check">
85+
<input class="form-check-input" type="radio" name="type" id="programming"
86+
value="programming">
87+
<label class="form-check-label" for="programming">
88+
Computer Programming
89+
</label>
90+
</div>
91+
<div class="form-check">
92+
<input class="form-check-input" type="radio" name="type" id="science" value="science">
93+
<label class="form-check-label" for="science">
94+
Science
95+
</label>
96+
</div>
97+
<div class="form-check">
98+
<input class="form-check-input" type="radio" name="type" id="other" value="other">
99+
<label class="form-check-label" for="other">
100+
Other
101+
</label>
102+
</div>
103+
</div>
104+
</div>
105+
</fieldset>
106+
<div class="form-group row">
107+
<div class="col-lg-12 col-sm-10">
108+
<button type="submit" class="btn text-light btn-large btn-block" style="background-color: #7f5bb4f3;">Add Book</button>
109+
</div>
110+
</div>
111+
</form>
112+
<br>
113+
114+
<!--Display of books-->
115+
<div id="table mt-0">
116+
117+
<h1>Your Book Shelf</h1>
118+
<hr>
119+
120+
<div id="table" class="mb-5">
121+
<h5 class="float-right" id="books"></h5>
122+
123+
<table class="table table-striped table-bordered">
124+
<thead class="text-center text-light" style="background-color: #7952b3;">
125+
<tr>
126+
<th scope="col">No.</th>
127+
<th scope="col">Name</th>
128+
<th scope="col">Author</th>
129+
<th scope="col">Type</th>
130+
</tr>
131+
</thead>
132+
<tbody class="text-center" id="tableBody"> </tbody>
133+
</table>
134+
135+
136+
<!--Display Msg when table is empty-->
137+
<h5 id="emptyMsg" class="mb-5"></h5>
138+
</div>
139+
140+
<button type="button" id="clear" class="btn px-3 mb-2 btn-danger float-right">Clear Shelf</button>
141+
</div>
142+
143+
<!--JS file-->
144+
<script src="script.js"></script>
145+
146+
<!--Required Bootrap Jquery first,Popper JS , Bootstrap JS-->
147+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
148+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
149+
crossorigin="anonymous"></script>
150+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
151+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
152+
crossorigin="anonymous"></script>
153+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
154+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
155+
crossorigin="anonymous"></script>
156+
</body>
157+
158+
</html>

‎Simple Libray Management/readme.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Simple Library Management
2+
3+
A simple library management project that is easy to use and helps the learner to understand the basic concept of JS.
4+
5+
Visit Website: [Online Library](https://OnlineLibrary.samimunir2002.repl.co)
6+
7+
<p align="center">
8+
<img src="https://user-images.githubusercontent.com/52650290/165066763-ad033daf-8220-4299-a1ac-c418fb5664b6.png">
9+
</p>
10+
11+
## Functionalities :-
12+
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.
13+
14+
### Adding Book in Shelf:
15+
<p align="center">
16+
<img src="https://user-images.githubusercontent.com/52650290/165067119-e52e289d-4704-41b8-a3b9-90ff9cf6d087.png">
17+
</p>
18+
19+
### Adding Book Without Entering Book Name:
20+
<p align="center">
21+
<img src="https://user-images.githubusercontent.com/52650290/165067664-8c19b8e3-c321-4d15-955e-265bc46646c3.png">
22+
</p>
23+
24+
### Clearing Book Shelf:
25+
<p align="center">
26+
<img src="https://user-images.githubusercontent.com/52650290/165067808-62f1f156-3e08-4f8a-b9ab-ea63dd4172e5.png">
27+
</p>
28+
29+
## Built with :-
30+
- HTML
31+
- Bootstrap
32+
- JavaScript
33+
34+
## How to use :-
35+
- Clone the repository
36+
- Go to the directory
37+
- Run index.html file
38+
- Enter book name, author and type of book
39+
- Press add book

0 commit comments

Comments
 (0)