Merge pull request #34 from V-Blaze/Comment-counter

Comment counter

README.md

@@ -1 +1,100 @@
-# Team-Kanban
+## TODO LIST WEB_APP
+
+- This is a JavaScript meal app built with crowd-sourced database of Recipes from around the world.
+
+## LIVE DEMO
+
+- Click [HERE]() 
+
+## Built With
+
+- HTML
+
+- CSS
+
+- Javascript(ES6)
+
+- WebPack
+
+- Fetch API
+
+- MealDB API [MealDB](https://www.themealdb.com/api.php)
+
+- Involement API
+
+- Lighthouse (An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more).
+
+- Webhint (A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors).
+
+- Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).
+
+### Linter Tests
+
+- `npx hint .`
+- `npx stylelint "**/*.{css,scss}"`
+- `npx eslint .`
+
+### Prerequisites
+
+- Have a local version control like Git. Which is a open source distributed version control system designed for source code management
+- A text editor (e.g Visual Studio Code, Vim, Atom & Sublime.)
+- A web browser (e.g Chrome, Safari, Mozilla Firefox.)
+- Live Server which is a web extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET)
+- Download waves to check project accessibilty
+
+### Getting Started
+
+To get a local copy up and running follow these simple example steps.
+
+- npm
+  ```sh
+  npm install npm@latest -g
+  ```
+
+### Installation
+
+1. Clone the repo by running the command
+   ```sh
+    git clone https://github.com/V-Blaze/FOODHUB.git
+   ```
+2. Open the directory of the project
+   ```sh
+   cd FOODHUB
+   ```
+3. Open the html file
+   ```sh
+   Click and open the html file
+   ```
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+See the [open issues](#) for a full list of proposed features (and known issues).
+
+## Authors
+
+👤 Valetine Blaze
+
+- GitHub: [@V-blaze](https://github.com/V-Blaze)
+- Twitter: [@blaze_valentine](https://twitter.com/blaze_valentine)
+- LinkedIn: [@valentine-blaze](https://www.linkedin.com/in/valentine-blaze/)
+
+## 
+
+👤 Usama Malik
+
+- GitHub: [@usamamaliq](https://github.com/usamamaliq)
+- LinkedIn: [@usamamaliq](https://www.linkedin.com/in/usamamaliq/)
+
+## 🤝 Contributing
+
+- Contributions, issues, and feature requests are welcome!
+
+- Feel free to check the [issues page](https://github.com/V-Blaze/FOODHUB.git/issues).
+
+## Show your support
+
+- Give a ⭐️ if you like this project!
+
+## 📝 License
+
+- This project is [MIT](https://github.com/V-Blaze/FOODHUB/blob/dev/LICENSE) licensed.

src/modules/comment.js

@@ -22,7 +22,7 @@ export const createCommentBubble = ({ creation_date, comment, username }) => {
   commentDiv.className = 'comment-bubble';
 
   commentDiv.innerHTML = `
-      <div class="txt">
+      <div class="txt user-comment">
           <p class="name">${username}</p>
           <p class="message">${comment}</p>
           <span class="timestamp">${creationDate}</span>

src/modules/commentCounter.js

@@ -0,0 +1,6 @@
+const commmentCounter = () => {
+  const comments = document.querySelectorAll('.user-comment');
+  return comments.length;
+};
+
+export default commmentCounter;

src/modules/popup-details.js

@@ -1,4 +1,5 @@
 import { generateComments, addNewComment } from './comment.js';
+import commmentCounter from './commentCounter.js';
 
 export const fetchFoodDetails = async (id) => {
   const baseUrl = 'https://www.themealdb.com/api/json/v1/1/lookup.php?i=';
@@ -34,6 +35,11 @@ export const addCommentEvent = async () => {
     cmtSection.innerHTML = '';
     cmtSection.append(commentWrapper);
 
+    const commentNo = document.querySelector('.comment-count');
+
+    const commentCount = commmentCounter();
+    commentNo.textContent = `(${commentCount})`;
+
     commentForm.reset();
   });
 };
@@ -89,8 +95,8 @@ export const creatPopUp = ({
                         <div class="popUp-image">
                             <img src="${newstrMealThumb}" alt="${strMeal}" class="popUp-item-image">
                         </div>
-                            <h3 class="food-name"><span>Name:</span><span>${strMeal}</span> </h3>
-                            <h5 class="category"><span>Category:</span>${strCategory}<span></span>  </h5>
+                            <h3 class="food-name"><span>Name:</span><span class="name-span">${strMeal}</span> </h3>
+                            <h5 class="category"><span>Category:</span><span class="name-span">${strCategory}</span>  </h5>
                     </div>
                         <div class="ingridients-and-measurments">
                             <div class="ingridients">
@@ -130,7 +136,7 @@ export const creatPopUp = ({
                            <span>Source:</span> <a href="${strSource}" target="_blank">${strSource}</a>
                         </h5>
                     </div>
-                    <h5 class="popUp-item-sub-title">Comments</h5>
+                    <h5 class="popUp-item-sub-title">Comments <sapn class="comment-count"></span></h5>
                     <div class="comments-section">
                     
                     </div>
@@ -156,10 +162,15 @@ export const displayPopUp = async (id) => {
   PopUpDiv.append(creatPopUp(foodDetails[0]));
 
   const cmtSection = document.querySelector('.comments-section');
+  const commentNo = document.querySelector('.comment-count');
 
   const commentWrapper = await generateComments(id);
 
   cmtSection.append(commentWrapper);
+
+  const commentCount = commmentCounter();
+  commentNo.textContent = `(${commentCount})`;
+
   console.clear();
 
   PopUpDiv.style.display = 'block';

src/style.css

@@ -132,13 +132,20 @@ a {
   display: flex;
   justify-content: space-between;
   margin: 0.5rem 0;
+  width: 15rem;
 }
 
 .category {
+  width: 15rem;
   display: flex;
   justify-content: space-between;
 }
 
+.name-span {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
 .popUp-image {
   border: solid 1.5px #fff;
   border-radius: 12px;