implemented local storage

codex-scribe · Jan 2, 2023 · 02005cd · 02005cd
1 parent 81cd519
commit 02005cd
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 0 deletions.
diff --git a/callstack.html b/callstack.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My Booklist App</title>
+</head>
+<body>
+    <script src="callstack.js"></script>
+</body>
diff --git a/callstack.js b/callstack.js
@@ -0,0 +1,15 @@
+function first() {
+    console.log("This is first");
+    second()   
+}
+
+function second() {
+    console.log("This is second");
+    third()
+}
+
+function third() {
+    console.log("This is third")
+}
+
+first();
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://bootswatch.com/5/journal/bootstrap.min.css">
+    <title>My Booklist App</title>
+</head>
+<body>
+    <div class="container mt-4">
+        <h1 class="display-4 text-center">
+            <i class="fas fa-book-open"></i>My <span class="text=primary">Book</span> List</h1>
+            <form id="book-form">
+                <div class="form-group">
+                    <label for="title">Title</label>
+                    <input type="text" id="title" class="form-control">
+                </div>
+                <div class="form-group">
+                    <label for="author">author</label>
+                    <input type="text" id="author" class="form-control">
+                </div>
+                <div class="form-group">
+                    <label for="isbn">ISBN</label>
+                    <input type="text" id="isbn" class="form-control">
+                </div>    
+                <input type="submit" value="Add Book" class="btn btn-primary btn-block mt-2">
+            </form>
+            <table class="table table-striped mt-5">
+                <thead>
+                    <tr>
+                        <th>Title</th>
+                        <th>Author</th>
+                        <th>ISBN</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody id="book-list"></tbody>
+            </table>
+    </div>
+
+    <script src="script.js"></script>
+    </body>
+</html>
diff --git a/new.html b/new.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,134 @@
+//Book Class: Represents a book
+class Book {
+    constructor(title, author, isbn) {
+        this.title = title;
+        this.author = author;
+        this.isbn = isbn;
+    }
+}
+//UI Class: Handle UI Tasks
+class UI {
+    static displayBooks() {
+
+        const books = Store.getBooks();
+
+        books.forEach((book) => UI.addBookToList(book));
+    }
+
+    static addBookToList(book) {
+        const list = document.querySelector("#book-list");
+
+        const row = document.createElement("tr");
+
+        row.innerHTML = `
+            <td>${book.title}</td>
+            <td>${book.author}</td>
+            <td>${book.isbn}</td>
+            <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>  
+        `;
+
+        list.appendChild(row);
+    }
+
+    static deleteBook(el) {
+        if(e.classList.contains("delete")) {
+            el.parentElement.parentElement.remove();
+
+        }
+    }
+
+    static showAlert(message, className) {
+        const div = document.createElement("div");
+        div.className = `alert alert-${className}`;
+        div.appendChild(document.createTextNode(message));
+        const container = document.querySelector(".container");
+        const form = document.querySelector("#book-form");
+        container.insertBefore(div, form);
+        //Vanish in 3 seconds
+        setTimeout(() => document.querySelector(".alert").remove(), 3000);
+    }
+
+    static clearFields() {
+        document.querySelector("#title").value="";
+        document.querySelector("#author").value="";
+        document.querySelector("#isbn").value="";
+    }
+
+}
+(
+//Store Class: handles storage
+class Store {
+    static getBooks() {
+        let books;
+        if(localStorage.getItem('books') === null) {
+            books = [];
+        } else {
+            books = JSON.parse(localStorage.getItem("books"));
+        }
+        return books;
+    }
+
+    static addBook(book) {
+        const books = Store.getBooks();
+
+        books.push(book);
+
+        localStorage.setItem("books", JSON.stringify(books));
+    }
+
+    static removeBook(isbn) {
+        const books = Store.getBooks();
+
+        books.forEach((book, index) => {
+            if (book.isbn === isbn) {
+                books.splice(index, 1);
+            }
+        });
+
+    localStorage.setItem("books", JSON.stringify(books));
+    }
+}
+
+//Event: display books
+document.addEventListener("DOMContentLoaded", UI.displayBooks);
+
+//Event: add a book
+document.querySelector("#book-form").addEventListener("submit", (e) => {
+    //Prevent actual submit
+    e.preventDefault();
+    //Get form values
+    const title = document.querySelector("#title").value;
+    const author = document.querySelector("#author").value;
+    const isbn = document.querySelector("#isbn").value;
+
+    //Validate
+    if(title === "" || author === "" || isbn === "") {
+        UI.showAlert("Please fill in all fields", "danger");
+    } else {
+    //Instantiate book
+    const book = new Book(title, author, isbn);
+
+    //Add book to UI
+    UI.addBookToList(book);
+
+    //add book to store
+    Store.addBook(book);
+
+    //show success message
+    UI.showAlert("Book Added", "success");
+
+    //Clear fields
+    UI.clearFields();
+    }
+})
+
+//Event: remove a book
+document.querySelector("#book-list").addEventListener("click",(e) => {
+
+    //Remove book from UI
+    UI.deleteBook(e.target);
+    //Remove book from store
+    Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
+    //show success message
+    UI.showAlert("Book Removed", "success");
+})