manq2010 · manq2010 · Oct 26, 2022 · Oct 26, 2022 · Oct 26, 2022 · Oct 26, 2022
diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml
@@ -32,6 +32,20 @@ jobs:
           [ -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-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 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-22.04

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,20 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+      }
+    ],
+    "scss/at-rule-no-unknown":  [
+      true,
+      {
+        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+      }
+    ],
+    "csstree/validator": true
+  },
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+}
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,34 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.navi-cont {
+  display: flex;
+  justify-content: space-around;
+  background-color: rgb(213, 209, 203);
+  padding: 0.5rem;
+  color: rgba(18, 14, 14, 0.77);
+}
+
+.nav-menu {
+  align-items: center;
+  list-style-type: none;
+}
+
+.nav-item > a {
+  text-decoration: none;
+  margin-left: 1rem;
+  font-size: 1.6rem;
+  color: rgba(18, 14, 14, 0.77);
+}
+
+.logo {
+  text-decoration: none;
+  font-size: 2rem;
+}
+
+.close {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -7,35 +7,77 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
-    <script src="js/index.js" defer></script>
     <title>Awesome books: plain JavaScript with objects</title>
+    <link rel="stylesheet" href="./css/styles.css">
 </head>
 
 <body>
-    <div class="container">
-
-        <h3 class="text-center mt-3">
-            All awesome books
-        </h>
-        <div class="container-books mt-3 border border-dark rounded d-flex flex-column"></div>
-
-        <h3 class="text-center mt-3">
-            Add a new Book
-        </h2>
-
-        <form class="text-center" id="book-form">
-            <div class="d-flex justify-content-center ">
-                <label for="title" class='form-label'></label>
-                <input type="text" id="title" class="form-control" placeholder="Title" required>
-            </div>
-            <div class="">
-                <label for="author" class='form-label'></label>
-                <input type="text" id="author" class="form-control" placeholder="Author" required>
-            </div>
-            <button type="submit" class="justify-content-end btn btn-outline-dark mt-3 border-end border-bottom border-4 border-dark">Add</button>
-        </form>
-
-    </div>
+    <header class="navi-cont">
+        <a class="logo navi-cont"> Awesome Books</a>
+        <nav>
+            <ul class="nav-menu navi-cont">
+                <li class="nav-item home">
+                    <a href="#home">List</a>
+                </li>
+                <li class="nav-item add-book">
+                    <a href="#add-book">Add New</a>
+                </li>
+                <li class="nav-item contact">
+                    <a href="#contact">Contact</a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+
+    <section id="home" class="container mt-3">
+
+        <div class="container">
+            <h3 class="text-center mt-3">
+                All awesome books
+            </h3>
+            <div class="container-books mt-3 border border-dark rounded d-flex flex-column"></div>
+        </div>
+    </section>
+
+    <section id="add-book" class="container mt-3 close">
+        <div class="container">
+            <h3 class="text-center mt-3">
+                Add a new Book
+                </h2>
+
+                <form class="text-center" id="book-form">
+                    <div class="d-flex justify-content-center ">
+                        <label for="title" class='form-label'></label>
+                        <input type="text" id="title" class="form-control" placeholder="Title" required>
+                    </div>
+                    <div class="">
+                        <label for="author" class='form-label'></label>
+                        <input type="text" id="author" class="form-control" placeholder="Author" required>
+                    </div>
+                    <button type="submit"
+                        class="justify-content-end btn btn-outline-dark mt-3 border-end border-bottom border-4 border-dark">Add</button>
+                </form>
+
+        </div>
+    </section>
+
+    <section id="contact" class="container mt-3 text-center close">
+        <div>
+            <h2>Contact Information</h2>
+            <p class="h6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.</p>
+            <ul class="list-contact text-start">
+                <li>Our email: festus@mancoba.com</li>
+                <li>Our phone number: 001122334455</li>
+                <li>Our address: Accra, Ghana, 27318 city</li>
+            </ul>
+        </div>
+    </section>
+
+    <footer class="container d-flex border mt-3 mb-5 pt-3 fixed-bottom">
+        <p class="text-start d-flex">Copyright
+        </p>
+    </footer>
+    <script src="js/index.js"></script>
 </body>
 
 </html>
diff --git a/js/index.js b/js/index.js
@@ -102,3 +102,29 @@ form.addEventListener('submit', (e) => {
 });
 
 DisplayBook.getLs();
+
+const listBtnId = document.querySelector('#home');
+const AddNewBtnId = document.querySelector('#add-book');
+const contactBtnId = document.querySelector('#contact');
+
+const listBtn = document.querySelector('.home');
+const AddNewBtn = document.querySelector('.add-book');
+const contactBtn = document.querySelector('.contact');
+
+listBtn.addEventListener('click', () => {
+  AddNewBtnId.classList.add('close');
+  contactBtnId.classList.add('close');
+  listBtnId.classList.remove('close');
+});
+
+AddNewBtn.addEventListener('click', () => {
+  listBtnId.classList.add('close');
+  contactBtnId.classList.add('close');
+  AddNewBtnId.classList.remove('close');
+});
+
+contactBtn.addEventListener('click', () => {
+  AddNewBtnId.classList.add('close');
+  listBtnId.classList.add('close');
+  contactBtnId.classList.remove('close');
+});