<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Management System</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background-
color: #f4f4f4; transition: background 0.3s ease; }
.dark-mode { background-color: #1e1e1e; color: white; }
h1 { color: #333; }
.dark-mode h1 { color: #fff; }
.container { width: 50%; margin: auto; background: white; padding: 20px;
border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); transition: background
0.3s ease; }
.dark-mode .container { background: #333; }
input, button { padding: 10px; margin: 5px; width: 80%; }
.book-list { text-align: left; margin-top: 20px; }
.book-item { padding: 5px; border-bottom: 1px solid #ccc; display: flex;
justify-content: space-between; align-items: center; }
.delete-btn { background: red; color: white; border: none; padding: 5px;
cursor: pointer; }
.dark-mode .delete-btn { background: darkred; }
.theme-toggle { background: #222; color: white; padding: 10px; border:
none; cursor: pointer; }
.book-cover { width: 50px; height: 70px; object-fit: cover; margin-right:
10px; }
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Vishnusaketh's Library</h1>
<button class="theme-toggle" onclick="toggleTheme()">Toggle Dark
Mode</button>
<input type="text" id="title" placeholder="Enter Book Title">
<input type="text" id="author" placeholder="Enter Book Author">
<input type="url" id="cover" placeholder="Enter Book Cover URL">
<button onclick="addBook()">Add Book</button>
<input type="text" id="search" placeholder="Search Books..."
onkeyup="filterBooks()">
<button onclick="clearBooks()">Clear All</button>
<div class="book-list" id="bookList"></div>
</div>
<script>
let books = JSON.parse(localStorage.getItem('books')) || [];
function addBook() {
let title = document.getElementById('title').value.trim();
let author = document.getElementById('author').value.trim();
let cover = document.getElementById('cover').value.trim();
if (title && author) {
books.push({ title, author, cover });
localStorage.setItem('books', JSON.stringify(books));
document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('cover').value = '';
viewBooks();
} else {
alert("Please enter both title and author.");
}
}
function viewBooks() {
let bookList = document.getElementById('bookList');
bookList.innerHTML = "<h3>Book Collection:</h3>";
books.forEach((book, index) => {
bookList.innerHTML += `
<div class='book-item'>
<img src="${book.cover ||
'https://via.placeholder.com/50x70'}" class='book-cover'>
<span>${book.title} by ${book.author}</span>
<button class='delete-btn' onclick='deleteBook($
{index})'>Delete</button>
</div>`;
});
}
function deleteBook(index) {
books.splice(index, 1);
localStorage.setItem('books', JSON.stringify(books));
viewBooks();
}
function clearBooks() {
if (confirm("Are you sure you want to delete all books?")) {
localStorage.clear();
books = [];
document.getElementById('bookList').innerHTML = "";
}
}
function toggleTheme() {
document.body.classList.toggle("dark-mode");
localStorage.setItem("theme", document.body.classList.contains("dark-
mode") ? "dark" : "light");
}
function filterBooks() {
let query = document.getElementById('search').value.toLowerCase();
let bookItems = document.querySelectorAll('.book-item');
bookItems.forEach(item => {
item.style.display = item.innerText.toLowerCase().includes(query) ?
'flex' : 'none';
});
}
window.onload = function () {
viewBooks();
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
}
};
</script>
</body>
</html>
