Fix errors and configure linters

Mwapsam · Jan 4, 2022 · ca36a66 · ca36a66
1 parent e5c4d42
commit ca36a66
Show file tree

Hide file tree

Showing 9 changed files with 8,241 additions and 61 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,25 @@
+{
+    "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",
+      "import/extensions": [ 1, {
+        "js": "always", "json": "always"
+      }]
+    },
+    "ignorePatterns": [
+      "dist/",
+      "build/"
+    ]
+  }
diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml
@@ -0,0 +1,62 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/cli@0.7.x
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev hint@6.x
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.hintrc b/.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"
+    ]
+  }
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,10 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+    "rules": {
+      "at-rule-no-unknown": null,
+      "scss/at-rule-no-unknown": true,
+      "csstree/validator": true
+    },
+    "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
+  }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,53 +1,76 @@
-const container = document.getElementById('booksList');
-const title = document.getElementById('title');
-const author = document.getElementById('author');
-
-let books = [];
-
-function data() {
-  books.forEach((book) => {
-    container.innerHTML += `
-        <p>${book.author}</p>
-        <p>${book.title}</p>
-        <input type="button" value="Remove" id="${book.id}" onClick="removeItem('${book.id}')"/>
-        <hr>
-        `;
-  });
+const titleInput = document.querySelector('#book_title');
+const authorInput = document.querySelector('#book_author');
+const addBookBtn = document.querySelector('#add_book');
+const addForm = document.querySelector('.addBookForm');
+const bookList = document.querySelector('.list_present');
+
+let booksData = [];
+
+function addBook() {
+  const titleValue = titleInput.value;
+  const authorValue = authorInput.value;
+
+  if (titleValue !== '' && authorValue !== '') {
+    if (booksData.length === 0) {
+      bookList.innerHTML = '';
+    }
+
+    const bookId = Math.random().toString(36).slice(2);
+    booksData.unshift({
+      id: bookId,
+      title: titleValue,
+      author: authorValue,
+    });
+
+    localStorage.setItem('bookData', JSON.stringify(booksData));
+    addForm.reset();
+
+    bookList.innerHTML = `<li>
+                            <h3> ${titleValue} </h3>
+                            <p>by - ${authorValue} </p>
+                            <input type="button" value="Remove" id="${bookId}" class="removeBook" onClick="removeBook('${bookId}')"/>
+                        </li>${bookList.innerHTML}`;
+  }
 }
 
-function addItem() {
-  const bookId = Math.random().toString(36).slice(2);
-  books = JSON.parse(localStorage.getItem('books'));
-  const inputForm = {
-    Id: bookId,
-    title: title.value,
-    author: author.value,
-  };
-  books.push(inputForm);
-  localStorage.setItem('books', JSON.stringify(books));
-  data();
+addBookBtn.addEventListener('click', addBook);
+
+function buildBookLists(book) {
+  const bookData = `<li>
+                          <h3> ${book.title} </h3>
+                          <p>by - ${book.author} </p>
+                          <input type="button" value="Remove" id="${book.id}" onClick="removeBook('${book.id}')"/>
+                      </li>`;
+  return bookData;
 }
 
-const formData = document.querySelectorAll('input');
-for (let form of formData) {
-  form.addEventListener('change', () => {
-    addItem();
-  });
+function readBookData() {
+  let booksBuild = '';
+  if (booksData.length > 0) {
+    booksData.forEach((books) => {
+      booksBuild += buildBookLists(books);
+    });
+  } else {
+    booksBuild = '<li><h3>No books available yet!</h3></li>';
+  }
+
+  bookList.innerHTML = booksBuild;
 }
 
-function removeItem(bookId) {
-  books = JSON.parse(localStorage.getItem('books'));
-  books = books.filter((e) => e.id !== bookId);
-  console.log(books);
-  localStorage.setItem('books', JSON.stringify(books));
+// eslint-disable-next-line no-unused-vars
+function removeBook(bookId) {
+  booksData = booksData.filter((books) => books.id !== bookId);
+  localStorage.setItem('bookData', JSON.stringify(booksData));
+  readBookData();
 }
+// Fetch data from localstorage
 
-const getFormData = JSON.parse(localStorage.getItem('books'));
-function getFormDataStorage() {
-  if (getFormData !== null) {
-    books = getFormData;
-    data();
+const localStorageData = JSON.parse(localStorage.getItem('bookData'));
+function getLocalStorageData() {
+  if (localStorageData !== null) {
+    booksData = localStorageData;
+    readBookData();
   }
 }
 
-window.onresize = getFormDataStorage();
+window.onresize = getLocalStorageData();
diff --git a/index.html b/index.html
@@ -7,25 +7,25 @@
     <title>Awesome Books</title>
   </head>
   <body>
-    <section>
-      <div id="booksList">
-        <h1>Awesome Books</h1>
-      </div>
-      <div>
-        <form action="">
-          <label for="title"></label><br />
-          <input type="text" id="title" name="title" value="Title" /><br />
-          <label for="auther"></label><br />
-          <input
-            type="text"
-            id="author"
-            name="author"
-            value="Author"
-          /><br /><br />
-          <button id="submit" type="submit" onclick="addItem()">Add</button>
-        </form>
-      </div>
-    </section>
+    <h1>Awesome Books</h1>
+    <ul class="list_present">
+      <li>
+        <h3>No books available yet!</h3>
+      </li>
+    </ul>
+    <form class="addBookForm">
+      <ul>
+        <li>
+          <input type="text" id="book_title" placeholder="Tile" />
+        </li>
+        <li>
+          <input type="text" id="book_author" placeholder="Author" />
+        </li>
+        <li>
+          <input type="button" value="Add" id="add_book" />
+        </li>
+      </ul>
+    </form>
     <script src="assets/js/main.js"></script>
   </body>
 </html>