When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

• one to the base API
• and one to the Involvement API.

This task does not include displaying the likes button (heart icon on the wireframe) for each item.

Hi @OsvaldoBC and @KanzaTahreem,
Your project is looking great. I really enjoyed reviewing it, it shows all the hard work displayed
Congratulations! 🎉

Highlights

• The design fits the template. ✔️
• Good use of ES6 modules. ✔️
• Good use of GitFlow. ✔️
• Webpack configuration is good! ✔️
• I love the Slider 😁. ✔️

Optional suggestions

• The README.md should desscribe how someone can get an API KEY to test the project
• That's very optional but you should check the status of the response before getting the json(), in some cases the returned response is not JSON as well:
• https://github.com/KanzaTahreem/JavaScript-Capstone/blob/981163caf248f59409f46d6b39d780965a41bba3/src/modules/getMeals.js#L5
• Also in order to have a great GitHub Flow, you shouldn't keep branches that you aren't using so that people can know exactly which part of the project is currently in development

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

When the user clicks on the Like button of an item (on Homepage), the interaction is recorded in the Involvement API and the screen is updated.

Create page header according to the wireframe:

Create the main part of the homepage that keeps the layout from the wireframe:

When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

This task does not include displaying the number of likes for each item.

This task does not include the counter of the items.

Even if the API gives you the number of reservations you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Reservations pop up.

Respect the following rules:

• Each counter should be implemented as a separate module.
• A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
• A counter function should cover all the edge cases you can think about.

When the popup loads, the webapp retrieves data from the Involvement API to show the item comments.

This task does not include the counter of the comments.

• Set up Gitflow
• Set up webpack
• Set up a JavaScript testing library (Jest)

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepage.

Respect the following rules:

• Each counter should be implemented as a separate module.
• A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
• A counter function should cover all the edge cases you can think about.

Find an API to base the development of the webapp around it. The API should allow you to

• Get a list of items with a unique item id (or generate the unique id).
• For a given item, get detailed information about it.
  choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.

Choose images, text, icons, fonts.

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

Respect the following rules:

• Each counter should be implemented as a separate module.
• A counter function should look for specific DOM elements (e.g. for the comments counter it should look for comments) and make the counting based on what is actually displayed on the page.
• A counter function should cover all the edge cases you can think about.

When the popup loads, the webapp retrieves data from the Involvement API to show the item's reservations.

This task does not include the counter of the reservations.

Create a reservations popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

Make sure that the function for the reservations counter is covered with unit tests using Jest.

Make sure that you have tests for all edge cases.

Hi reviewer! 👋

Here's the link of our GitHub group project

We are a team of 2 students, Kanza and Osvaldo, and we followed the steps mentioned below for creating the project:

Create an empty repository for your group project.

• Follow the steps described in curriculum-tools-copy-projects.
• Open the GitHub project (Kanban board) in your team repo.
• Make sure that in the card titles you can see: Student A and Student B
• Make sure that each card starts with [Xpt] - that number indicates the number of points that shows how complex the task is. 1 point = 1 hour of work.
• Decide who in your team is the Student A and Student B.
• Each of the team members should assign themselves to the correct cards. Decide who will be the assignee for the cards marked as group tasks. All cards on your Kanban board should have assignees.

Hi @OsvaldoBC and @KanzaTahreem ,
Your project is looking great! The effort you have put onto it really shows. Below you will find some feedback and recommendation from our Morning session team 😸

Highlights

• Great design! ✔️
• Clean and easy-to-read code. ✔️
• Good use of ES6 modules. ✔️
• The slider on the homepage is a great addition. ✔️

Recommendations

• The GET method is the default for fetch, so you don't need to specify it in this case 🙂 . More info here.

• The popup looks great and works as intended, but since you are already using Bootstrap in your project, I would kindly encourage you to check this framework's solution that makes the job a lot easier 💻 . More info can be found here

Make sure that function for the items counter is covered with unit tests using Jest. Make sure that you have tests for all edge cases.

Create footer according to the wireframe:

Make sure that the function for the comments counter is covered with unit tests using Jest.

Make sure that you have tests for all edge cases.

Create a comments popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

Implement the "add new comment" form on the Comments pop up according to the wireframe:

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.