Book Library in JavaScript With Free Code

code Snippets

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.

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.

  1. Add New Books: Users can input the details of a new book and add it to the library.
  2. Display Book List: The library can show the full list of books stored.
  3. Remove Books: A book can be deleted from the library by selecting or clicking on it.
  4. Search for Books: A simple search functionality can allow users to find books by title or author.
Top 5 Python Libraries for College Projects

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.
library-management-system Book Library in JavaScript With Free Code
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.
Student Management System in Python With Free Code

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

  • 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 Views: 122

Related Posts

Post Comment

You May Have Missed