Book Library in JavaScript With Free Code
Introduction
Book Library in JavaScript
Imagine a world where your love for books meets the elegance of technology—a place where every title, every author, and every genre is just a click away. In today’s fast-paced world, organizing and managing a personal book library can feel like a daunting task. But with the power of JavaScript, you can create a digital library that not only keeps your collection in perfect order but also rekindles your passion for reading. This journey into building a book library in JavaScript is about more than just code; it’s about creating a space where your literary treasures are cherished and easily accessible, making the joy of reading even more fulfilling.
Table of Contents
What is a Book Library Application?
A Book Library Application allows users to store a list of books, including details such as the title, author, and genre. The application can serve as a lightweight tool for personal use or a starting point for building more complex systems like a school library management system.
- Add New Books: Users can input the details of a new book and add it to the library.
- Display Book List: The library can show the full list of books stored.
- Remove Books: A book can be deleted from the library by selecting or clicking on it.
- Search for Books: A simple search functionality can allow users to find books by title or author.
HTML Structure
We start with the HTML layout that will house our book library UI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Library</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Book Library</h1>
<div class="form-container">
<input type="text" id="bookTitle" placeholder="Book Title">
<input type="text" id="bookAuthor" placeholder="Author">
<button id="addBookBtn">Add Book</button>
</div>
<h2>Library Collection</h2>
<ul id="bookList"></ul>
<script src="script.js"></script>
</body>
</html>This simple layout consists of:
- A form with input fields for the book title and author.
- A button to add the book to the library.
- An empty
<ul>where the list of books will be displayed.
JavaScript for Adding and Removing Books
Next, let’s write the JavaScript code that powers the functionality of our Book Library.
// Select necessary elements
const addBookBtn = document.getElementById('addBookBtn');
const bookList = document.getElementById('bookList');
// Function to add a new book
function addBook() {
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('bookAuthor').value;
if (title && author) {
const listItem = document.createElement('li');
listItem.textContent = `${title} by ${author}`;
// Add remove button
const removeBtn = document.createElement('button');
removeBtn.textContent = 'Remove';
removeBtn.onclick = function() {
bookList.removeChild(listItem);
};
listItem.appendChild(removeBtn);
bookList.appendChild(listItem);
// Clear the input fields
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
} else {
alert('Please enter both a title and an author');
}
}
// Event listener for adding a book
addBookBtn.addEventListener('click', addBook);This script achieves the following:
- Adding a New Book: When the “Add Book” button is clicked, the book details are retrieved from the input fields, and a new list item is created.
- Removing a Book: Each book is listed with a “Remove” button that allows users to delete it from the library.
- Input Validation: An alert is displayed if the user tries to add a book without providing both a title and author.
CSS for Styling
Lastly, let’s add some simple styling to enhance the look and feel of the application.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1, h2 {
color: #333;
}
.form-container {
margin-bottom: 20px;
}
input {
padding: 8px;
margin-right: 10px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
display: flex;
justify-content: space-between;
}
li button {
background-color: #f44336;
}The above CSS code provides basic styling for our HTML elements, giving the application a clean and user-friendly interface
- New Project :-https://www.youtube.com/@Decodeit2
- PHP PROJECT:- CLICK HERE
- library management system pdf
- library management system website
- write the components of library management software pdf
- library management software free
- library management system example
- library management system introduction
- how does a library management system work
- library management system abstract
- book library management system free
- book library management system free download
Post Comment