🏗️ Pop ✍️ up Comment window and Involvements 👍

.gitignore

@@ -1,2 +1,2 @@
 # .gitignore
-**/node_modules
+**/node_modules

README.md

@@ -11,6 +11,7 @@ REQUIRED SECTIONS:
 - About the Project
   - Built With
   - Live Demo
+  - Introduction
 - Getting Started
 - Authors
 - Future Features
@@ -40,6 +41,7 @@ After you're finished please remove all the comments and instructions!
     - [Tech Stack](#tech-stack)
     - [Key Features](#key-features)
   - [🚀 Live Demo](#live-demo)
+  - [Introduction](#Introduction)
 - [💻 Getting Started](#getting-started)
   - [Setup](#setup)
   - [Prerequisites](#prerequisites)
@@ -58,10 +60,10 @@ After you're finished please remove all the comments and instructions!
 # 📖 [Royal Meals Web App <a name="about-project"></a>
 
 > **[Royal Meals]** is a... This is a web app that allows the user to navigate throug different meals displayed on the page amd also to share their reactions through:
+
 - Like
 - Comments
 
-
 ## 🛠 Built With <a name="built-with"></a>
 
 ### Tech Stack <a name="tech-stack"></a>
@@ -102,37 +104,50 @@ After you're finished please remove all the comments and instructions!
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- LIVE DEMO -->
-
+<iframe width="560" height="315" src="https://www.youtube.com/embed/HqkGS7-2b_E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 ## 🚀 Live Demo <a name="live-demo"></a>
 
 > Add a link to your deployed project.
 
-- [Live Demo Link]( https://simongideon.github.io/javascript-group-capstone-project/dist/)
+- [Live Demo Link](https://simongideon.github.io/javascript-group-capstone-project/dist/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+## Introduction
+
+- [Watch the video](https://drive.google.com/file/d/1tb8PCQn0sUOj7AtlyWrjEN5DwHaiLPqN/view?usp=sharing)
+
 <!-- GETTING STARTED -->
 
 ## 💻 Getting Started <a name="getting-started"></a>
 
 ## Getting Started
+
 Clone this repository
+
 ```
 $ git https://github.com/SimonGideon/javascript-group-capstone-project.git
 $ cd javascript-group-capstone-project
 ```
+
 Generating your own key
+
 > Navigate to scrc/app.js and paste 📋 the following function:
+
 ```
 import getKey from './modules/getkey.js';
 getKey();
 ```
->check you console in the browser the key is returned as an error in the format: `u06lzZuHDEVnvjfd4K1F`
-Run Webpack
+
+> check you console in the browser the key is returned as an error in the format: `u06lzZuHDEVnvjfd4K1F`
+> Run Webpack
+
 ```
 $ npm init -y
 ```
+
 Open in Browser
+
 ```
 $ npm run start #this will launch the webpack server
 ```
@@ -217,6 +232,94 @@ Example:
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+## A link to your Kanban board.
+[Kanban](https://github.com/SimonGideon/javascript-group-capstone-project/projects/1)
+
+## Pull request for Review Made 
+- [Simon](https://github.com/SimonGideon/javascript-group-capstone-project/pull/28);
+
+<!-- AUTHORS -->
+
+### Prerequisites
+
+In order to run this project you need:
+
+<!--
+Example command:
+
+Generating your own key
+> Navigate to scrc/app.js and paste 📋 the following function:
+```
+import getKey from './modules/getkey.js';
+getKey();
+```
+ -->
+
+### Setup
+
+Clone this repository to your desired folder:
+
+<!--
+Example commands:
+
+>check you console in the browser the key is returned as an error in the format: `u06lzZuHDEVnvjfd4K1F`
+Run Webpack
+```
+$ npm init -y
+```
+--->
+
+### Install
+
+Install this project with:
+
+<!--
+Example command:
+
+```sh
+  cd javascript-group-capstone-project
+  $ npm install
+```
+--->
+
+### Usage
+
+To run the project, execute the following command:
+
+<!--
+Example command:
+
+```sh
+  npm run start
+```
+--->
+
+### Run tests
+
+To run tests, run the following command:
+
+<!--
+Example command:
+
+```sh
+ npm run test
+```
+--->
+
+### Deployment
+
+You can deploy this project using:
+
+<!--
+Example:
+
+```sh
+
+```
+ -->
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
 <!-- AUTHORS -->
 
 ## 👥 Authors <a name="authors"></a>
@@ -230,10 +333,14 @@ Example:
 - LinkedIn: [mnayi-gideon](https://linkedin.com/in/mnayi-gideon)
 
 👤 **Zia Bakhteyari**
+
 - GitHub: [@zia123456](https://github.com/Zia123456)
 - Twitter: [@zia_bakhteyari](https://twitter.com/Zia_Bakhteyari)
 - LinkedIn: [Zia bakhteyari](https://www.linkedin.com/in/zia-bakhteyari-8b8a861a5/)edIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
 
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+*🎉Congratulations you're done*✨edIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 *🎉Congratulations you're done*✨
 
@@ -248,16 +355,25 @@ Feel free to check the [issues page](../../issues/).
 Give a ⭐️ if you like this project!
 
 ## Akcnowledgement
+
 Thank you [@SimonGideon](https://github.com/SimonGideon) and [@zia123456](https://github.com/Zia123456) for preparing this set and also making it available in for everyone
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- LICENSE -->
 
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
 ## 📝 License <a name="license"></a>
 
 This project is [MIT](./LICENSE) licensed.
 
+_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._ <a name="license"></a>
+
+This project is [MIT](./LICENSE) licensed.
+
 _NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

__MOCK__/comments-counter.js

@@ -0,0 +1,7 @@
+function countTotalComments(arrOfComments) {
+  const totalComments = arrOfComments.length;
+
+  return totalComments;
+}
+
+module.exports = countTotalComments;

__MOCK__/fetch.test.js

@@ -0,0 +1,17 @@
+/* @jest-environment jsdom */
+/* eslint-disable no-unused-vars */
+import fetchMock from 'jest-fetch-mock';
+import { array, menu } from '../src/modules/fetch.js';
+
+fetchMock.enableMocks();
+
+describe('loaded Items', () => {
+  it('Complete loaded', async () => {
+    function callback(error, data) {
+      if (error) {
+        throw error;
+      }
+      expect(data).toBe(array);
+    }
+  });
+});

__MOCK__/total-comments.test.js

@@ -0,0 +1,28 @@
+const commentCounter = require('./comments-counter.js');
+
+test('Total number of comments must be 3', () => {
+  // Arrang
+  const comments = [
+    {
+      id: '1',
+      comment: 'I like this food',
+      date: '2022/05/11',
+    },
+    {
+      id: '2',
+      comment: 'Looks Yumy',
+      date: '2022/05/12',
+    },
+    {
+      id: '3',
+      comment: 'Wow looks testy, I will order it right now',
+      date: '2022/05/12',
+    },
+  ];
+
+  // Act
+  const totalNumberOfComments = commentCounter(comments);
+
+  // Assert
+  expect(totalNumberOfComments).toBe(3);
+});

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><script defer="defer" src="main.bundle.js"></script></head><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACNDYABgt/8AUqb/AEia/wBImv8ARpf/AEaX/wBGl/8ARpf/AEaX/wBDlP8AQ5T/AEOU/wAYNmAAAAAAACNDYABuyv8AkfX/E6f+/xOn/v8Rpf7/AJj9/wCE5f8AfNv/AHzb/wB82/8AZL3/AGC5/wBguf8AUqf/ABg2YABgt/8AhOX/AJj9/za8/v8jtP7/IbL+/wCY/f8AmP3/AHzb/wBx1/8AaNP/AGPO/wBguf8AYLn/AGC5/wBDlP8AXbP/AGjB/wBxzP8Accz/AHHM/wBxzP8Accz/AGfC/wBg0P9wneH/ILft/wCD5f8AVsT/AEue/wBLnv8AQJD/AF2z/wZu6v8Gbur/BTms/wUVgf8FGYX/BGfh/wBq1/8Vvff/UfD//zHt//8AtP//AIPl/wNa0f8GaeT/AECQ/wAMECACNJr/Bgh8/wMR0P8BFfj/AAmg/wCQJP8CXEL/Bgh6/wYIev8GCHz/Bgh6/wYIev8GDHX/Bgx1/wEBCxgArxj/AKUm/wE3x/8BN8f/AJgn/wCfPP8AtHf/AKZi/wBZVP8BMMn/ATDJ/wAfi/8AUF3/AJUz/wCVM/8ALQtQALMj/x7Yhv8Av0j/AL9I/wDLhv8AxoP/JOWs/wDWjf8At27/AJpC/wCaQv8AmkL/AKRd/wCrcf8Aq3H/AJIp/wBNF38AfY//AH2P/wB9j/8Aa4P/AGuD/wB9j/8AfY//AH2P/wBrg/8Aa4P/AGuD/wBrg/8Aa4P/AGuD/wBAG38AT5nfAG/L/wBvy/8Ab8v/AG/L/wBvy/8Ab8v/AG/L/wBvy/8Ab8v/AG/L/wBZsP8AWbD/AFmw/wBZsP8AOH7fAGC3/wCD5P8Al/z/AJf8/wCX/P8Al/z/AJf8/wCX/P8Al/z/AIHh/wB82/8Ae9r/AHLO/wBguf8AYLn/AEOU/wBjuv8Tp/7/Lbz+/wqg/f8KoP3/AJj9/wSb/f84xP//EaX+/wCY/f8AmP3/AHzb/wByz/8AYLn/AGC5/wBDlP8ARoa/AJT4/yu6/v9i2f//Qsz//xeq/v8In/3/AJj9/wCY/f8AmP3/AI/y/wB82/8Acs//AGC5/wBetv8AMGy/AAAAAABGhr8Aedb/CH/W/x+w/v8fsP7/EaX+/wCY/f8Alfn/AInr/wB82/8Abcn/AFOn/wBPo/8AMGy/AAAAAAAAAAAAAAAAABoySAAaMkgAZLz/AG7I/wBuyP8Absj/AF2z/wBRpf8AUaX/AESV/wASKUgAEilIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJERgACREYAAkRGAAGDhgABg4YAAYOGAAAAAAAAAAAAAAAAAAAAAAAAAAAwAMAAIABAAAAAAAAAAAAAAAAAACAAQAAAAEAAAAAAACAAQAAAAAAAAAAAAAAAAAAAAAAAIABAADwDwAA//8AAA==" rel="icon" type="image/x-icon"/><title>Royal Meals</title><nav><img src="./images/icon.png" alt="royals-logo"/><ul><li>Available foods</li><li>Menu</li><li>More</li></ul></nav><body><footer><h6>Created by Microverse under CC license</h6></footer></body></head></html>
+<!doctype html><html lang="en"><head><script defer="defer" src="main.bundle.js"></script></head><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACNDYABgt/8AUqb/AEia/wBImv8ARpf/AEaX/wBGl/8ARpf/AEaX/wBDlP8AQ5T/AEOU/wAYNmAAAAAAACNDYABuyv8AkfX/E6f+/xOn/v8Rpf7/AJj9/wCE5f8AfNv/AHzb/wB82/8AZL3/AGC5/wBguf8AUqf/ABg2YABgt/8AhOX/AJj9/za8/v8jtP7/IbL+/wCY/f8AmP3/AHzb/wBx1/8AaNP/AGPO/wBguf8AYLn/AGC5/wBDlP8AXbP/AGjB/wBxzP8Accz/AHHM/wBxzP8Accz/AGfC/wBg0P9wneH/ILft/wCD5f8AVsT/AEue/wBLnv8AQJD/AF2z/wZu6v8Gbur/BTms/wUVgf8FGYX/BGfh/wBq1/8Vvff/UfD//zHt//8AtP//AIPl/wNa0f8GaeT/AECQ/wAMECACNJr/Bgh8/wMR0P8BFfj/AAmg/wCQJP8CXEL/Bgh6/wYIev8GCHz/Bgh6/wYIev8GDHX/Bgx1/wEBCxgArxj/AKUm/wE3x/8BN8f/AJgn/wCfPP8AtHf/AKZi/wBZVP8BMMn/ATDJ/wAfi/8AUF3/AJUz/wCVM/8ALQtQALMj/x7Yhv8Av0j/AL9I/wDLhv8AxoP/JOWs/wDWjf8At27/AJpC/wCaQv8AmkL/AKRd/wCrcf8Aq3H/AJIp/wBNF38AfY//AH2P/wB9j/8Aa4P/AGuD/wB9j/8AfY//AH2P/wBrg/8Aa4P/AGuD/wBrg/8Aa4P/AGuD/wBAG38AT5nfAG/L/wBvy/8Ab8v/AG/L/wBvy/8Ab8v/AG/L/wBvy/8Ab8v/AG/L/wBZsP8AWbD/AFmw/wBZsP8AOH7fAGC3/wCD5P8Al/z/AJf8/wCX/P8Al/z/AJf8/wCX/P8Al/z/AIHh/wB82/8Ae9r/AHLO/wBguf8AYLn/AEOU/wBjuv8Tp/7/Lbz+/wqg/f8KoP3/AJj9/wSb/f84xP//EaX+/wCY/f8AmP3/AHzb/wByz/8AYLn/AGC5/wBDlP8ARoa/AJT4/yu6/v9i2f//Qsz//xeq/v8In/3/AJj9/wCY/f8AmP3/AI/y/wB82/8Acs//AGC5/wBetv8AMGy/AAAAAABGhr8Aedb/CH/W/x+w/v8fsP7/EaX+/wCY/f8Alfn/AInr/wB82/8Abcn/AFOn/wBPo/8AMGy/AAAAAAAAAAAAAAAAABoySAAaMkgAZLz/AG7I/wBuyP8Absj/AF2z/wBRpf8AUaX/AESV/wASKUgAEilIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJERgACREYAAkRGAAGDhgABg4YAAYOGAAAAAAAAAAAAAAAAAAAAAAAAAAAwAMAAIABAAAAAAAAAAAAAAAAAACAAQAAAAEAAAAAAACAAQAAAAAAAAAAAAAAAAAAAAAAAIABAADwDwAA//8AAA==" rel="icon" type="image/x-icon"/><title>Royal Meals</title><body><header><nav><h1 id="logos">Royal Meals</h1><ul><li class="available-food">Available foods<span id="countfood"></span></li><li href="#">Menu</li><li class="contact">Contact</li></ul><div class="searchBox"><input class="searchInput" name="" placeholder="Search"> <button class="searchButton" href="#"><i class="fa-solid fa-magnifying-glass"></i></button></div></nav></header><div id="meals-content" class="food-cards"></div><div class="popup-main-container"></div><div class="contact-container none"><h1 class="Contact-us">Contact Us</h1><div class="reach-us"><span class="our-email">royal.meal100@gmail.com</span> <span class="phone-number">+1 988-784-234</span> <span class="our-address">shop No.36 Royal Mal complex, califonai state university street, california, USA</span></div></div><footer><p>&copy;2022 Created by Microverse under CC license</p></footer></body></head></html>

dist/main.bundle.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

jest.config.js

@@ -1,7 +1,11 @@
+/** @type {import('jest').Config} */
 module.exports = {
+  bail: 1,
+  verbose: true,
+
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-        '<rootDir>/__mocks__/fileMock.js',
+      '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
   },
-};
+};