Es6 implement

.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,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/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@7.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 .
+  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,2 @@
+node_modules/
+.DS_Store banished!

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

MIT.md

@@ -0,0 +1,9 @@
+## Copyright 2021, Federico Luna
+
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this webpage/websiteand associated documentation files, to deal in the webpage/website without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the webpage/website, and to permit persons to whom the webpage/website is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the webpage/website.
+
+THE webpage/website IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE webpage/website OR THE USE OR OTHER DEALINGS IN THE webpage/website.

README.md

@@ -0,0 +1,34 @@
+# Awesome Books
+
+> In this project, is ment to build a basic website that allows users to add/remove books from a list. 
+
+## Built With
+
+- HTML
+- JavaScript
+- CSS
+
+
+
+## Author
+
+👤 Federico Luna V.
+
+- GitHub: [@Flunavgt](https://github.com/Flunavgt)
+- Twitter: [@flunavgt](https://twitter.com/flunavgt)
+- LinkedIn: [federico-luna-Gt](https://linkedin.com/in/federico-luna-Gt)
+
+
+## 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.

css/index.css

@@ -0,0 +1,96 @@
+body {
+  background-color: white;
+  width: 100%;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  border: solid;
+  width: 98%;
+  padding: 5px;
+}
+
+#list,
+#book {
+  border-right: 1px solid black;
+  margin-left: 5px;
+  padding-right: 10px;
+}
+
+.navbar:hover {
+  cursor: pointer;
+}
+
+.currentTime {
+  text-align: end;
+  padding-right: 1%;
+  padding-bottom: 2%;
+  padding-top: 3px;
+}
+
+h1 {
+  text-align: center;
+}
+
+.awesomeList {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  color: black;
+  padding-bottom: 1rem;
+}
+
+.eachBook {
+  border: 1px solid black;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  width: 60%;
+  border-radius: 10px;
+  align-items: center;
+}
+
+.eachBook:nth-child(odd) {
+  background-color: lightgray;
+}
+
+.InputForm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 20%;
+  margin-inline: 40%;
+}
+
+#title,
+#author {
+  width: 100%;
+  padding: 4px;
+  font-size: 1rem;
+}
+
+.InputForm button,
+.delButton {
+  align-self: flex-end;
+  border-bottom: 4px solid black;
+  border-right: 4px solid black;
+  padding: 5px;
+}
+
+.contact {
+  flex-direction: column;
+  align-items: center;
+  display: none;
+}
+
+#footer {
+  position: absolute;
+  bottom: 0;
+  padding: 10px;
+  border: 1px solid black;
+  width: 97.5%;
+  margin-bottom: 10px;
+}

index.html

@@ -0,0 +1,58 @@
+<!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">
+  <title>Awesome Books</title>
+  <link rel="stylesheet" href="css/index.css">
+</head>
+<body> 
+
+
+    <nav class="navbar">
+      <a>Awesome Books</a> 
+      <div id="links">
+          <a id="list">List</a>
+          <a id="book">Add New</a>
+          <a id="contact">Contact</a>
+      </div>      
+    </nav>
+
+   <div class="currentTime">
+    <span id='date-time'></span>
+   </div>
+
+
+   <h1>Add a New Book</h1>
+   <div class="awesomeList">
+
+
+   </div>
+
+
+   <div class="newBook">  
+  <form class="InputForm">
+
+    <input type="text" name="bookTitle" id="title" placeholder="Title">
+    <br>
+    <input type="text" name="bookAuthor" id ="author"  placeholder="Author">
+    <br>
+    <button class="button" type="submit">Add</button>
+  </form>  
+  </div>
+
+  <div class="contact">
+    <p>Do you have any question or you just want to say "Hello"?<br>You can reach out to us!</p>
+    <ul>
+    <li>Our e-mail: mail@mail.com</li>
+    <li>Our phone number: 02568745961</li>
+    <li>Our addres: Street name 22, 84503 City, Country</li>
+    </ul>
+  </div>
+<div id="footer">
+  &copy; Copyright
+</div>
+  <script type="module" src="./modules/index.js"></script>
+</body>
+</html>

modules/books.js

@@ -0,0 +1,52 @@
+export default class Bookshelf {
+  #books;
+
+  constructor() {
+    this.#books = [];
+  }
+
+  // Setters
+  SetBooks(books) {
+    this.#books = books;
+  }
+
+  // Getter
+  get Books() {
+    return this.#books;
+  }
+
+  // Methods
+  AddBook(title, author) {
+    const id = `${new Date().getTime()}`;
+    this.#books.push({
+      title,
+      author,
+      id,
+    });
+  }
+
+  DeleteBook(id) {
+    const localBooks = this.#books;
+
+    this.#books = localBooks.filter((books) => {
+      if (books.id !== id) {
+        return true;
+      }
+      return false;
+    });
+  }
+
+  SaveBookshelfLocal() {
+    localStorage.setItem('books', JSON.stringify(this.#books));
+  }
+
+  LoadBooksFromLocal() {
+    const savedBooks = JSON.parse(localStorage.getItem('books'));
+
+    if (Array.isArray(savedBooks)) {
+      this.#books = savedBooks;
+      return true;
+    }
+    return false;
+  }
+}