Docs and fixes

README.md

@@ -1,29 +1,31 @@
 ![](https://img.shields.io/badge/Microverse-blueviolet)
 
-# Project Title
+# Choose Your Pokemon
 
-> Project headline description
+> "Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: [PokéAPI](https://pokeapi.co/) and Involvement API. Here we display a list of 20 Pokemons for whom one can like, display more info, and comment; all based on the data from these two external resources.  
 
 ![Preview](./preview.gif))
 
-Project Description
+Got to code them all! The ultimate fan database is now available. Go through the list of Pokemons, pick the best ones (including evolution), comment, like, and see which one is the best among the community of Trainers!
 
 ## Built With
 
-Tecnologies used
+- HTML/SCSS, JavaScript.
+- WebPack, Jest, External APIs.
+- Visual Studio Code, Polypane.
 
 ## Live Demo
 
-[Live Demo Link]()
+[Live Demo Link](https://carloshs1994.github.io/choose-your-pokemon/)
 
 
 ## Getting Started
 
 To get a local copy up and running follow these simple example steps.
 
-- Clone this repository with git clone```https://github.com/username/projectname.git``` using your terminal or command line.
+- Clone this repository with git clone```git@github.com:carloshs1994/choose-your-pokemon.git``` using your terminal or command line.
 - Change to the project directory by entering : <br>
-```cd projectname``` in the terminal
+```cd choose-your-pokemon``` in the terminal
 
 ### Prerequisites
 
@@ -61,6 +63,11 @@ The deployment can be found in the Github Pages of this repository or through th
 
 ## Authors
 
+👤 **Carlos Herver Solano**
+
+- GitHub: [@carloshs1994](https://github.com/carloshs1994)
+- Twitter: [@hscarlos_](https://twitter.com/hscarlos_)
+
 👤 **Andrés Felipe Arroyave Naranjo**
 
 - GitHub: [@JohnFTitor](https://github.com/JohnFTitor)

package.json

@@ -12,15 +12,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/JohnFTitor/webpackTemplate.git"
+    "url": "git+https://github.com/carloshs1994/choose-your-pokemon.git"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/JohnFTitor/webpackTemplate/issues"
+    "url": "https://github.com/carloshs1994/choose-your-pokemon/issues"
   },
-  "homepage": "https://github.com/JohnFTitor/webpackTemplate#readme",
+  "homepage": "https://carloshs1994.github.io/choose-your-pokemon/",
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.16.8",
     "babel-eslint": "^10.1.0",

src/scripts/index.js

@@ -23,10 +23,11 @@ linkTags.forEach((tag) => {
   const reGex = /#[\w-]+/g;
   tag.addEventListener('click', async (event) => {
     const pageId = event.target.href.match(reGex)[0];
-    main.innerHTML = '';
+    main.innerHTML = '<h1> Pick your Favorite Pokemon! </h1>';
     if (pageId === '#pokemons') {
       await displayPokemons();
       await displayLikes();
+      displayPopup();
       displayCounters();
     }
     const navChild = document.querySelector('.nav-child');

src/scripts/modules/comments.js

@@ -20,9 +20,9 @@ const addPokemonComments = async (pokemonId, username, comment) => {
   return json;
 };
 
-const commentCounter = (length) => {
-  if (length === undefined || length === null) return 0;
-  return length;
+const commentCounter = (json) => {
+  if (json.length === undefined || json.length === null) return 0;
+  return json.length;
 };
 
 export {

src/scripts/modules/popup.js

@@ -12,13 +12,13 @@ const updateComments = async (pokemonId) => {
   document.querySelector('.popup-comments > ul').innerHTML = '';
   if (json.length !== undefined) {
     json.forEach((user) => {
-      document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json.length)})`;
+      document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json)})`;
       const li = document.createElement('li');
       li.innerText = `${user.creation_date}. ${user.username}: ${user.comment}`;
       document.querySelector('.popup-comments > ul').appendChild(li);
     });
   } else {
-    document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json.length)})`;
+    document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json)})`;
   }
 };
 
@@ -28,10 +28,11 @@ export default () => {
   const xImg = document.createElement('img');
   const form = document.querySelector('form');
   let pokemonId = '';
+  close.innerHTML = '';
   xImg.src = XButton;
   close.appendChild(xImg);
   buttons.forEach((button) => {
-    button.addEventListener('click', (event) => {
+    button.addEventListener('click', async (event) => {
       const { id } = event.target;
       pokemonId = event.target.parentElement.id;
       getPokemonInfo(id).then((json) => {
@@ -83,7 +84,7 @@ export default () => {
           document.querySelector('.popup-comments > ul').innerHTML = '';
         });
       });
-      updateComments(pokemonId);
+      await updateComments(pokemonId);
       document.querySelector('.popup').classList.add('show');
     });
   });

src/scripts/styles/pages/_home.scss

@@ -89,6 +89,14 @@ main {
     padding: 10px;
     background-color: $black-custom;
     box-shadow: rgb(204, 219, 232) 3px 3px 6px 0 inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
+    transition: 0.2s;
+
+    &:hover {
+      box-shadow: rgb(38, 57, 77) 0 20px 30px -10px;
+      transform: scale(1.02);
+      background-color: black;
+      border: 2px solid $white-custom;
+    }
 
     img {
       width: 100%;

src/scripts/tests/comments.test.js

@@ -3,17 +3,17 @@ import { commentCounter } from '../modules/comments.js';
 describe('Comment section test', () => {
   test('should return cero if the array is empty', () => {
     const arr = [];
-    expect(commentCounter(arr.length)).toBe(0);
+    expect(commentCounter(arr)).toBe(0);
   });
   test('should return cero if we pass an object', () => {
     const obj = {
       error: 'Key is not defined',
       status: '400',
     };
-    expect(commentCounter(obj.length)).toBe(0);
+    expect(commentCounter(obj)).toBe(0);
   });
   test('should return 2 if the array length is 2', () => {
     const arr = [{ username: 'CHS' }, { username: 'John Titor' }];
-    expect(commentCounter(arr.length)).toBe(2);
+    expect(commentCounter(arr)).toBe(2);
   });
 });