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.
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.
Book Library in JavaScript With Free Code
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.
