MERN Notes:

CRUD – Create, Read, Update, Delete Functions.

Catalogue website example code, followed by explanation:

bookStore.js:

// Function to check if code has run before

function hasCodeRunBefore() {
return sessionStorage.getItem('hasCodeRunBefore') !== null;
}

// Function to initialize session storage

function initializeSessionStorage() {
let bookCatalog = [];
sessionStorage.setItem('bookCatalog', JSON.stringify(bookCatalog));
sessionStorage.setItem('hasCodeRunBefore', true);
}

// Function to add a book to the catalog

function addBook() {
// Prompt user for book details
let title = document.getElementById('title').value;
let author = document.getElementById('author').value;
let genre = document.getElementById('genre').value;
let reviews = document.getElementById('reviews').value;

// Create book object

let book = {
title: title,
author: author,
genre: genre,
reviews: reviews
};

// Get existing book catalog from session storage

let bookCatalog = JSON.parse(sessionStorage.getItem('bookCatalog'));

// Add book object to book catalog

bookCatalog.push(book);

// Store updated book catalog in session storage

sessionStorage.setItem('bookCatalog', JSON.stringify(bookCatalog));

// Clear input fields

document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('genre').value = '';
document.getElementById('reviews').value = '';

// Reload the page to display the updated book catalog

 displayBookCatalog();
}

// Function to remove a book from the catalog

function removeBook(index) {
// Get book catalog from session storage
let bookCatalog = JSON.parse(sessionStorage.getItem('bookCatalog'));

// Remove book at the specified index from the book catalog

bookCatalog.splice(index, 1);

// Store updated book catalog in session storage

sessionStorage.setItem('bookCatalog', JSON.stringify(bookCatalog));

// Reload the page to display the updated book catalog

displayBookCatalog();
}

// Function to edit a book in the catalog

function editBook(index) {
// Get book catalog from session storage
let bookCatalog = JSON.parse(sessionStorage.getItem('bookCatalog'));

// Get the book object at the specified index

let book = bookCatalog[index];

// Prompt user for updated book details

let title = prompt('Enter updated book title:', book.title);
let author = prompt('Enter updated book author:', book.author);
let genre = prompt('Enter updated book genre:', book.genre);
let reviews = prompt('Enter updated book reviews:', book.reviews);

// Update the book object with the new values

book.title = title;
book.author = author;
book.genre = genre;
book.reviews = reviews;

// Store updated book catalog in session storage

sessionStorage.setItem('bookCatalog', JSON.stringify(bookCatalog));

// Reload the page to display the updated book catalog

displayBookCatalog();
}

// Function to display the book catalog on the webpage

function displayBookCatalog() {
// Get book catalog from session storage
let bookCatalog = JSON.parse(sessionStorage.getItem('bookCatalog'));

// Get the element to display the book catalog

let bookList = document.getElementById('bookList');
 // Clear any existing content in the book list element
bookList.innerHTML = '';

// Loop through each book in the catalog and create list items to display them
bookCatalog.forEach((book, index) => {
let listItem = document.createElement('li');

// Create a span for each book property and append it to the list item
Object.keys(book).forEach(key => {
let span = document.createElement('span');
span.textContent = key + ': ' + book[key];
listItem.appendChild(span);
});

// Create buttons for removing and editing the book

let removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.addEventListener('click', function() {
removeBook(index);
});

let editButton = document.createElement('button');

editButton.textContent = 'Edit';
editButton.addEventListener('click', function() {
editBook(index);
});

listItem.appendChild(removeButton);
listItem.appendChild(editButton);

// Append the list item to the book list element

bookList.appendChild(listItem);
});
}

// Function to handle page load

function myLoad() {
if (!hasCodeRunBefore()) {
initializeSessionStorage();
}

displayBookCatalog();
}

// Call the myLoad function when the page finishes loading

window.addEventListener('load', myLoad);

//EOF
bookStore.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<h2>Book Catalog</h2>

<div class="input-container">
<label for="title">Title:</label>
<input type="text" id="title">
</div>
<div class="input-container">
<label for="author">Author:</label>
<input type="text" id="author">
</div>
<div class="input-container">
<label for="genre">Genre:</label>
<input type="text" id="genre">
</div>
<div class="input-container">
<label for="reviews">Reviews:</label>
<input type="text" id="reviews">
</div>
<button onclick="addBook()">Add Book</button>

<ul id="bookList"></ul>

<script src="bookStore.js"></script>
</body>
</html>

Explanation:

1. `hasCodeRunBefore()`: This function checks if the code has run before by looking for a specific
value in the browser's session storage. If the value exists, it means the code has run before.

2. `initializeSessionStorage()`: This function initializes the session storage by creating an empty

array called `bookCatalog` and storing it in the session storage. It also sets a value to indicate that
the code has run before.

3. `addBook()`: This function adds a book to the catalog. It collects the book details entered by the
user (title, author, genre, and reviews) from input fields on the webpage. It creates a book object
using the collected details and adds it to the existing book catalog stored in the session storage. The
input fields are then cleared, and the webpage is reloaded to display the updated book catalog.
4. `removeBook(index)`: This function removes a book from the catalog based on the specified
index. It retrieves the book catalog from the session storage, removes the book at the given index,
updates the book catalog in the session storage, and reloads the webpage to display the updated
book catalog.

5. `editBook(index)`: This function allows the user to edit a book in the catalog. It retrieves the
book catalog from the session storage and gets the book object at the specified index. It prompts the
user to enter updated book details (title, author, genre, and reviews). It then updates the book object
with the new values, stores the updated book catalog in the session storage, and reloads the
webpage to display the updated book catalog.

6. `displayBookCatalog()`: This function displays the book catalog on the webpage. It retrieves the
book catalog from the session storage and gets the HTML element that will contain the book list. It
clears any existing content in the book list element. It loops through each book in the catalog,
creates list items for each book with their respective details, and adds buttons for removing and
editing the books. Finally, it appends the list items to the book list element.

7. `myLoad()`: This function is called when the page finishes loading. It checks if the code has run
before by calling `hasCodeRunBefore()`. If it hasn't, it initializes the session storage by calling
`initializeSessionStorage()`. Then, it calls `displayBookCatalog()` to show the book catalog on the
webpage.

8. `window.addEventListener('load', myLoad)`: This code adds an event listener to the `load` event
of the window object. When the page finishes loading, it triggers the `myLoad()` function to
initialize and display the book catalog.

In summary, this code allows users to add, remove, and edit books in a catalog stored in the
browser's session storage. It dynamically displays the catalog on the webpage, providing a user-
friendly interface for managing and viewing book information.

Certainly! Here's an explanation of the variables, methods, and functions in the provided code:

Variables:
- `bookCatalog`: It represents an array that stores the collection of books in the catalog.
- `title`, `author`, `genre`, `reviews`: These variables store the values entered by the user in the
corresponding input fields on the webpage.

Methods:
- `sessionStorage.getItem('hasCodeRunBefore')`: It retrieves the value associated with the key
'hasCodeRunBefore' from the session storage.
- `sessionStorage.setItem('bookCatalog', JSON.stringify(bookCatalog))`: It stores the `bookCatalog`
array in the session storage by converting it to a string using JSON.stringify().
- `JSON.parse(sessionStorage.getItem('bookCatalog'))`: It retrieves the `bookCatalog` array from
the session storage by parsing the stored string back into an array using JSON.parse().

Functions:
- `hasCodeRunBefore()`: It checks if the code has run before by returning a boolean value based on
whether the 'hasCodeRunBefore' value is present in the session storage or not.
- `initializeSessionStorage()`: It initializes the session storage by setting the 'bookCatalog' key to an
empty array and setting the 'hasCodeRunBefore' key to `true`.
- `addBook()`: It adds a book to the catalog. It retrieves the book details entered by the user from
the input fields and creates a book object. It then adds the book object to the `bookCatalog` array,
updates the session storage with the updated `bookCatalog`, clears the input fields, and reloads the
page to display the updated book catalog.
- `removeBook(index)`: It removes a book from the catalog based on the specified index. It
retrieves the `bookCatalog` array from the session storage, removes the book at the given index,
updates the session storage with the updated `bookCatalog`, and reloads the page to display the
updated book catalog.
- `editBook(index)`: It allows the user to edit a book in the catalog. It retrieves the `bookCatalog`
array from the session storage, gets the book object at the specified index, prompts the user for
updated book details, updates the book object with the new values, updates the session storage with
the updated `bookCatalog`, and reloads the page to display the updated book catalog.
- `displayBookCatalog()`: It displays the book catalog on the webpage. It retrieves the
`bookCatalog` array from the session storage, gets the HTML element that will contain the book
list, clears any existing content in the element, loops through each book in the catalog, creates list
items with the book details, adds buttons for removing and editing the books, and appends the list
items to the book list element.
- `myLoad()`: It is called when the page finishes loading. It checks if the code has run before by
calling `hasCodeRunBefore()`. If it hasn't, it initializes the session storage by calling
`initializeSessionStorage()`. Then, it calls `displayBookCatalog()` to show the book catalog on the
webpage.

Event Listener:
- `window.addEventListener('load', myLoad)`: It adds an event listener to the `load` event of the
window object. When the page finishes loading, it triggers the `myLoad()` function to initialize and
display the book catalog.

Overall, the code allows users to add, remove, and edit books in a catalog using session storage to
store the data. It provides functions to interact with the session storage, manipulate the book
catalog, and display the catalog on the webpage.

Classified as individual CRUD operations:

Sure! Here's the classification of the functions mentioned in my previous response:

Create:
- initializeSessionStorage(): Initializes the session storage by creating an empty book catalog array
and setting the 'hasCodeRunBefore' flag.

Read:
- hasCodeRunBefore(): Checks if the code has run before by retrieving the value of the
'hasCodeRunBefore' flag from the session storage.
- displayBookCatalog(): Retrieves the book catalog from the session storage and displays it on the
webpage.

Update:
- addBook(): Prompts the user for book details, creates a book object with the provided information,
adds the book object to the book catalog in the session storage, and reloads the page to display the
updated book catalog.
- editBook(): Prompts the user to enter updated book details for a specific book in the catalog,
updates the book object with the new values, stores the updated book catalog in the session storage,
and reloads the page to display the updated book catalog.

Delete:
- removeBook(): Removes a book from the catalog at the specified index, updates the book catalog
in the session storage, and reloads the page to display the updated book catalog.

Other:
- myLoad(): Handles the page load event, checks if the code has run before, and calls the necessary
functions to initialize the session storage and display the book catalog.

Please note that the functions are categorized based on their primary purpose and their impact on
the book catalog in the session storage.