Awesome Book: Using modules with ES6

.eslintrc.json

@@ -12,6 +12,7 @@
   "extends": ["airbnb-base"],
   "rules": {
     // "linebreak-style": ["error", "linux"],
+    "max-len": ["error", { "code": 500 }],
     "max-classes-per-file": "off",
     "no-shadow": "off",
     "no-param-reassign": "off",

css/index.css

@@ -39,14 +39,14 @@ form input {
 
 button.btn-add {
   font-size: 1rem;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
 }
 
 div.books-detail div {
   display: flex;
-  justify-content: space-between;
-  background-color: #dcdcdc;
   padding: 0.5rem;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 div.books-detail {
@@ -148,4 +148,26 @@ ul#contact-info {
   flex-direction: column;
   gap: 1rem;
   list-style-type: disc;
+  margin-left: 1rem;
+}
+
+button.btn-remove {
+  width: fit-content;
+}
+
+p.book-position {
+  word-break: break-all;
+  background-color: #dcdcdc;
+}
+
+@media screen and (min-width: 768px) {
+  div.books-detail div {
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  button.btn-remove {
+    height: auto;
+  }
 }

index.html

@@ -71,6 +71,10 @@ <h2 id="contact-title">Contact Information</h2>
       <div><p>&#169; Copyright 2022</p></div>
     </footer>
 
-    <script src="js/index.js"></script>
+    <script type="module" src="js/index.js"></script>
+    <script type="module" src="modules/book.js"></script>
+    <script type="module" src="modules/localStore.js"></script>
+    <script type="module" src="modules/ui.js"></script>
+    <script type="module" src="modules/menuNav.js"></script>
   </body>
 </html>

js/index.js

@@ -1,86 +1,41 @@
 'use script';
 
+import Book from '../modules/book.js';
+import UI from '../modules/ui.js';
+import LocalStore from '../modules/localStore.js';
+import menuNav from '../modules/menuNav.js';
+import { DateTime } from '../modules/luxon.js';
+
 // "max-classes-per-file": "off"
 
-// DECLARE VARIABLES
-const titleInput = document.querySelector('.title-book-add');
-const authorInput = document.querySelector('.author-book-add');
-const btnAdd = document.querySelector('.btn-add');
+// DECLARE GLOBAL VARIABLES
+
 const bookDisplay = document.querySelector('.books-display');
-const bookDetail = document.querySelector('.books-detail');
 const errorMsg = document.querySelector('.error-message');
-const navList = document.querySelector('#nav-list');
-const navAdd = document.querySelector('#nav-add');
-const navContact = document.querySelector('#nav-contact');
-const page = document.querySelector('.section');
 const form = document.querySelector('.add-book-form');
-const contact = document.querySelector('#contact');
-const timeInfo = document.querySelector('#time-info');
-let newId = 0;
-
-// DECLARE MAIN CLASS
-class Book {
-  constructor(title, author, id) {
-    this.title = title;
-    this.author = author;
-    this.id = id;
-  }
-}
-
-// LOCAL STORAGE
-
-class LocalStore {
-  static getBooks() {
-    let books;
-    const localBook = localStorage.getItem('local');
-    if (!localBook) {
-      books = [];
-    } else {
-      books = JSON.parse(localBook);
-    }
-    return books;
-  }
-
-  static addBooks(newBook) {
-    const books = LocalStore.getBooks();
-    if (books) {
-      books.push(newBook);
-      localStorage.setItem('local', JSON.stringify(books));
-    }
-  }
-
-  // static deleteBooks()
-}
-
-class UI {
-  static showBooks() {
-    const books = LocalStore.getBooks();
-    books.forEach((newBook) => {
-      UI.addBookToList(newBook);
-    });
-  }
+const titleInput = document.querySelector('.title-book-add');
+const authorInput = document.querySelector('.author-book-add');
+const btnAdd = document.querySelector('.btn-add');
 
-  static addBookToList(newBook) {
-    newBook.id = newId;
-    const bookInfo = `
-      <div id="${newId}">
-        <p class="book-position">"<span class="">${newBook.title}</span>" by <span class="">${newBook.author}</span></p>
-        <button id="${newId}" class="btn-remove">Remove</button>
-      </div>
-    `;
-    bookDetail.innerHTML += bookInfo;
-    newId += 1;
-  }
+// CLICK ON REMOVE BUTTON
 
-  static deleteBookFromList(e) {
-    e.parentElement.remove();
+bookDisplay.addEventListener('click', (e) => {
+  e.preventDefault();
+  if (e.target.className === 'btn-remove') {
+    const { id } = e.target;
+    let books = LocalStore.getBooks();
+    books = books.filter((bk) => JSON.stringify(bk.id) !== id);
+    localStorage.setItem('local', JSON.stringify(books)); // LOCAL STORAGE
+    UI.deleteBookFromList(e.target);
+    // window.location.reload();
   }
-}
+});
 
-// ADD BOOKS
+// CLICK ON ADD BUTTON
 
 btnAdd.addEventListener('click', (e) => {
   e.preventDefault();
+  // window.location.reload();
   const books = LocalStore.getBooks();
   const newTitle = titleInput.value;
   const newAuthor = authorInput.value;
@@ -102,73 +57,16 @@ btnAdd.addEventListener('click', (e) => {
   form.reset();
 });
 
-// REMOVE BOOKS
-
-bookDisplay.addEventListener('click', (e) => {
-  e.preventDefault();
-  if (e.target.className === 'btn-remove') {
-    const { id } = e.target;
-    let books = LocalStore.getBooks();
-    books = books.filter((bk) => JSON.stringify(bk.id) !== id);
-    localStorage.setItem('local', JSON.stringify(books)); // LOCAL STORAGE
-    UI.deleteBookFromList(e.target);
-  }
-});
-
-// MENU NAVIGATION
-
-navList.addEventListener('click', () => {
-  page.style.display = 'block';
-  form.style.display = 'none';
-  contact.style.display = 'none';
-});
-
-navAdd.addEventListener('click', () => {
-  page.style.display = 'none';
-  form.style.display = 'block';
-  contact.style.display = 'none';
-});
+// GENERAL
 
-navContact.addEventListener('click', () => {
-  page.style.display = 'none';
-  form.style.display = 'none';
-  contact.style.display = 'block';
-});
+window.addEventListener('DOMContentLoaded', UI.showBooks);
+window.addEventListener('DOMContentLoaded', menuNav);
 
 // TIME DISPLAY
-function timeDisplay() {
-  const myDate = new Date();
-
-  const daysList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-  const monthsList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'August', 'October', 'November', 'December'];
 
-  const date = myDate.getDate();
-  const month = monthsList[myDate.getMonth()];
-  const year = myDate.getFullYear();
-  const day = daysList[myDate.getDay()];
-
-  const today = `${day}, ${month} ${date}, ${year},`;
-
-  let amOrPm;
-  const twelveHours = () => {
-    if (myDate.getHours() > 12) {
-      amOrPm = 'PM';
-      const twentyFourHourTime = myDate.getHours();
-      const conversion = twentyFourHourTime - 12;
-      return `${conversion}`;
-    }
-    amOrPm = 'AM';
-    return `${myDate.getHours()}`;
-  };
-  const hours = twelveHours();
-  const minutes = myDate.getMinutes();
-
-  const currentTime = `${hours}:${minutes} ${amOrPm}`;
-
-  timeInfo.innerHTML = `${today} ${currentTime}`;
-}
-
-// GENERAL
+const timeDisplay = () => {
+  const timeInfo = document.querySelector('#time-info');
+  timeInfo.innerHTML = `${DateTime.now().toLocaleString(DateTime.DATETIME_MED)}`;
+};
 
-document.addEventListener('DOMContentLoaded', UI.showBooks);
-document.addEventListener('DOMContentLoaded', timeDisplay);
+window.addEventListener('DOMContentLoaded', timeDisplay);

modules/book.js

@@ -0,0 +1,9 @@
+class Book {
+  constructor(title, author, id) {
+    this.title = title;
+    this.author = author;
+    this.id = id;
+  }
+}
+
+export default Book;

modules/localStore.js

@@ -0,0 +1,24 @@
+class LocalStore {
+  static getBooks = () => {
+    let books;
+    const localBook = localStorage.getItem('local');
+    if (!localBook) {
+      books = [];
+    } else {
+      books = JSON.parse(localBook);
+    }
+    return books;
+  }
+
+  static addBooks = (newBook) => {
+    const books = LocalStore.getBooks();
+    if (books) {
+      books.push(newBook);
+      localStorage.setItem('local', JSON.stringify(books));
+    }
+  }
+
+  // static deleteBooks()
+}
+
+export default LocalStore;