Merge pull request #1 from amejid/develop

Awesome books: with ES6

.eslintrc.json

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

.github/workflows/linters.yml

@@ -0,0 +1,44 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  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/javascript/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
+  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/javascript/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  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

.stylelintrc.json

@@ -0,0 +1,32 @@
+{
+  "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"]
+}

README.md

@@ -1 +1,50 @@
-# awesome-books-es6
+# awesome-books-es6
+
+> A plain javascript project that can keep track of a list of books utilizing localStorage. The project utilizes MVC architecture.
+
+## Built With
+
+- HTML
+- CSS
+- Javascript
+
+## Getting Started
+
+To get a local copy up and running follow these simple example steps.
+
+### Prerequisites
+
+- A browser
+- A version control like git
+- A text editor
+
+### Setup
+
+- Clone the repository using the link https://github.com/amejid/awesome-books-es6
+- Navigate to the folder using `cd awesome-books-es6`
+- Open index.html in the browser of your choice
+- Use your favorite text editor to modify contents of the page
+
+## Authors
+
+👤 **Abdelmejid Oumer Ali**
+
+- GitHub: [@amejid](https://github.com/amejid)
+- Twitter: [@amejidoumer](https://twitter.com/amejidoumer)
+- LinkedIn: [amejid](https://linkedin.com/in/amejid)
+
+## 🤝 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
+
+- Microverse curriculum
+
+## 📝 License

index.css

@@ -0,0 +1,155 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 62.5%;
+  font-weight: 700;
+}
+
+body {
+  padding: 2.4rem;
+}
+
+.container {
+  width: 80rem;
+  margin: 0 auto;
+}
+
+.section {
+  display: none;
+  height: 70vh;
+}
+
+.section--active {
+  display: block;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  border: 2px solid #000;
+  padding: 1.2rem;
+}
+
+.year-con {
+  margin-top: 1.2rem;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.year {
+  font-size: 1.6rem;
+}
+
+.page-title {
+  font-size: 1.8rem;
+}
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  gap: 1.2rem;
+  font-size: 1.8rem;
+}
+
+.nav-link {
+  cursor: pointer;
+}
+
+.nav-link--active {
+  color: #4d4dff;
+}
+
+.section-title {
+  text-align: center;
+  margin-top: 2.4rem;
+  margin-bottom: 1.8rem;
+  font-size: 2rem;
+}
+
+.books-container {
+  margin-bottom: 2.4rem;
+  border: 2px solid #000;
+}
+
+.book {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.8rem;
+  font-size: 1.6rem;
+}
+
+.book:nth-child(odd) {
+  background-color: #e6e6e6;
+}
+
+.remove {
+  padding: 0.4rem;
+  border: 2px solid #000;
+  background: #fff;
+  font-weight: 700;
+  box-shadow: 0.4rem 0.2rem 0.2rem #000;
+  z-index: 9;
+}
+
+.form-title {
+  text-align: center;
+  margin-bottom: 6.4rem;
+  margin-top: 3.6rem;
+  font-size: 1.8rem;
+}
+
+.form {
+  width: 30rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  margin-bottom: 2.4rem;
+}
+
+.form-control {
+  width: 100%;
+  font-size: 1.6rem;
+  border: 2px solid #000;
+  padding: 0.4rem;
+}
+
+.btn-submit {
+  align-self: flex-end;
+  background: none;
+  border: 2px solid #000;
+  font-weight: 700;
+  box-shadow: 0.4rem 0.2rem 0.2rem #000;
+  padding: 0.4rem;
+}
+
+/* contact infor  */
+
+.contact-container {
+  width: 60rem;
+  margin: 0 auto;
+}
+
+.description {
+  font-size: 1.8rem;
+}
+
+.contact-list {
+  padding-left: 4.8rem;
+  margin-top: 2.4rem;
+}
+
+.contact {
+  font-size: 1.6rem;
+}
+
+.footer {
+  border: 2px solid #000;
+  padding: 1.2rem;
+  font-size: 1.8rem;
+}

index.html

@@ -0,0 +1,57 @@
+<!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="index.css" />
+    <script type="module" defer src="index.js"></script>
+  </head>
+  <body>
+    <header class="container header">
+      <p class="page-title">Awesome Books</p>
+      <nav>
+        <ul class="nav-links">
+          <li class="nav-link nav-link--active" data-sect="1">List</li>
+          <li class="dash">|</li>
+          <li class="nav-link" data-sect="2">Add new</li>
+          <li class="dash">|</li>
+          <li class="nav-link" data-sect="3">Contact</li>
+        </ul>
+      </nav>
+    </header>
+    <div class="year-con container"><p class="year"></p></div>
+    <section class="container section section-1 section--active">
+      <h1 class="section-title">All awesome books</h1>
+      <div class="books-container"></div>
+    </section>
+    <section class="container section section-2">
+      <h2 class="form-title">Add a new book</h2>
+      <form action="" class="form">
+        <input class="form-control" name="title" type="text" placeholder="Title" id="title" />
+        <input class="form-control" name="author" type="text" placeholder="Author" id="author" />
+        <button class="btn-submit" type="submit">Add</button>
+      </form>
+    </section>
+    <section class="container section section-3">
+      <h2 class="form-title">Contact information</h2>
+      <div class="contact-container">
+        <p class="description">Do you have any questions or you just want to say "Hello"?</p>
+        <p class="description"></p>
+        <p class="description">You can reach out to us</p>
+        <ul class="contact-list">
+          <li class="contact">
+            Our email: <a href="mailto:kayongachiteta01@gmail.com">kayongachiteta01@gmail.com</a>
+          </li>
+          <li class="contact">Our phone number: <a href="tel:+251911558295">+251911558295</a></li>
+          <li class="contact">Our Address: Street name 22, 84503 City, Country</li>
+        </ul>
+      </div>
+    </section>
+    <footer class="footer container">
+      <p>Copyright ...</p>
+    </footer>
+  </body>
+</html>