Added new functions to submit a new comment to a recipe using the comments API

In this milestone, we created a JS function to send a new comment from a form to the server using API and then retrieve an updated list of comments using the get comments API function.

Added comments section to the modals

New JS functions were added to request comments data to the server through an API and then process the returned values and display it on the modals for every recipe item.

Created comments modal for every recipe on the page

In this milestone, we added the modal structure using HTML, JS, APIs, and CSS.

Summary:

• Build basic HTML, CSS structure of the modal.
• Used APIs to retrieve information for every recipe on the page.

Build website for the El Pesquero restaurant.

In this milestone, we created the home page for the restaurant using APIs for requesting meals information to the server and displaying them on the page into a grid cards layout. Also, we implemented a pop-up feature that displays the specific meal details and allows the user to add a comment.

Featured:

• Used MealsDB API to retrieve meals data and display it on the page.
• Used Involvement API to implement Like functionality and Comments interactions.
• Used Bootstrap to create the main layout and the modal structure.
• Used Aos Animate Library to create animations on the meal cards.

Good job @LuisSalas94 @helio3197 :1st_place_medal: !

What we liked:

• Professional commits
• The loading modal when opening the popup window
• Well structured code
• Usage of the map and join methods

Congratulations and happy coding :slightly_smiling_face:

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.

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.

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).

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).

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.

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.

Hello @LuisSalas94 and @helio3197 👋,

You've done a great job implementing this project thus far. Some observations I have made:

• Your code is really clean and structured, and it follows the best HTML,CSS and Javascript practices ✅
• The design looks great and is user friendly ✅

However, there are some minor issues that you might want to fix to improve a user's experience on your site!

1. Some of the food tags return a null value. It would be nice to catch such situations and handle them, probably return a default tag whenever a null value is returned.(See the screenshot)
2. On updating comments, the number of comments is not updated until you refresh the page. The user experience will be improved greatly if you the number of comments is updated on the fly rather than after reloading the page. .(See the screenshot)
3. The mobile version of your site need some additional space on either sides of the page. This is not a requirement but you can add it for better design

<img width="721" alt="Screenshot 2022-03-11 at 17 21 40" src="https://user-images.githubusercontent.com/3567 4623/157887065-25da3b48-6b7e-4f8c-b659-c4f0815ebf33.png"> .