Recreate awesome books app with es6 imports

.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/"
+  ]
+}

.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 .

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

.vscode/settings.json

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

README.md

@@ -0,0 +1,79 @@
+![](https://img.shields.io/badge/Microverse-blueviolet)
+
+# Awesome Books
+
+> A Microverse project on learnong javascript.
+
+![screenshot](./images/book_app_es6.jpg)
+
+Additional description about the project and its features.
+
+## Built With
+
+- HTML5
+- CSS3
+- Javascript
+
+## Live Demo
+
+[Live Demo Link](https://billionsjoel/awesome-books-app-es6/)
+
+
+## Getting Started
+
+To get a local copy up and running follow these simple example steps.
+  - Clone the repository using the repo link [here](https://github.com/billionsjoel/awesome-books-app-es6.git)
+  - Open terminal and navigate to the downloaded / project folder
+  - run npm install
+  - run npm install live-server.
+  - run live-server
+
+
+To get a local copy up and running follow these simple example steps.
+
+
+## Authors
+
+👤 **Authors**
+
+  ## Author1
+
+👤 **Billions Atugonza joel**
+
+- GitHub: [@billionsjoel](https://github.com/billionsjoel)
+- Twitter: [@billionsjoel](https://twitter.com/BillionsJoel)
+- LinkedIn: [@billionsjoel](https://www.linkedin.com/in/billionsjoel/)
+
+## Author2
+👤 **Nuri Lacka**
+
+- GitHub: [@Nuri1977](https://github.com/Nuri1977)
+- Twitter: [@Lackanuri](https://twitter.com/LackaNuri)
+- LinkedIn: [@nurilacka](https://www.linkedin.com/in/nuri-lacka-7141b01ba/)
+
+## Author3
+👤 **Islam Bahnas**
+- GitHub: [@Banstein](https://github.com/Banstein)
+- Twitter: [@islam_bahnas](https://twitter.com/islam_bahnas)
+- LinkedIn: [islam-bahnas](www.linkedin.com/in/islam-bahnas)
+
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](../../issues/).
+
+## Show your support
+
+Give a ⭐️ if you like this project!
+
+## Acknowledgments
+
+- Hat tip to anyone whose code was used
+- Inspiration
+- etc
+
+## 📝 License
+
+This project is [MIT](./MIT.md) licensed.

index.css

@@ -0,0 +1,145 @@
+.container {
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.center {
+  text-align: center;
+}
+
+.p-1 {
+  padding: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.5rem;
+}
+
+.ml-1 {
+  margin-left: 1rem;
+}
+
+.bar {
+  color: #000;
+  width: 3rem;
+  height: 5rem;
+}
+
+.button {
+  width: 7rem;
+  height: 2.5rem;
+  box-shadow: 0 2px 2px #000;
+}
+
+.add-btn {
+  margin-left: 25% !important;
+  margin-right: 0%;
+}
+
+#books {
+  margin: 6rem 0 0 0;
+}
+
+#add-books {
+  margin: 6rem 0 20rem 0;
+}
+
+.books {
+  border: 2px solid #000;
+  border-radius: 2px;
+}
+
+.input {
+  width: 30rem;
+  height: 2rem;
+  border: 2px solid #000;
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.book-title {
+  margin: 0.5rem 0;
+  font-size: 1.5rem;
+}
+
+.book-author {
+  margin: 0.5rem 0;
+}
+
+.book {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+nav {
+  border: 2px solid #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 2px;
+  font-size: 1.5rem;
+}
+
+nav ul {
+  display: flex;
+}
+
+nav ul > li {
+  list-style: none;
+  margin: 0 1rem;
+}
+
+footer {
+  border: 2px solid #000;
+  padding: 1rem;
+  border-radius: 2px;
+  margin: 3rem 0;
+}
+
+#contact {
+  margin-top: 6rem;
+}
+
+.contact-heading {
+  font-size: 3rem;
+}
+
+.contact-paragraph {
+  font-size: 2rem;
+}
+
+#contact > h3 {
+  text-align: left;
+  margin-left: 25%;
+  font-size: 1.5rem;
+}
+
+#contact > ul {
+  text-align: left;
+  margin-left: 30%;
+  padding: 1rem;
+}
+
+#contact > ul > li {
+  font-size: 1.2rem;
+  line-height: 3rem;
+}
+
+.bg-1 {
+  background-color: #ebe8e8;
+}
+
+.bg-2 {
+  background-color: #fff;
+}
+
+.date {
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem 0;
+  font-size: 1.5rem;
+}