diff --git a/README.md b/README.md index 6a70792..08d3fc4 100644 --- a/README.md +++ b/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 :
-```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) diff --git a/package.json b/package.json index 96e8164..2e60714 100644 --- a/package.json +++ b/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", diff --git a/preview.gif b/preview.gif index 287afbd..7b62cc4 100644 Binary files a/preview.gif and b/preview.gif differ diff --git a/src/scripts/index.js b/src/scripts/index.js index a10e1ef..239fc09 100644 --- a/src/scripts/index.js +++ b/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 = '

Pick your Favorite Pokemon!

'; if (pageId === '#pokemons') { await displayPokemons(); await displayLikes(); + displayPopup(); displayCounters(); } const navChild = document.querySelector('.nav-child'); diff --git a/src/scripts/modules/comments.js b/src/scripts/modules/comments.js index 84ea8f0..81354e7 100644 --- a/src/scripts/modules/comments.js +++ b/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 { diff --git a/src/scripts/modules/popup.js b/src/scripts/modules/popup.js index ff1500a..3f10214 100644 --- a/src/scripts/modules/popup.js +++ b/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'); }); }); diff --git a/src/scripts/styles/pages/_home.scss b/src/scripts/styles/pages/_home.scss index 6f95111..726d027 100644 --- a/src/scripts/styles/pages/_home.scss +++ b/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%; diff --git a/src/scripts/tests/comments.test.js b/src/scripts/tests/comments.test.js index fe43f6f..bb2151c 100644 --- a/src/scripts/tests/comments.test.js +++ b/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); }); }); \ No newline at end of file