Hi, @jssol I did some changes to the style of the app:

• Add logo to the header.
• Organize the navbar.
• Add the search feature into the header.

You can pull the changes and add anything else you like to change 😄

Project requirements

APIs

• First, you need to find an API so you can 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.
• Use our Involvement API to record the different user interactions (likes, comments).

Interfaces

• [x] Built these interfaces:

  • The home page.
  • The comments popup.

• [x] When the page loads, the web app retrieves data from:

  • The selected API shows the list of items on the screen.
  • The Involvement API to show the item likes.
  • When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
  • When the user clicks on the "Comments" button, the Comments popup appears.

• [x] Comments popup

  • When the popup loads, the web app retrieves data from:
  • The selected API shows details about the selected item.
  • The Involvement API to show the item comments.
  • When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

Counters

Counters We have counters in all the interfaces that show:

• The number of items (home).
• The number of comments (comments popup).

Useful links

• Full requirements
• Live Demo

• Create a counter function to count movies on the page.

• Move the .overlay in HTML before header to fix navigation background issue.

• Create a paragraph to print the movies count into HTML.

• Note:

  • I used #fff for the navigation, you can choose any color and opacity you like.
  • The API returns 10 movies max.
  • There is a Linters Error because of involvement.api.js, we can fix it later.

Live Demo

Amazing job on API hitting and presentation so far. The code is dry and the functionality is great. I really love it. Looking forward to seeing the complete version of the website.

• [x] Added title and description of the project
• [x] Added a screenshot
• [x] Added a list of technologies used
• [x] Added authors
• [x] Added instructions on how to use the project
• [x] Added a summary video

The test's check if the Function :

• Gives the same result as counting the DOM elements.
• Gives the correct number of items on the page.
• Gives the right number of items from the API (I used the 'Search' array to simulate the API response after fetching the data).

• Fetch like data from the involvement API
• Create likeCount() function
• Get movies like count from the API
• Display the data on the home page

###Note: This task doesn't post likes when clicking on the like button, if you want to test the functionality you need to send data manually, you can use tools like Postman for this.

Link Demo

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

Closes #14

:warning: Very important note :warning:

I have encapsulated previous functionalities into functions, may you check them and incorporate them in your workflow because we need to organize our code well.

Check out the live demo here