Hello 👋🏻

Here's the link to our Github project:

https://github.com/carloshs1994/choose-your-pokemon/projects/1

There are two people in this team project.

Cheers!

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Video

Here's a video describing the project requirements and contains a demo of it: Presentation Video

Now into the project...

Changes implemented in "display-list" task 💻

• ✅ Add Function to retrieve a list of 20 Pokemons and their data.
• ✅ Add Function that displays a list of cards containing basic Pokemon info: Name and Image.
• ✅ Add Mocks for API Handler Function and SVG images.
• ✅ Add test for DOM manipulation (Inserting cards li elements).

Changes implemented in "popup" task 📄

• ✅ Create a comments popup only with the top section
• ✅ When the popup loads, the web app retrieves data from the Pokeapi
• ✅ Shows details about the selected pokemon
• ✅ Add event listener to the comments buttons
• ✅ Resolve merge issues with development

Changes implemented in "display-add-likes" task 💯

• ✅ Create getLikes function to retrieve an array of objects containing the like info for each card.
• ✅ Create displayLikes function to set the likes of the cards that have like info.
• ✅ Create addLike function to post like info to the API
• ✅ Add event listener to the heart button to call addLike.
• ✅ Allow the user to link only once. That way it's kept a more consistent Dataset. (Trick: To like again, you can reload the page)

Changes implemented in "Show-comments" task ☄️

• ✅ When the popup loads, the web app retrieves data from the Involvement API to show the item comments.
• ✅ Implement the "add new comment" form on the Comments pop up according to the wireframe

Changes implemented in "items-counter" task 🔄

• ✅ Add tests for itemsCounter function
• ✅ Call itemsCounter to display the number of Pokemons next to the tag in the Navbar

Changes implemented in "test-comments" task 🧪

• ✅ My code follows the style guidelines of this project.
• ✅ Add test for the commentCounter function
• ✅ Implement the function to count the number of comments

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Excellent and beautiful project guys! I only have one minor issue.

Issue

https://github.com/carloshs1994/choose-your-pokemon/blob/7ffcf1d5bb1ff194b3399b715fceb6ad032000b6/src/scripts/modules/comments.js#L23-L26

The name of the commentCounter function does do not reflect its functionality, because it gets from the very beginning the value that it is supposed to return, in this case, the length of the comment array. What it is actually doing is checking that the length of the comment array is valid.

Suggestion

To fix this issue I would recommend that in the commentCounter function put as a parameter the array of comments, and then return the length of the array.

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "set-up" branch

• ✅ Add Webpack and Jest.
• ✅ Add Assets.
• ✅ Structured styling.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi there, @carloshs1994

Thanks for taking the time to review the project

I was stepping by and thought about refactoring the color scheme we previously chose for the project. I've been learning a bit about material guidelines for these colors and thought about giving it a try here. Please let me know what you think!

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "Style Refactor" branch

• ✅ This PR solves #51
• ✅ Included new color scheme in _variables.scss
• ✅ Applied new color scheme to webpage

Final notes

Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

Hi @JohnFTitor 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "pokedex" branch

• ✅ My code follows the style guidelines of this project.
• ✅ The popup is responsive using grid.
• ✅ Add simple Pokedex to desktop size.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "about-page" branch

• ✅ Add About page section.
• ✅ Add Spinner that displays while the data is being fetched.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "see-more-feature" branch

• ✅ Add "See More" Button that retrieves 10 pokemon from the API and displays them on the page, Limit allowed 500 Pokemon.
• ✅ Add test case for the Button feature and an additional function to simulate events.
• ✅ Add PokeLogo to page

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "docs-and-fixes" branch

• ✅ Fix minor bugs.
• ✅ Add project documentation.

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi @JohnFTitor 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "popup-style" branch

• ✅ Color and style have changed
• ✅ Add transitions to buttons
• ✅ Change layout so it's more responsive

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

Hi there 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "home-page-styling" branch

• ✅ Add Styles to the layout.
• ✅ Add media query for small devices.
• ✅ Add Preconnect link to HTML to speed up page loading.

Final notes

Let me know if anything needs to be changed per good practices, readability, performance or if a feature implemented may break your current work. Again, thanks for the review!

The Pokedex looks bad when you are on a wide but short screen. The comments sections overlap with the Pokedex and the pokemon's image is too big for its container.

Hi @JohnFTitor 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "game-page" branch

• ✅ My code follows the style guidelines of this project.
• ✅ The mix and match game follows Fisher-Yates Shuffle Algorithm
• ✅ We use the pokeapi to create the images for the cards inside the board
• ✅ We added animations and transitions to the cards to make them more interactive
• ✅ We used a class to store all the game's logic

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

When the user opens the popup, the Pokedex offers the option to retrieve more information about the pokemon. When the user clicks the button 'see more' the Pokedex shows other attributes to the user