LOKNETE GOPINATHJI MUNDE

INSTITUTE ENGINEERING
(Diploma)

Academic year 2023-24

Client Side Scripting Language
(22519)

Micro project on
Design Web Page & Slideshow with Animation of Library
System

Guided by
Prof.B. S. Chaudhary

1
 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION

Loknete Gopinathji Munde Institute of Engineering

Education & Research (Degree & Diploma
Engineering)

MICRO PROJECT
Academic year: 2022-23

TITLE OF PROJECT

Design Web Page & Slideshow with Animation of Library

System

Program: CO Program code:CO5I

Course: TYCO Course code:22519

2
 CERTIFICATE

This is to certify that Mr. /Ms Avishkar Rajendra Bachhav Roll No.
04 Of Third year of Diploma in Computer Engineering of Institute,
LOGMIEER (Degree & Diploma Engineering), NASHIK (Code:
1477) has completed the Micro Project satisfactorily in Subject: Client
Side Scripting Language (22519) for the academic year 2023 - 24 as
prescribed in the curriculum

Place: Nashik Enrollment No: -2114770055

Date: Exam Seat No: 461945

Subject Teacher Head of Department Principal

3
 INDEX

Sr. No Contents Page No

1 Abstract 6
2 Acknowledgement 7
3 Introduction of html 8
4 Introduction of 11
Javascript
5 Source code of login 13
page
6 Source code of library 15
book
7 Source code of library 20
system slideshow
8 Login page Output 23
9 Library book output 25
10 Slideshow output 28
11 conclusion 30
12 references 31

Micro project report

SR.NO WEEK ACTIVITY PERFORMED DATE SIGN.

.

4
 Discussion and finalization of
1 1st
topic
Preparation and submission of
2 2nd
Abstract
3 3rd Literature Review
4th and
4 Collection of Data
5th
th
6 and
5 Collection of Data
7th
Discussion and outline of
8th and
6 Content
9th
7 10th Formulation of Content
11th and Editing and proof Reading of
8
12th Content
Compilation of Report And
9 13th
Presentation
10 14th Seminar
11 15th Viva voce
Final submission of Micro
12 16th
Project

Sign of the student Sign of the faculty

ACKNOWLEDGEMENT

 I am very thanking full to Loknete Gopinathji Munde polytechnic who

has given me opportunity to have project knowledge of professional
practices.

5
  I am also thankful to the means for providing me the information of
professional practices which is the base of the project.

 Lastly I am thankful to my subject teacher for proper guidance and co-

operative in preparation of the project work.

Abstract

My micro project based on the webpage for library system & slideshow with
animation of library system.
Library management system is a project which aims in developing
computerized system to maintain all the daily work of library .This project has
many features which are generally not available in normal library management

6
systems like facility of user login. It has also a facility where student after
logging in their accounts can see list of books. And select your the favourite
books in library system like story books, autobiography books, Kadambari
books, subjects books
Overall this his project of ours is being developed to help the students as well as
staff of library to maintain the library in the best way possible and also reduce
the human efforts.

Introduction of HTML

HTMLstands for Hypertext Markup Language. It is the most basic language,

and simple to learn and modify. It is a combination of both hypertext and
markup language. It contains the elements that can change/develop a web
page’s look and the displayed contents. Or we can say that HTML creates or
defines the structure of web pages. We can create websites using HTML which
can be viewed on internet-connected devices like laptops, android mobile

7
 phones, etc. It was created by Tim Berners-Lee in 1991. The first version of
HTML is HTML 2.0 which was published in 1999, and the latest version is
HTML 5. We can save HTML files with an extension .html.

What is Hypertext?
Text that is not restricted to a sequential format and that includes links to other
text is called Hypertext. The links can connect online pages inside a single or
different website.

What is Markup Language?

Markup Language is a language that is interpreted by the browser and it
defines the elements within a document using “tags”. It is human-readable,
which means that markup files use common words rather than the complicated
syntax of programming languages.

Some Basics Structural Elements in Html Documents are:

1.<!DOCTYPE html> :
Doctype HTML is a declaration that tells the browser what version of HTML
the document is written in. This declaration appears as the very first line in an
HTML file.

2.<html>:
An HTML tag is a piece of markup language used to indicate the beginning
and end of an HTML element in an HTML document. As part of an HTML
element, HTML tags help web browsers convert HTML documents into web
pages.

3.<head>:
An HTML tag is a piece of markup language used to indicate the beginning
and end of an HTML element in an HTML document. As part of an HTML
element, HTML tags help web browsers convert HTML documents into web
pages.

8
4.<title>:
The <title> tag defines the title of the document. The title must be text-only,
and it is shown in the browser's title bar or in the page's tab. The <title> tag is
required in HTML documents! The contents of a page title is very important for
search engine optimization.

5.<body>:
The <body> tag in HTML is used to define the main content present inside an
HTML page. It is always enclosed within <html>tag. The <body> tag is the
last child of <html> tag. A body tag contains starting as well as an ending tag.

The Tags Used in Developing HTML Document are Listed Below:

1. HTML heading are defined with the h1> to <h6> tags.

2. HTML links are defined with the <a> tag.
3. HTML images are defined with the <Img> tag. The source file (src).
4. HTML buttons are defined with the <button> tag.
5. HTML option are defined with the <option> tag.
6. HTML unordered list are defined with the <ul> tag.
7. HTML list items are defined with the <li> tag.
8. HTML Href are defined with the <href> tag.

This project Library Management System is build keeping in mind to ease the
librarian job of issuing and managing books in the system. An student can see
every one of the books or access books, sort the rundown of books look through
a book utilizing any parameters. He can create logins for the students. There is
also a front end (HomePage) provided where every students (No Login
Required) can see each book that are accessible in the library right

9
 now(Available/Not Available) and can choose to visit it or not , Shelf nos is
provided at the top so he could easily find the book in the library.
The primary objective of any library system isto collect, store, organize,
retrieve and make available the information sources to the information
users. A library, as a system, is a subsystem of some super-system (an
organization in any field, whether education, research or social service).

INTRODUCTION OF JAVASCRIPT

What is JavaScript ?

JavaScript is a dynamic computer programming language. It is lightweight and

most commonly used as a part of web pages, whose implementations allow
client-side script to interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented capabilities.
10
Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The script
should be included in or referenced by an HTML document for the code to be
interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs
that interact with the user, control the browser, and dynamically create HTML
content.
The JavaScript client-side mechanism provides many advantages over
traditional CGI server-side scripts. For example, you might use JavaScript to
check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all
the entries are valid, they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link
navigation, and other actions that the user initiates explicitly or implicitly.
JavaScript is a programming language that allows you to implement complex
things on web pages. Every time a web page does more than just sit there and
display static information for you to look at—displaying timely content updates,
interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more
—you can bet that JavaScript is probably involved

Advantages of JavaScript:

Less Server Interaction: You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your server.
Immediate Feedback to the Visitors: They don't have to wait for a page reload
to see if they have forgotten to enter something
Increased Interactivity : you can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
Richer Interface : You can use JavaScript to include such items as drag-and-
drop components and sliders to give a Rich Interface to your site visitors.

Slideshow Automatic with Animation

11
One of the things you can do with the 'animation' property of CSS is show a
series of slides as a slideshow that plays automatically, i.e., it shows one slide
for a few seconds, then the next slide for a few seconds, etc.

In the examples below, the slideshow repeats indefinitely. After the last slide
the first one is shown again. But showing each slide only once is just as easy.

The slides in my examples are DIV elements with content. Together they are
contained in another DIV element with an ID attribute. It is not necessary to use
DIV elements. Almost any other element will do, as long as each slide is one
element.

Yet another feature-rich responsive image slider to slide images with text. This
JavaScript plugin helps you to create an animated automatic image slider. It
comes with multiple controls (next/previous button, touch-swipe, and numbers
navigation) to slide the images. You can integrate this slider into the hero
section of the webpage to display products/posts with animated text.

This slider comes with a colorful user interface with SVG icons. Basically, it
has an auto play feature to automatically slide to the next image after a certain
time period. Besides this, users can also navigate slider content through
next/previous buttons or swipe (on touch devices).

You can control the sliding delay, transform value, and index value where to
start the slider on load. Similarly, you can also customize its layout, size, and
color by minor changes in CSS.

Source Code :

LOGIN WEBPAGE HTML CODE:

<!doctype html>
<html>
<head>
<title> Login Page </title>
</head>
<link rel="stylesheet" type="text/css"href="login.css">
<body>
<div class="firstdiv">
<h3 class="h3"> Welcome to Login Page</h3>

12
 <form action="books.html"method="post">
<input type="text"placeholder="Enter Email"><br><br>
<input type="password"placeholder="password"><br><br>
<input type="submit"placeholder="Login"><br><br>
</form>
<div class="seconddiv">
<input type="checkbox">Remeber me<br>
<a href="#" style="text-decoration: none;">Forgot password</a>
</div> </div>
</body>
</html>

LOGIN WEBPAGE CSS CODE:

body{
margin: 0;
padding: 0;
background-image: url("lib2.jpg");
background-size: cover;
font-family: pappins;
}
.firstdiv{
width: 400px;
height: 420px;
color: rgba(0,0,0,0.849);
top: 50%;
left: 50%;
padding: 60px 30px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
box-shadow: 8px 8px 50px #000;
}
.h3{
margin: 0;
padding: 0;
font-weight: bold;
font-size: 30px;
color: black;
text-align: center;
margin-bottom: 8%;
font-family: courgette;
}
.firstdiv input{
width: 100%;
margin-bottom: 20px;
}
.firstdiv input[type=text],.firstdiv input[type=password]{
border: none;
border-bottom: 1px solid #ddd;
background: transparent;

13
 outline: none;
height: 30px;
font-size: 16px;
opacity: 1;
color: #ccc;
}
.firstdiv input[type=submit]{
border: none;
outline: none;
height: 40px;
background: #f6648b;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.firstdiv input[type=submit]:hover{
cursor: pointer;
background-color: lightgreen;
color: black;
}
.seconddiv a{
font: size 14px;
color: black;
opacity: 0,8;
}
.seconddiv :hover{
cursor: pointer;
color: white;
opacity: 1;
}
.seconddiv input{
width: 10%;
float: left;
}
.seconddiv{
color: #fff;
}
.seconddiv a{
float: right;
}

LIBRARY BOOKS HTML:

<html>
<head>
<title>Libarary Books</title>
<link rel="stylesheet"href="bookstyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.1/css/all.min.css" integrity="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMG
CdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

14
 </head>
<body>
<div class="title">
<h1>WELCOME TO LIBRARY</h1>
</div>
<div class="menu-bar">
<ul>
<li class="active"><a href="#"><i class="fa fa-book"></i>story book</a></i>
<div class="sub-menu-2">
<ul>
<li><a href="https://mlnsch.files.wordpress.com/2009/08/100-moral-
stories.pdf"> Moral Stories for Children</a></li>
<li><a href="https://www.scribd.com/book/385585021/Witty-Stories-of-
Akbar-and-Birbal-Illustrated-Stories-for-Children">Witty Stories of Akbar &
Birbal</a></li>
<li><a href="https://rohitdhankar.files.wordpress.com/2016/01/reading-2_the-
great-panchatantra-tales_complete.pdf">Animals tales from Panchtantra</a></li>
<li><a href="https://www.targetpublications.org/blossom-story-books-3-to-8-
year-kids-in-english-set-of-3-books.html">Blossom Moral Story Book</a></li>
<li><a href="https://www.pdfdrive.com/greatest-short-stories-
e196795299.html">World's Greatest Short Stories</a></li>
<li><a href="https://mlnsch.files.wordpress.com/2009/08/100-moral-
stories.pdf">Ruskin Bond of Children Story</a></li>
<li><a href="https://myhindigrammar.com/grandmas-bag-of-stories-
pdf/">Sudha Murty Grandma's Bag of Stories</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-book-bookmark"></i>autobiography book </a>
<div class="sub-menu-1">
<ul>
<li><a href="https://www.mkgandhi.org/ebks/gandhiebooks.html"> Apoor
Atmakahktha</a></li>
<li><a href="https://www.pdfdrive.com/dreams-from-my-father-obama-
e50138571.html">Dreams From My Father</a></li>
<li><a href="https://www.pdfdrive.com/the-test-of-my-life-from-cricket-to-
cancer-and-back-e176153811.html">The Test of MyLife</a></li>
<li><a href="https://www.pdfdrive.com/maya-angelou-e18741166.html">Maya
Angelou By Maya Angelou</a></li>
<li><a href="https://www.pdfdrive.com/india-divided-rajendra-prasad-
e58014904.html">dr.rajendras Prasad</a></li>
<li><a href="https://www.mkgandhi.org/ebks/gandhiebooks.htm">Gandhiji chi
Atmakahktha</a></li>
<li><a href="https://www.pdfdrive.com/the-diary-of-a-young-girl-the-definitive-
edition-e32808420.html">The Diary Of a Young Girl by Anne Frank</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-book-reader"></i>kadambari book </a>
<div class="sub-menu-3">

15
 <ul>
<li><a href="https://www.pdfdrive.com/chava-shivaji-sawant-compdf-
e41875082.html"> Yayati</a></li>
<li><a href="https://marathi-motivation.com/gajlelya-marathi-kadambari-
pdf/">Mahanayak</a></li>
<li><a href="https://archive.org/details/dharmayoddha-kalki-avatar-of-vishnu-
by-kevin-missal-book-drive.com/page/n279/mode/2up">Dharmayoddha Kalki</a></li>
<li><a href="https://marathi-motivation.com/gajlelya-marathi-kadambari-
pdf/">Samarop</a></li>
<li><a href="https://www.pdfdrive.com/chava-shivaji-sawant-compdf-
e41875082.html">Mritynjay</a></li>
<li><a href="https://www.pdfdrive.com/chava-shivaji-sawant-compdf-
e41875082.html">Shriman Yogi</a></li>
<li><a href="https://www.pdfdrive.com/chava-shivaji-sawant-compdf-
e41875082.html">Chava</a></li>
<li><a href="https://www.bookganga.com/Preview/BookPreview.aspx?
BookId=5375108225845948779&PreviewType=books">Shyamchi Aai</a></li>
<li><a href="https://www.pdfdrive.com/chava-shivaji-sawant-compdf-
e41875082.html">Yuangdar</a></li>
<li><a href="https://www.pdfdrive.com/asura-tale-of-the-vanquished-the-story-
of-ravana-and-his-people-e42846385.html">Aasura</a></li>
<li><a href="https://www.pdfdrive.com/fire-in-the-sky-the-walton-experience-
e194878433.html">Sky fire</a></li>
<li><a href="https://www.madrasshoppe.com/panipat-english-vishwas-patil-
9789388754811-110900.html">Panipat</a></li>

</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-book-open"></i>subjects book </a>
<div class="sub-menu-4">
<ul>
<li><a
href="https://coddyschool.com/upload/Addison_Wesley_The_Object_Orient.pdf">Object
Oriented Programming Language</a></li>
<li><a href="http://www.dblab.ntua.gr/~gtsat/collection/Java%20books/Java
%20Programming%20Language%20Handbook.pdf">java Programming</a></li>
<li><a href="https://freepdf-books.com/python/">Python</a></li>
<li><a
href="https://matfuvit.github.io/UVIT/predavanja/literatura/TutorialsPoint
%20JavaScript.pdf">Javascript</a></li>
<li><a
href="https://www.tutorialspoint.com/html/html_tutorial.pdf">Html</a></li>
<li><a href="https://www.pdfdrive.com/software-testing-
e30221812.html">Software Testing</a></li>
<li><a
href="https://techiefood4u.files.wordpress.com/2020/02/operating_systems_three_easy_piece
s.pdf">Operating System</a></li>

16
 <li><a
href="https://www.unf.edu/~wkloster/2220/ppts/cprogramming_tutorial.pdf">C
Programming</a></li>
<li><a href="https://www.pdfdrive.com/environmental-studies-
e40784758.html">Enviromental Srudies</a></li>
<li><a href="https://www.pdfdrive.com/advanced-java-books.html">Advanced
Java</a></li>

</ul>
</div>
</li>
</ul>

</div>
</body>
</html>
LIBRARY BOOK CSS CODE :
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: url(newlibrary.jpg);
background-size: auto;
background-position: center;
font-family: sans-serif;
}
.menu-bar{
background: rgb(210, 22, 22);
text-align: center;
}
.menu-bar ul{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 150px;
margin: 15px;
padding: 15px ;
}
.menu-bar ul li a{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover {
background:black;
border-radius:2px ;
}

17
.menu-bar .fa {
margin-right: 5px;
}
.sub-menu-1 {
display: none;
}
.menu-bar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
background: rgba(black);
margin-top: 5px;
margin-left: 5px;
}
.menu-bar ul li:hover .sub-menu-1 ul {
display: block;
margin: 10px;
}
button{
width: 400px;
height: 420px;
color: rgba(0,0,0,0.849);
top: 50%;
left: 50%;
padding: 60px 30px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
box-shadow: 8px 8px 50px #000;
}
.title{
position: absolute;
top: 20%;
left:10%;
transform: translate(-50%,-50%);
}
.title h1{
color: white;
font-size: 18px;
}
.sub-menu-2 {
display: none;
}
.menu-bar ul li:hover .sub-menu-2 {
display: block;
position: absolute;
background: rgba(black);
margin-top: 5px;
margin-left: 5px;
}
.menu-bar ul li:hover .sub-menu-2 ul {

18
 display: block;
margin: 10px;
}
button{
width: 400px;
height: 420px;
color: rgba(0,0,0,0.849);
top: 50%;
left: 50%;
padding: 60px 30px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
box-shadow: 8px 8px 50px #000;
}
.sub-menu-3 {
display: none;
}
.menu-bar ul li:hover .sub-menu-3 {
display: block;
position: absolute;
background: rgba(black);
margin-top: 5px;
margin-left: 5px;
}
.menu-bar ul li:hover .sub-menu-3 ul {
display: block;
margin: 10px;
}
button{
width: 400px;
height: 420px;
color: rgba(0,0,0,0.849);
top: 50%;
left: 50%;
padding: 60px 30px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
box-shadow: 8px 8px 50px #000;
}
.sub-menu-4 {
display: none;
}
.menu-bar ul li:hover .sub-menu-4 {
display: block;
position: absolute;
background: rgba(black);
margin-top: 5px;
margin-left: 5px;

19
}
.menu-bar ul li:hover .sub-menu-4 ul {
display: block;
margin: 10px;
}
button{
width: 400px;
height: 420px;
color: rgba(0,0,0,0.849);
top: 50%;
left: 50%;
padding: 60px 30px;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
box-shadow: 8px 8px 50px #000;
}
SLIDESHOW WITH ANIMATION HTML CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Slider Show & Animation of Library System </title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div class="new">
<h2>WELCOME TO LIBRARY</h2> </div>
<div class="title">
<h1>Slider Show with Animation of Library System</h1> </div>
<div class="slider"> </div>
</body>
</html
SLIDESHOW WITH ANIMATION CSS CODE :
body{
margin: 0;
padding: 0;
background: #313131;
}
.slider{
width: 800px;
height: 500px;
background: url("library5.jpg");
margin: 50px auto;
animation: slide 20s infinite;
}
.title{
position: absolute;
top: 85%;
left:50%;

20
 transform: translate(-50%,-50%);
}
.title h1{
color: skyblue;
font-size: 25px;
}
.new{
position: absolute;
top: 4%;
left:50%;
transform: translate(-50%,-50%);
}
.new h2{
color: white;
font-size: 20px;
}
@keyframes slide{
20%{
background: url("library6.jpg");
}
40%{
background: url("library3.jpg");
}
60%{
background: url("lib5.jpg");
}
80%{
background: url("library3.jpg");
}
100%{
background: url("library4.jpg");
}
}
Output:

21
22
23
24
25
Slideshow :

26
27
28
 Conclusion

Library management work in every school and college is happen with

the Help of manual format. Means with the help of various registers we can
Store or maintain the data but because of this there is no guarenty that
Specific data will be find on time and its also create a question mark on
Library data security.
So on the overcome of these problem The Library
Management System .Is the best option on it. I was try to make a website on
Library Management System including various options, images, menu items,
Slideshow with the help of HTMLCSS.
This website provides a computerized version of library
management System which will benefit the students as well as the staff of the
library. It will maintain the data in the proper way and it will also maintain the
History of the books issues and returns. It will keep the record of all
Types of books and show the correct information about it. Student has
No need to come in library for login rather students can also login for
Library at home with the help of these system. It is the digital and easy way for
proper maintain the data of Library that
Decreases the manual work.
So In my opinion Library Management System is the perfect topic
that I choose as a student

References

1. https://www.w3.org/Style/Examples/007/slideshow.en.html

2. Client side scripting languages textbook.

3. https://sourcecodehero.com/library-system-in-javascript-with-source-
code/

4. https://github.com/topics/library-management-system?l=javascript

5. https://code-boxx.com/javascript-library-management-system/

29
30