Skip to content

Commit d95a909

Browse files
suryakarmakarsuryakarmakar
committed
Create Book Management System Using Objects
1 parent 4b08c27 commit d95a909

File tree

3 files changed

+102
-0
lines changed

3 files changed

+102
-0
lines changed

‎Courses/IBM-JavaScript-Essentials/07-Objects/README.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Develop an Application to Create Book Management System Using Objects
2+
3+
## What you will learn
4+
5+
You will explore concepts such as collecting user input through HTML forms, handling input data using JavaScript objects, manipulating arrays to manage book data, dynamically update to display books, and implementing functionalities like adding, editing, and deleting book entries. This practical exercise provides learners with insights into fundamental concepts such as array methods, form handling, and user interaction, forming a foundational understanding of web development principles.
6+
7+
Learning objectives
8+
9+
1. Implement a book management interface: Create an interface to collect book details including name, author, description, and page count using HTML form elements.
10+
11+
2. Store and manage book data: Use JavaScript arrays and objects to store and manage book information entered by users, allowing for functionalities like adding, editing, and deleting book entries.
12+
13+
3. Dynamic display of book information: Dynamically update the webpage by displaying the entered book details in a structured format, enabling users to view a list of added books.
14+
15+
4. Interactive user experience: Facilitate user interaction by allowing edits and deletions of book entries directly from the displayed list, enhancing the usability of the book management system.
16+
17+
# Summary
18+
19+
1. Book management interface: The code sets up a simple web interface for managing books. It includes input fields for book name, author name, book description, and the number of pages. Users can add books using the "Add Book" button.
20+
21+
2. Dynamic display of books: Upon adding books, the showbooks() function dynamically generates HTML content to display the list of added books. It formats and structures the book details using JavaScript's map() function to create HTML elements for each book, including buttons for editing and deleting individual book entries.
22+
23+
3. Book handling functionality: The code provides functionalities for editing and deleting book entries. The editbook() function allows users to edit book details by populating the input fields with the selected book's information. Meanwhile, the deletebook() function removes a book entry from the displayed list when the corresponding delete button is clicked. However, both editing and deletion actions currently lack a specific updatebooks() function to handle the updating of book data in the interface.

‎Courses/IBM-JavaScript-Essentials/07-Objects/book_system.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Book Management System</title>
6+
</head>
7+
<body>
8+
<h1>Book Management System</h1>
9+
10+
<label for="bookName">Book Name:</label><br />
11+
<input type="text" id="bookName" /><br /><br />
12+
13+
<label for="authorName">Author Name:</label><br />
14+
<textarea id="authorName" rows="4"></textarea><br /><br />
15+
16+
<label for="bookDescription">Book Description</label><br />
17+
<textarea id="bookDescription" rows="4"></textarea><br /><br />
18+
19+
<label for="pagesNumber">No. of Pages Time</label><br />
20+
<input type="number" id="pagesNumber" /><br /><br />
21+
22+
<button onclick="addBook()">Add Book</button>
23+
24+
<h2>books</h2>
25+
<div id="books">
26+
<!-- books will be displayed here -->
27+
</div>
28+
<script src="./book_system.js"></script>
29+
</body>
30+
</html>

‎Courses/IBM-JavaScript-Essentials/07-Objects/book_system.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
let books = [];
2+
3+
function addBook() {
4+
// retrieves the values entered by the user in the HTML input fields.
5+
const bookName = document.getElementById("bookName").value;
6+
const authorName = document.getElementById("authorName").value;
7+
const bookDescription = document.getElementById("bookDescription").value;
8+
const pagesNumber = parseInt(document.getElementById("pagesNumber").value);
9+
10+
// upon successful validation, the function creates a book object.
11+
if (bookName && authorName && bookDescription && !isNaN(pagesNumber)) {
12+
const book = {
13+
name: bookName,
14+
authorName: authorName,
15+
bookDescription: bookDescription,
16+
pagesNumber: pagesNumber,
17+
};
18+
19+
// book object is then pushed into the books array, effectively adding the new book to the collection.
20+
books.push(book);
21+
22+
// display with the newly added book details.
23+
showbooks();
24+
25+
// reset all input fields.
26+
clearInputs();
27+
} else {
28+
alert("Please fill in all fields correctly.");
29+
}
30+
}
31+
32+
function showbooks() {
33+
const booksDiv = books.map(
34+
(book, index) => `<h1>book Number: ${index + 1}</h1>
35+
<p><strong>Book Name: </strong>${book.name}</p>
36+
<p><strong>Author Name:</strong> ${book.authorName}</p>
37+
<p><strong>Book Description:</strong> ${book.bookDescription}</p>
38+
<p><strong>No. of Pages:</strong> ${book.pagesNumber} page(s)</p>`
39+
);
40+
41+
document.getElementById("books").innerHTML = booksDiv.join("");
42+
}
43+
44+
function clearInputs() {
45+
document.getElementById("bookName").value = "";
46+
document.getElementById("authorName").value = "";
47+
document.getElementById("bookDescription").value = "";
48+
document.getElementById("pagesNumber").value = "";
49+
}

0 commit comments

Comments
 (0)