Build a Library Management System Using html, css, and JavaScript (Source Code) By Faraz

3. Function showList(): This function is responsible for displaying the list of books even after a page reload. It retrieves stored book inputs from local storage and uses the Display class to display them in the UI.

4. Function deleteItem(index): This function deletes a book entry from the list. It retrieves stored book inputs from local storage, removes the selected entry based on the provided index, updates local storage, and then calls showList() to refresh the UI.

5. Event listener for form submit: An event listener is attached to the form with the ID mylibraryform. When the form is submitted, the formSubmit function is triggered.

• 
  Inside formSubmit, the values from the input fields are extracted.
  
• 
  An inputs object is created from the extracted values.
  
• 
  An instance of the Display class is created.
  
• 
  The input is validated using the validate method, and then checked for existing issuance using the checkIssue method.
  
• 
  If validation passes and the book is not already issued, the input is added to the listArray, which is then updated in local storage and displayed using the Display class. A success alert is also shown.
  
• 
  If the book is already issued, an alert is shown indicating the issuing user.
  
• 
  If validation fails, a failure alert is shown.
  

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

// getting input from input areas -->

function inputs(userName, bookName, type) {
this.userName = userName;
this.bookName = bookName;
this.type = type;
}

class Display {
constructor() {}
add(arrayInputs) {
let tableBody = document.getElementById("table-body");
let today = new Date().toLocaleDateString();
let htmltobeadded = "";
for (let i = 0; i < arrayInputs.length; i++) {
htmltobeadded += `








`;
}
tableBody.innerHTML = htmltobeadded;
}
clear() {
let myForm = document.getElementById("mylibraryform");
myForm.reset();
}
validate(inputs) {
if (inputs.userName == "" || inputs.bookName == "") {
return false;
} else return true;
}
alertuser(type, sub, massage) {
let alertuser = document.getElementById("alertuser");
let htmltobeaddedinalert = `

${type} alert-dismissible fade show" id="alert" role="alert" >
${sub} ${massage}


×

`;
alertuser.innerHTML += htmltobeaddedinalert;
setTimeout(() => {
alertuser.innerHTML = "";
}, 4000);
}

// check if the book is issued or not -->
checkIssue(listArray, o1) {
for (let i = 0; i < listArray.length; i++) {
if (listArray[i].bookName == o1.bookName) {
this.issuedUser = listArray[i].userName;
return 0;
}
}
return 1;
}
}

// Show BookList even after reload -->
function showList() {
let listItems = localStorage.getItem("listItems");
if (listItems == null) {
listArray = [];
} else {
listArray = JSON.parse(listItems);
}
new Display().add(listArray);
// console.log(listArray);
}
showList();

// Deleting List Item -->
function deleteItem(index) {
let listItems = localStorage.getItem("listItems");
if (listItems == null) {
listArray = [];
} else {
listArray = JSON.parse(listItems);
}
listArray.splice(index, 1);
localStorage.setItem("listItems", JSON.stringify(listArray));
showList();
}

// add submit finction to the form -->
const form = document.getElementById("mylibraryform");
form.addEventListener("submit", formSubmit);
function formSubmit(e) {
e.preventDefault();
let givenUserName = document.getElementById("User-Name").value;
let givenBookName = document.getElementById("Book-Name").value;
let givenType;
let checkFiction = document.getElementById("Fiction");
let checkPrograming = document.getElementById("Programing");
let checkcooking = document.getElementById("Cooking");
if (checkFiction.checked) {
givenType = checkFiction.value;
} else if (checkPrograming.checked) {
givenType = checkPrograming.value;
} else {
givenType = checkcooking.value;
}

let o1 = new inputs(givenUserName, givenBookName, givenType);

let displayObj = new Display();
if (displayObj.validate(o1) && displayObj.checkIssue(listArray, o1) == 1) {
let listItems = localStorage.getItem("listItems");
if (listItems == null) {
listArray = [];
} else {
listArray = JSON.parse(listItems);
}
listArray.push(o1);
localStorage.setItem("listItems", JSON.stringify(listArray));
// console.log(listArray.length);

new Display().add(listArray);
displayObj.clear();
displayObj.alertuser("success", "Success", "Book is issued");
} else if (displayObj.checkIssue(listArray, o1) == 0) {
let issuedUser =
displayObj.alertuser(
"danger",
"Oops!",
`Book is already issued by ${displayObj.issuedUser}`
);
displayObj.clear();
} else {
displayObj.alertuser("danger", "Oops!", "Book is not issued");
displayObj.clear();
}
}
Copy

${i + 1}

${today}

${arrayInputs[i].userName}

${arrayInputs[i].bookName}

${arrayInputs[i].type}

Delete