Scribd
Upload
6 views8 pages

Csspartb

CSS Microproject

Uploaded by

Ayush Meshram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views8 pages

Csspartb

CSS Microproject

Uploaded by

Ayush Meshram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Part B

1.0 Rational :

JavaScript is limited featured client side Scripting programming language. JavaScript


Runs at the client end through the user’s browser without sending messages back and
Forth to the server. It is widely used by the web developers to do things such as build
Dynamic web pages, respond to events, create interactive forms, validate data that
the Visitor enters into a form, control the browser etc. This course helps student to
create Highly interactive web pages using these features

2.0 Aim of Micro-project :

Develop Simple Library Management system Using HTML, JavaScript .

3.0 Course outcomes Achieved:

CO.1: Create interactive web pages using program flow


control structure.
CO.2: Create event based web based forms using javascript.

4.0 Literature review:

The library Management system helps to manage tasks by adding and removing
Books. It uses web technologies Html, Javascript making it easy understand and
A greate way to learn about library Management system .

Following are some keywords used in :


• window.onload: This is an event that runs the loadBooks() function when the page
Is fully loaded, ensuring the book list is displayed even after refreshing the page

• Document.getElementById(): This is a JavaScript function that retrieves


An element from the HTML document by its ID. It’s used to get the
Values from the input fields and modify the list.

• This.parentElement.remove(): This is part of the “Remove” button’s


Functionality. It removes the list item (<li>) that contains the button when
Clicked.

• innerHTML: This property allows you to change or get the HTML


Content inside an element. In thecode:Document.getElementById(‘book-
list’).innerHTML is used to add new books to the list or load previously Saved books
• localStorage.setItem(): This method saves data to the browser’s local
Storage. In the code, the book list is stored in localStorage so that it
Persists across page reloads.

• localStorage.getItem(): This retrieves data from localStorage. The


loadBooks() function uses this to load and display the saved book list
when the page reloads
5.0 Actual Methodology followed:

Here are step-by-step algorithm for the simple library management system you’ve
created:
Step 1:Start.
Step 2:Display HTML page with a form to enter book details and a list to show added
books.
Step 3:User enters book details.
• Book title
• Authot
Step 4:User clicks “Add Book” button.
• Run the addBook() function.
Step 5:Check if both inputs are filled:
• If yes, proceed to add the book
• If no, do nothing.
Step 6:Create a new list item with the book’s title and author, plus a “Remove” Button.
Step 7:Add the list item to the “Library Inventory” list.
Step 8:Clear the input fields so the user can add another book.
Step 9: Save the book list in localStorage:
• Convert the list of books to a string using innerHTML.
• Use localStorage.setItem(‘books’, bookList) to save the list in localStorage.
Step 10: Load the saved books from localStorage when the page reloads:
• Use localStorage.getItem(‘books’) to retrieve the saved list.
• If books exist, display them in the “Library Inventory” list.
Step 11: User can click the “Remove” button to delete a book from the list.
Step 12: After removing a book, save the updated list to localStorage again.
Step 13: Prevent page reload when the button is clicked by returning false.
Step 14: Repeat for adding more books.
Step 15: End

6.0 Resources used:

Sr. No Name of Resources Specification Remarks


1 Laptop Processor i5, OS
windows 10, RAM 8
GB, Storage 512GB
SSD
2 Internet Speed 100 Kbps
7.0 Project Details:

CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Simple Library Management</title>
</head>
<body>
<form id=”book-form”>
<table border=”” align=”center”>
<tr>
<td colspan=”2” align=”center”>
<h2>
Library Management System
</h2>
</td>
</tr>
<tr>
<td colspan=”2” align=”center”>
<h2>Add a New Book</h2>
</td>
</tr>
<tr>
<td colspan=”2” align=”center”>
<input type=”text” id=”title” placeholder=”Book Title” />
<br>
<input type=”text” id=”author” placeholder=”Author” />
<br>
<button type=”submit” onclick=”return addBook()”>Add Book</button>
</td>
</tr>
<tr>
<td colspan=”2” align=”center”>
<h2>Library Inventory</h2>
</td>
</tr>
<tr>
<td>
<ul id=”book-list”></ul>
</td>
</tr>
</table>
</form>
<script>
Window.onload = function() {
loadBooks();
};

Function addBook() {
Var title = document.getElementById(‘title’).value;
Var author = document.getElementById(‘author’).value;
If (title && author)
{

Var newBook = ‘<li>’+title+” “+’by’+” “+author+


‘ <button onclick=”this.parentElement.remove(); saveBooks();”>Remove</button></li>’;
Document.getElementById(‘book-list’).innerHTML += newBook;
Document.getElementById(‘title’).value = ‘’;
Document.getElementById(‘author’).value = ‘’;
saveBooks();
}
Return false;
}
Function saveBooks() {
Var bookList = document.getElementById(‘book-list’).innerHTML;
localStorage.setItem(‘books’, bookList);
}

Function loadBooks() {
Var savedBooks = localStorage.getItem(‘books’);
If (savedBooks) {
Document.getElementById(‘book-list’).innerHTML = savedBooks;
}
}
</script>
</body>
</html>
Output:
8.0 Skill Developed:

a. Problem-Solving Skills.

b. Communication Skill.

c. Time Management

9.0 .Reference:-

i. Internet is a best option for information.


ii. Books:- CSS Niralli Publication

10. Applications:

• Small Schools or Colleges


• Personal Book Collection Management
• Non-profit or NGO Libraries
• Study Circles or Book Clubs

11. Conclusion:
In this project, the simple library management system allows users to add and remove books
dynamically. Users can input a book's title and author, and upon clicking "Add Book," the
book is added to a list. The system ensures both fields are filled before adding a book. Each
book entry includes a "Remove" button for deleting the book from the list. once the page is
reloaded the previously entered books and author displays. JavaScript handles the input,
validation, and dynamic list updates with reloading the page. It's an easy way to manage as
small book collection interactively.

You might also like