Scribd
Upload
9 views2 pages

!DOCTYPE HTML

coding

Uploaded by

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

!DOCTYPE HTML

coding

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
.book-form {
margin-bottom: 20px;
}
.book-list {
display: flex;
flex-wrap: wrap;
}
.book-item {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
width: 150px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
</style>
</head>
<body>

<h1>Book Tracker</h1>

<div class="book-form">
<input type="text" id="bookTitle" placeholder="Book Title" required>
<input type="text" id="bookAuthor" placeholder="Author" required>
<input type="url" id="bookImage" placeholder="Image URL" required>
<input type="number" id="totalChapters" placeholder="Total Chapters"
required>
<input type="number" id="chaptersRead" placeholder="Chapters Read"
required>
<button onclick="addBook()">Add Book</button>
</div>

<input type="text" id="searchBar" placeholder="Search for books..."


onkeyup="searchBooks()">

<div class="book-list" id="bookList"></div>

<script>
const books = [];

function addBook() {
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('bookAuthor').value;
const image = document.getElementById('bookImage').value;
const totalChapters =
parseInt(document.getElementById('totalChapters').value);
const chaptersRead =
parseInt(document.getElementById('chaptersRead').value);

if (title && author && image && !isNaN(totalChapters) && !


isNaN(chaptersRead)) {
books.push({ title, author, image, totalChapters, chaptersRead });
document.getElementById('bookTitle').value = '';
document.getElementById('bookAuthor').value = '';
document.getElementById('bookImage').value = '';
document.getElementById('totalChapters').value = '';
document.getElementById('chaptersRead').value = '';
displayBooks(books);
}
}

function displayBooks(booksToDisplay) {
const bookList = document.getElementById('bookList');
bookList.innerHTML = '';

booksToDisplay.forEach(book => {
const bookItem = document.createElement('div');
bookItem.classList.add('book-item');
const chaptersLeft = book.totalChapters - book.chaptersRead;
bookItem.innerHTML = `
<img src="${book.image}" alt="${book.title}">
<h3>${book.title}</h3>
<p>${book.author}</p>
<p>Total Chapters: ${book.totalChapters}</p>
<p>Chapters Read: ${book.chaptersRead}</p>
<p>Chapters Left: ${chaptersLeft}</p>
`;
bookList.appendChild(bookItem);
});
}

function searchBooks() {
const query = document.getElementById('searchBar').value.toLowerCase();
const filteredBooks = books.filter(book =>
book.title.toLowerCase().includes(query) ||
book.author.toLowerCase().includes(query)
);
displayBooks(filteredBooks);
}
</script>

</body>
</html>

You might also like