#javascript capstone project

.babelrc

@@ -0,0 +1,7 @@
+{
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+    }
+  }
+}

.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"
+      }
+    ]
+  },
+  "ignorePatterns": ["dist/", "build/"]
+}

.github/workflows/linters.yml

@@ -0,0 +1,58 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.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-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
+    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-22.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,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"]
+}

README.md

@@ -1 +1,167 @@
-# JavaScript-capstone-project
+# JavaScript-capstone-project
+
+# 📗 Table of Contents
+
+- [Working with APIs](#working-with-apis)
+- [📗 Table of Contents](#-table-of-contents)
+- [📖 \[Working-with-APIs\] ](#-working-with-apis-)
+  - [🛠 Built With ](#-built-with-)
+    - [🖥️ Tech Stack ](#️-tech-stack-)
+    - [Key Features ](#key-features-)
+  - [🚀 Live Demo ](#-live-demo-)
+  - [💻 Getting Started ](#-getting-started-)
+    - [Prerequisites](#prerequisites)
+    - [Setup](#setup)
+    - [Install](#install)
+    - [Usage](#usage)
+    - [Run tests](#run-tests)
+    - [Deployment](#deployment)
+  - [👥 Authors ](#-authors-)
+  - [🔭 Future Features ](#-future-features-)
+  - [🔭 Watch Video Explanation here ](#-watch-video-explanation-here-)
+  - [🤝 Contributing ](#-contributing-)
+  - [⭐️ Show your support ](#️-show-your-support-)
+  - [🙏 Acknowledgments ](#-acknowledgments-)
+  - [📝 License ](#-license-)
+
+# 📖 [Working-with-APIs] <a name="about-project"></a>
+
+**# Working-with-APIs ** is a website that makes API calls
+
+## 🛠 Built With <a name="HTML"></a>
+
+### 🖥️ Tech Stack <a name="CSS"></a>
+
+- HTML
+- CSS
+- JavaScript
+- Webpack
+- API
+
+### Key Features <a name="Mobile Version of Portfolio"></a>
+
+> Describe between 1-3 key features of the application.
+
+- **Three page web application**
+- **Use two API to display, store and update data**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🚀 Live Demo <a name="live-demo"></a>
+
+- [Live Demo Link]()
+
+Please note that the live demo link is not yet active
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 💻 Getting Started <a name="getting-started"></a>
+
+To get a local copy up and running, follow these steps.
+
+### Prerequisites
+
+In order to run this project you need:
+
+- Go to this repsitory.
+- Click on Code
+- Clone the repository using your https link
+- This will gives you access to all files
+
+### Setup
+
+Clone this repository to your desired folder:
+
+- cd my-folder
+
+- git clone git@github.com:Yemisirach/JavaScript-capstone-project.git
+
+- Once done, open the index.html file in live server
+
+### Install
+
+Install this project with:
+
+```sh
+  npm install
+```
+
+### Usage
+
+Because this project uses webpack as a bundler, to run the project, execute the following command:
+
+<code>npm run start</code>
+
+- OR
+
+<code>npm start</code>
+
+### Run tests
+
+To run tests, run the following command:
+
+- npx stylelint "\*_/_.{css,scss}" in your terminal
+- npx eslint . in your terminal
+
+### Deployment
+
+You can deploy this project using:
+
+A web browser
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 👥 Authors <a name="authors"></a>
+
+👤 **Yemisrach**
+
+- GitHub: [@githubhandle](https://github.com/Yemisirach)
+
+👤 **Mihretab**
+
+- GitHub: [@githubhandle](https://github.com/damenam)
+
+👤 **Kingno3l**
+
+- GitHub: [@githubhandle](https://github.com/kingno3l)
+
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔭 Future Features <a name="future-features"></a>
+
+- **Making API Calls**
+
+## 🔭 Watch Video Explanation here <a name="video-demo"></a>
+
+- **Watch explanation of the features** [here]()
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](https://github.com/Yemisirach/JavaScript-capstone-project/issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ⭐️ Show your support <a name="support"></a>
+
+- If you like this project follow my github.
+- Give me star
+- Say hi on twitter
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>
+
+I would like to thank Microverse
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 📝 License <a name="license"></a>
+
+This project is [MIT](https://github.com/Yemisirach/JavaScript-capstone-project/blob/add-license-1/License) licensed.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

__test__/comment.test.js

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import commentsCounter from '../src/Modules/commentCount.js';
+
+describe('Counters', () => {
+  it('Comments counters', () => {
+    document.body.innerHTML = `<div class="left">
+  <p class="eachScore">
+    2022-09-09
+    <span>Nganje:</span>
+  </p>
+  <span>
+    <p class="numberSc">Great</p>
+  </span>
+</div>`;
+    const count = document.querySelectorAll('.left');
+    expect(commentsCounter(count)).toBe(0);
+  });
+});

__test__/desplay.test.js

@@ -0,0 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import mealsCounter from '../src/Modules/mealCounte.js';
+
+describe('Counters', () => {
+  it('Comments counters', () => {
+    document.body.innerHTML = '<div id="meal-item" class="meal-item">meals (2)</div>';
+    const count = document.querySelectorAll('.meal-item');
+    expect(mealsCounter(count)).toBe(1);
+  });
+});