Display comments feature

This branch edit some functions to make the comments display when the user clicks on the "comments" button:

• Retrieve information from the Involvement API to get comments
• Display comments if there are any.
• Add hover effect to close button in the PopUp window.
• Connect the "comment" button's event listener to the popUp window

💡

You have done a great job @vechicin However, only as a suggestion, you should add a good README file And add some style to your project!!!! Once you do that, your project would be stunning.

Pokedex Capstone project 🚀

This capstone project contains:

• Interaction with involvement API
• Interaction with Pokeapi
• User can retrieve information about Pokemons.
• User can submit comments and likes using the involvement API.
• Likes are displayed in the like button.
• Comments are displayed in the comment box of the PopUp window.
• To watch the project's video presentation, follow this link

💹 PopUp Styling

• Add background color to the modal window.
• Add margins and padding to make the design more clear.
• Align text in the comment box to the left.
• Styling from inputs.
• Correctly center placeholder picture.
• Give background color to even comments in the table.
• Fix Pop-Up behavior in which the window was displayed when the page was loaded.

In this feature I did the following:

• Styled the header with some animations for the navbar links
• Created cards for each individual Pokemon and changed their images. The buttons have some interactions when you hover over and click them
• Changed the font for the entire page

PopUp Styling tasks.

• [x] Add paddings and margins to the elements in the window.
• [x] Align comments to the left.
• [x] Add colors to elements in PopUp.
• [x] Make sure the blurred effect cover all the page.
• [x] Make sure the background bokeball picture is aligned to the center.

This is the list of styling tasks for the homepage:

• Use Lato as the font
• Make sure every li has a border to give it the look of a card similar to the one in the popup window
• Move the navbar towards the right
• Add hover animation to navbar links
• Change the grid to have only three columns and add 21st Pokemon to make the page look even, don't forget to center the cards on the page
• Add rotational animation to Pokeball icon in the footer
• Style buttons

Add unit test for the comment counter function

• The function performs a test several times on the same feature to check its behavior with multiple array lengths.

Add counter for comments.

• This feature includes a counter for the comments.
• In case there are no comments for the displayed Pokemon, the counter will display the text Be the first one to comment

Hi @MacCrazyman, 👋🏻

Great work working on this project. Everything looks really organized and well thought out. 🔥 💯

I don't have anything for you to change as for now.

Again, fantastic work. Keep it up. 🚀 👍🏻

In this feature I did the following:

• Create a function to get the number of likes from the API
• Create a function and an event listener to push likes to the API
• Create a function to render the number of likes each Pokemon has on the page