AbuRayhaan · AbuRayhaan · Apr 18, 2022 · Apr 18, 2022
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/.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", "**/*.js", "**/*.jsx"]
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!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">
+    <link rel="stylesheet" href="./style.css">
+    <title>Favorite Books</title>
+</head>
+<body>
+    <main id="books">
+        <h2 class="fav-books">Awesome books</h2>
+        <ul id="books-list"> <!--
+            <p class="book-name"></p>
+            <p class="book author"></p>
+            <button type="button" class="remove">Remove</button>
+            -->
+        </ul>
+
+    </main>
+    <form class="form-books">
+        <input id="bookTitle" type="text"  placeholder="Title">
+        <input id="bookAuthor" type="text" placeholder="Author">
+        <span class="error-msg"></span>
+        <input type="submit" name="add" value="add" id="add-book">
+    </form>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,70 @@
+let books = [];
+const addButton = document.querySelector('#add-book');
+const bookList = document.querySelector('#books-list');
+
+const displayBooks = (id, title, author) => {
+  const li = document.createElement('li');
+  const br = document.createElement('br');
+  const removeButton = document.createElement('button');
+  removeButton.textContent = 'Remove';
+
+  li.innerHTML = `
+      <p>${title}</p>
+      <p>${author}</p>
+      <br>
+      <div class="hr"></div>
+    `;
+  li.insertBefore(removeButton, li.lastElementChild);
+  li.appendChild(br);
+  bookList.appendChild(li);
+
+  removeButton.addEventListener('click', () => {
+    books = books.filter((book) => {
+      if (book.id !== id) {
+        return true;
+      }
+      return false;
+    });
+    localStorage.setItem('books', JSON.stringify(books));
+    li.remove();
+  });
+};
+
+const ErrorMsg = (error) => {
+  document.querySelector('.error-msg').innerHTML = error;
+  setTimeout(() => {
+    document.querySelector('.error-msg').innerHTML = '';
+  }, 2000);
+};
+
+const addBooks = (title, author) => {
+  const id = Date.now();
+  const object = { id, title, author };
+  if (title === '' || author === '') {
+    ErrorMsg('Kindly fill the fields');
+  } else {
+    books.push(object);
+    localStorage.setItem('books', JSON.stringify(books));
+    document.getElementById('bookTitle').value = '';
+    document.getElementById('bookAuthor').value = '';
+    displayBooks(object.id, object.title, object.author);
+  }
+};
+
+const getBookFromStorage = JSON.parse(localStorage.getItem('books'));
+if (getBookFromStorage) {
+  books = getBookFromStorage;
+}
+
+books.forEach((book) => {
+  displayBooks(book.id, book.title, book.author);
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  addButton.addEventListener('click', (n) => {
+    n.preventDefault();
+    const title = document.getElementById('bookTitle').value;
+    const author = document.getElementById('bookAuthor').value;
+    addBooks(title, author);
+  });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,17 @@
+li {
+  list-style-type: none;
+  line-height: 0;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 30%;
+}
+
+.hr {
+  height: 1px;
+  background-color: black;
+  width: 20%;
+}