Hello reviewer(s) :wave: :wave:

:sunglasses: This is @zmekonnen251 and @Nemwel-Boniface 's team. :sunglasses: In this Capstone project we were able to:

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS & JavaScript requirements

• [x] Followed list of best practices for HTML & CSS.
• [x] Followed list of best practices for JavaScript.

Project requirements

APIs

• used TVmaze API: data about TV series and movies.
  • Get a list of items with a unique item id (or generate the unique id).
  • For a given item, get detailed information about it.

Interfaces

• built these interfaces:
  • The home page.
  • The comments popup.
• followed the layout of the wireframes provided and personalized the rest of the design.
• Home page
  • When the page loads, the web app retrieves data from:
    • The selected API shows the list of items on screen.
    • The Involvement API to show the item likes.
  • The page makes 2 requests:
    • One to the base API.
    • And one to the Involvement API.
  • 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.
• Home page header and navigation are similar to the given mockup.
• Home page footer is similar to the given mockup.
• 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 We have counters in all the interfaces that show:

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

Even if the API gives you these numbers, you will create a specific function to calculate these numbers in each page. These count functions need to be covered with unit tests using Jest.

Technical set up

• Set up the repository on GitHub and use Gitflow.
• Set up webpack.
• Set up a JavaScript testing library (Jest).

Thank you for taking the time to review our project.

Hi @Nemwel-Boniface and @zmekonnen251 Your project looks good so far :+1: but there is something you can improve.

• Your styling is good but if you make more styling to your home page your project will look better
• Please make sure that your README.md file has a proper documentation

By the way you did a great job :clap: :clap:

Hello @zmekonnen251 :wave: :wave:

In this milestone I was able to:

• [x] Successfully make Unit tests for the movie counter function
• [x] Modulated the movie counter
• [x] Followed list of best practices for JavaScript.
• [x] Met all the project milestone requiements
• [x] No linter errors

Thank you for taking the time to review my project

In the Milestone I did:

General requirements

• [x] There are no linter errors.
• [x] Followed the Gitflow.
• [x] The documentation is professional.

JavaScript requirements

• [x] Followed list of best practices for JavaScript.

Project requirements

• [x] Add test for the comment counter

Thank you for reviewing!

Hello @zmekonnen251 :wave: :wave:

In this milestone I was able to:

• [x] Update the README.md to include a live demo of the project
• [x] Included the all movies counter
• [x] Followed list of best practices for JavaScript.
• [x] Met all the project requirements
• [x] No linter errors

Thank you for reviewing my work.

Open-source Library

The Projects link is this one. We are a group of two

• Nemwel
• Zelalem

Hello reviewer(s) :wave: :wave:

Thank you for taking the time to review our project setup.

Hello @zmekonnen251 :wave: :wave:

In this Milestone we were able to:

• [x] Design the UI to enhance user experience
• [x] Create a mobile responsive version
• [x] Updated our README.md file
• [x] Followed list of best practices for JavaScript.
• [x] No linter errors
• [x] Met all project milestone requirements

Hello @Nemwel-Boniface 1 :wave: :wave:

In this milestone I implemented the following :

• [x] Create the dynamically update the comments on the comment popup window
• [x] Add a function that posts/add/retrieves a comment to the involvement API
• [x] Add a function that retrieves comments from the involvement API
• [x] Add a comment counter
• [x] Meet all the project milestone requirements
• [x] No linter errors

Thank you for taking the time to review my work.

Hello @zmekonnen251 :wave: :wave:

In this milestone I was able to implement the following :

• [x] Create the dynamically update the likes on button press functionality
• [x] Generate a Unique ID for the project
• [x] Modularise our project
• [x] Followed list of best practices for JavaScript.
• [x] Meet all the project milestone requirements
• [x] No linter errors

Thank you for taking the time to review my work.

In the Milestone I did:

General requirements

• [x] There are no linter errors.
• [x] Followed the Gitflow.
• [x] The documentation is professional.

JavaScript requirements

• [x] Followed list of best practices for JavaScript.

Project requirements

• [x] create a popup for the comment section
• [x] Add basic styling for the popup

Thank you for reviewing!:smile:

Hello @zmekonnen251 :wave: :wave:

In this milestone I was able to:

• [x] Use the TV Maze API to display movies info to the screen
• [x] Displayed Movies to the screen correctly
• [x] Updated the README.md file with the required information about the project
• [x] Added some animation on hover for the individual movies cards
• [x] Followed list of best practices for JavaScript.
• [x] Met all current project requirements
• [x] No linter errors

Thank you for taking the time to review my work.

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

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

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.