created a es6 awesome-book with modules. Used luxon to dynamically di…

…splay the time

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "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"
+    }],
+    "radix": "off"
+  },
+  "ignorePatterns": [
+    "dist/",
+    "build/"
+  ]
+}

.github/workflows/linters.yml

@@ -0,0 +1,70 @@
+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/[email protected]
+      - 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 [email protected]
+          [ -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 [email protected] [email protected] [email protected] [email protected]
+          [ -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 [email protected] [email protected] [email protected] [email protected]
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-18.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

.gitignore

@@ -0,0 +1 @@
+node_modules

.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,22 @@
+{
+  "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"]
+}
+

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5503
+}

index.css

@@ -0,0 +1,85 @@
+.library {
+    margin: 0 auto;
+    max-width: 700px;
+    border: 1px grey solid;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .library > :nth-child(odd) {
+    background-color: lightgray;
+  }
+
+  .bookdiv {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid gray;
+  }
+
+  .library-section {
+    text-align: center;
+    padding: 20px;
+    margin-top: 15px;
+  }
+
+  .navbar {
+    background-color: #e3f2fd;
+  }
+
+  .active {
+    display: block;
+  }
+
+  main {
+    margin-top: 70px;
+  }
+
+  .page-footer {
+    margin-top: 50px;
+    background-color: #e3f2fd;
+  }
+
+  .nav-link:hover {
+    background-color: blue;
+  }
+
+  .date {
+    font-weight: bold;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  #add-book {
+    float: left;
+  }
+
+  .btn-primary {
+    margin-left: 67%;
+  }
+
+  h3 {
+    margin-left: 44%;
+    margin-bottom: 3%;
+  }
+
+  #contact-section h2 {
+    text-align: center;
+    margin-bottom: 4%;
+  }
+
+  #contact-section p {
+    margin-left: 33%;
+  }
+
+  .contacts {
+    margin-left: 36%;
+  }
+
+  .date-book-section {
+    display: none;
+  }
+

index.html

@@ -0,0 +1,144 @@
+<!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
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Lato"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+      integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="index.css" />
+    <title>Awesome Books</title>
+  </head>
+  <body>
+    <header>
+        <nav class="navbar navbar-expand-lg fixed-top navbar-light">
+            <div class="container-fluid second-nav">
+                <a class="navbar-brand hide-sm" href="index.html">
+                  <span><i class="fas fa-book-reader"></i></span>
+                  The Library</a
+                >
+                <button
+                  class="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarSupportedContent"
+                  aria-controls="navbarSupportedContent"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation"
+                >
+                  <span class="navbar-toggler-icon">
+                    <i class="menuIcon fas fa-bars"></i>
+                    <i class="closeIcon fas fa-times"></i>
+                  </span>
+                </button>
+                <div
+                  class="collapse navbar-collapse justify-content-end"
+                  id="navbarSupportedContent"
+                >
+                  <ul class="navbar-nav mb-2 mb-lg-0 menu">
+                    <li class="nav-item">
+                      <a
+                        class="nav-link active menuItem"
+                        aria-current="page"
+                        href="#book-list"
+                        id="book-list"
+                        >Book List</a
+                      >
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link active menuItem" aria-current="page" href="#add-book"
+                      id="add-book"
+                        >Add Book</a
+                      >
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link active menuItem" aria-current="page" href="#contact-us"
+                      id="contact-us"
+                        >Contact</a
+                      >
+                    </li>
+                  </ul>
+                </div>
+              </div>
+        </nav>
+    </header>
+
+   <main>
+    <div class="date"></div>
+    <section class="library-section" id="library-section">
+        <h1>Awesome Books</h1>
+        <div class="library"></div>
+      </section>
+      <section class="" id="new-book-section">
+
+          <h3>Add New Book</h3>
+          <form id="book-form" class="gy-2 gx-3 align-items-center d-flex flex-column" >
+              <div class="w-25" >
+                <label>Title</label>
+                <input type="text" class="form-control" id="title" placeholder="Jane Doe">
+              </div>
+              <div class="w-25">
+                  <label>Author</label>
+                <div class="input-group">
+                  <input type="text" class="form-control" id="author" placeholder="Username">
+                </div>
+              </div>
+             <br>
+              <div class=" col-auto w-25 col-12">
+                <button type="submit" class="btn btn-primary add-book">Add book</button>
+              </div>
+            </form>
+      </section>
+      <section id="contact-section">
+          <h2>Contact Information</h2>
+          <p>Do you have any questions or you just want to say "Hello"?<br>You can reach out to us!</p>
+          <ul class="contacts">
+            <li>
+              Our email: [email protected], [email protected]
+            </li>
+            <li>
+              Our phone number: +2540000000000, +2347078800891
+            </li>
+            <li>
+              Our address: Champ de Mars, 5 Av. Anatole France, 75007 Paris, France
+            </li>
+          </ul>
+        </section>
+   </main>
+   <footer class="page-footer font-small blue">
+
+    <!-- Copyright -->
+    <div class="footer-copyright text-center py-3">© 2022 Copyright:
+        <a><span><i class="fas fa-book-reader"></i></span>
+        The Library</a>
+        </div>
+    <!-- Copyright -->
+
+  </footer>
+    <script type="module" src="./index.js"></script>
+    <script src="./modules/luxon.js"></script>
+  </body>
+</html>