Es6 branch

.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb-base"],
+  "rules": {
+    "no-shadow": "off",
+    "no-param-reassign": "off",
+    "eol-last": "off",
+    "no-use-before-define": ["error", { "variables": false, "classes": false }],
+    "max-classes-per-file": "off",
+    "import/extensions": [
+      1,
+      {
+        "js": "always",
+        "json": "always"
+      }
+    ]
+  },
+  "ignorePatterns": ["dist/", "build/"]
+}

.github/workflows/linters.yml

@@ -0,0 +1,56 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/[email protected]
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev [email protected]
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev [email protected] [email protected] [email protected] [email protected]
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.hintrc

@@ -0,0 +1,18 @@
+{
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**", "!.git/**", "!node_modules/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": [
+    "button-type",
+    "disown-opener",
+    "html-checker",
+    "meta-charset-utf-8",
+    "meta-viewport",
+    "no-inline-styles:error"
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen"
+        ]
+      }
+    ]
+  },
+  "csstree/validator": true,
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
+}

README.md

@@ -0,0 +1,52 @@
+# Awesome books V2
+
+> The project in nutshell is a list that can be used to note any books that were read by the user, the list stays as long as the user keeps it because books are stored in the borwser local storage, and deletion function is applied as well.
+
+## Built With
+
+- HTML
+- CSS
+- ES6
+- Linters
+
+## Project Link on Github pages
+
+https://github.com/z4cope/AwesomeBooks-es6
+
+## Getting Started
+
+To get a local copy up and running follow these simple example steps.
+
+### Prerequisites
+
+- You must have a code compiler installed on your machine such as (VS code or Atom).
+
+### Setup
+
+- Open you code editor.
+- Press cmd + shift + P and type gitclone and choose the first option.
+- Paste the repo link inside the field and press enter.
+
+## Author
+
+- GitHub: [@githubhandle](https://github.com/z4cope)
+- Twitter: [@twitterhandle](https://twitter.com/mokhaledev)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/mohamed-khaled-10138a1b7/)
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](https://github.com/z4cope/AwesomeBooks-es6/issues).
+
+## Show your support
+
+Give a ⭐️ if you like this project!
+
+## Acknowledgments
+
+- Microverse assesments.
+
+## 📝 License
+
+You can freely use this project for ethical use and educational purposes.

style.css → index.css

@@ -44,6 +44,7 @@ header nav .nav-list {
 .nav-list li {
   border-right: 1px solid #000;
   padding-right: 1rem;
+  cursor: pointer;
 }
 
 .nav-list li:last-child {

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./index.css" />
     <title>Awesome books</title>
   </head>
   <body>

index.js

@@ -1,27 +1,26 @@
 // Render of the books in the DOM
-import BooksInDom from "./modules/renderBooksFromDom.js";
+import BooksInDom from './modules/renderBooksFromDom.js';
 // Add Books to Ui
-import addBooksToUi from "./modules/addBooksToUi.js";
+import addBooksToUi from './modules/addBooksToUi.js';
 // Getting & setting books from & to local storage
-import BooksAtLocalStorage from "./modules/booksAtLs.js";
+import BooksAtLocalStorage from './modules/booksAtLs.js'; // eslint-disable-line no-unused-vars
 // Books removal funtion from ui & localstorage
-import removeBook from "./modules/removeBook.js";
+import removeBook from './modules/removeBook.js';
 // One page navigation
-import onePageNavigation from "./modules/onePageNavigation.js";
+import onePageNavigation from './modules/onePageNavigation.js';
 // //Get Date & time
-import getDate from "./modules/getDate.js";
-
+import getDate from './modules/getDate.js';
 // Invoking books representaion method
-document.addEventListener("DOMContentLoaded", BooksInDom.displayBooks);
+document.addEventListener('DOMContentLoaded', BooksInDom.displayBooks);
 
 // Add books in the Ui
 addBooksToUi();
 
 // Remove a book from the list
 removeBook();
 
-//Invoke one page navigation funciton
+// Invoke one page navigation funciton
 onePageNavigation();
 
-//Get date & time
+// Get date & time
 getDate();

modules/addBooksToUi.js

@@ -1,14 +1,14 @@
-import BooksInDom from "./renderBooksFromDom.js";
-import BooksAtLocalStorage from "./booksAtLs.js";
+import BooksInDom from './renderBooksFromDom.js';
+import BooksAtLocalStorage from './booksAtLs.js';
 
 const addBooksToUi = () => {
-  const titleField = document.querySelector(".title");
-  const autherField = document.querySelector(".auther");
-  const addBookBtn = document.querySelector(".add-book");
-  const successMsg = document.querySelector(".book-added");
-  const errorMsg = document.querySelector(".error-msg");
+  const titleField = document.querySelector('.title');
+  const autherField = document.querySelector('.auther');
+  const addBookBtn = document.querySelector('.add-book');
+  const successMsg = document.querySelector('.book-added');
+  const errorMsg = document.querySelector('.error-msg');
 
-  addBookBtn.addEventListener("click", () => {
+  addBookBtn.addEventListener('click', () => {
     // Single book class
     class Book {
       constructor(id, title, auther) {
@@ -17,26 +17,26 @@ const addBooksToUi = () => {
         this.auther = auther;
       }
     }
-    if (titleField.value !== "" && autherField.value !== "") {
+    if (titleField.value !== '' && autherField.value !== '') {
       const newBook = new Book(Date.now(), titleField.value, autherField.value);
       BooksInDom.addBook(newBook);
       // reset fields values
-      titleField.value = "";
-      autherField.value = "";
+      titleField.value = '';
+      autherField.value = '';
       // Success & failer messages on adding books
-      successMsg.classList.add("show-message");
+      successMsg.classList.add('show-message');
       window.setTimeout(() => {
-        successMsg.classList.remove("show-message");
+        successMsg.classList.remove('show-message');
       }, 2000);
-      errorMsg.classList.remove("show-message");
+      errorMsg.classList.remove('show-message');
       // Add book to local storage
       BooksAtLocalStorage.addBooksToLs(newBook);
     } else {
-      errorMsg.classList.add("show-message");
+      errorMsg.classList.add('show-message');
       window.setTimeout(() => {
-        errorMsg.classList.remove("show-message");
+        errorMsg.classList.remove('show-message');
       }, 2000);
-      successMsg.classList.remove("show-message");
+      successMsg.classList.remove('show-message');
     }
   });
 };

modules/booksAtLs.js

@@ -1,18 +1,18 @@
 class BooksAtLocalStorage {
   static getBooksFromLs() {
     let lsBooksArr;
-    if (localStorage.getItem("books-list") === null) {
+    if (localStorage.getItem('books-list') === null) {
       lsBooksArr = [];
     } else {
-      lsBooksArr = JSON.parse(localStorage.getItem("books-list"));
+      lsBooksArr = JSON.parse(localStorage.getItem('books-list'));
     }
     return lsBooksArr;
   }
 
   static addBooksToLs(book) {
     const booksList = BooksAtLocalStorage.getBooksFromLs();
     booksList.push(book);
-    localStorage.setItem("books-list", JSON.stringify(booksList));
+    localStorage.setItem('books-list', JSON.stringify(booksList));
   }
 
   static removeBookFromLs(bookId) {
@@ -22,7 +22,7 @@ class BooksAtLocalStorage {
         booksList.splice(index, 1);
       }
     });
-    localStorage.setItem("books-list", JSON.stringify(booksList));
+    localStorage.setItem('books-list', JSON.stringify(booksList));
   }
 }
 

modules/getDate.js

@@ -1,7 +1,7 @@
-import { DateTime } from "../node_modules/luxon/src/luxon.js";
+import { DateTime } from '../node_modules/luxon/src/luxon.js';
 
 const getDate = () => {
-  const dateWrapper = document.querySelector(".date");
+  const dateWrapper = document.querySelector('.date');
   const date = DateTime.now();
   const { year } = date;
   const { month } = date;

modules/onePageNavigation.js

@@ -1,25 +1,25 @@
 const onePageNavigation = () => {
-  const navList = document.querySelector(".nav-list");
+  const navList = document.querySelector('.nav-list');
 
-  navList.addEventListener("click", (e) => {
-    const navElements = document.querySelectorAll(".active");
+  navList.addEventListener('click', (e) => {
+    const navElements = document.querySelectorAll('.active');
     navElements.forEach((element) => {
-      element.classList.remove("active");
+      element.classList.remove('active');
     });
-    e.target.className += " active";
+    e.target.className += ' active';
   });
 
-  const navPills = document.querySelectorAll(".nav-pill");
-  const slides = document.querySelectorAll(".display-item");
+  const navPills = document.querySelectorAll('.nav-pill');
+  const slides = document.querySelectorAll('.display-item');
 
   navPills.forEach((pill) => {
-    pill.addEventListener("click", (e) => {
+    pill.addEventListener('click', (e) => {
       const tar = e.target.classList;
       slides.forEach((slide) => {
         if (slide.classList[1] === tar[1]) {
-          slide.classList.remove("hidden");
+          slide.classList.remove('hidden');
         } else {
-          slide.classList.add("hidden");
+          slide.classList.add('hidden');
         }
       });
     });

modules/removeBook.js

@@ -1,11 +1,11 @@
-import BooksInDom from "./renderBooksFromDom.js";
-import BooksAtLocalStorage from "./booksAtLs.js";
+import BooksInDom from './renderBooksFromDom.js';
+import BooksAtLocalStorage from './booksAtLs.js';
 
 const removeBook = () => {
-  const booksWrapper = document.querySelector(".books-wrapper");
+  const booksWrapper = document.querySelector('.books-wrapper');
 
-  booksWrapper.addEventListener("click", (e) => {
-    //Remove book from DOM
+  booksWrapper.addEventListener('click', (e) => {
+    // Remove book from DOM
     BooksInDom.removeBook(e.target);
     // Remove book from local storage
     BooksAtLocalStorage.removeBookFromLs(e.target.parentElement.dataset.id);