Javascript Capstone Project : Let's Chill #34

Nemwel-Boniface · 2022-03-10T14:29:07Z

Hello reviewer(s) 👋 👋

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

General requirements

There are no linter errors.
Followed the Github flow.
The documentation is professional.

HTML/CSS & JavaScript requirements

Followed list of best practices for HTML & CSS.
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.

Milestone 2 : Project header

Add footer markup and style it for issue #16

Milestone 1 : Complete Project set up

Project Milestone 4 : Display movies

-modifed display page in index.js to uinique id of the cards

Create html elements dynamically for the comment popup Add event listener for the comment and and close buttons

make the posiotion fixed and blured the background

Comment popup (#14)

Milestone 6 : Display likes

-Add a function that post/add a comment to the involement API -Add a function taht retrieve comments from the involement API -Add a comment counter

Add functionality for the comment popup section

Milestone 8 : all movies counter

Add a test for comment counter

Milestone 10 : Items counter test

Add styling for the movie cards Add styling for the navbar

Milestone 11 : Final enhancement

netlify · 2022-03-10T14:29:12Z

✔️ Deploy Preview for mystifying-haibt-69e737 ready!

🔨 Explore the source changes: 36197ba

🔍 Inspect the deploy log: https://app.netlify.com/sites/mystifying-haibt-69e737/deploys/622a30369c64c0000803a2b3

😎 Browse the preview: https://deploy-preview-34--mystifying-haibt-69e737.netlify.app

Amrhub

Hi @Nemwel-Boniface and @zmekonnen251 , 👋🏻

Good job so far! 👍🏻
There are some issues that you still need to work on to go to the next project but you are almost there!
These changes aim to add some awesomeness to your awesome project and code skills.

To Highlight ✔️

Highly organized and clean code ✔️ 👨🏻‍💻
Professional documentation ✔️
Correct workflow ✔️
Meaningful commit messages ✔️

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

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.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

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.

Amrhub · 2022-03-10T14:45:33Z

src/index.js

+            event.preventDefault();
+            if (usernameInput.value !== '' && commentInput.value !== '') {
+              commentCount += 1;
+              commentsCounter.innerHTML = `Comments (${commentCount})`;
+              const username = usernameInput.value;
+              const comment = commentInput.value;
+
+              addCommentToInvolvement(
+                involvementComments,
+                i,
+                username,
+                comment,
+              );
+            }
+            usernameInput.value = '';
+            commentInput.value = '';
+          });
+        });
+        movieBtn.append(comment, reservation);
+        img.src = result.image.medium;
+        movieDesTop.append(movieTitle, like);
+        movieDes.append(movieDesTop, likesP);
+
+        movie.append(img, movieDes, movieBtn);
+        movieWrapper.appendChild(movie);
+      });
+  }


Great project guys, appreciate your effort. there is a just tiny thing that can be improved if figure it will be easy for you 🤓, When a user clicks comment the comments counter increases which are perfect but we also need to update the screen right away just for better feedback for the user. for example, we know as developer that comment will be displayed after refresh but a user if he doesn't get feedback right away it will be a frustrating experience for him.

Amrhub · 2022-03-10T14:46:16Z

src/index.test.js

+const { commentCounterFunc } = require('./modules/commentCounter.js');
+
+const { countAllMovies } = require('./modules/movieCounter.js');
+


It's always great to see testing 💯

…submitted it

Dipeshtwis

Hi @Nemwel-Boniface & @zmekonnen251,

Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! 🎉

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.

Nemwel-Boniface and others added 30 commits March 7, 2022 19:54

Update include project linters

0d28ca4

Update included markup for ptoject navbar

05881bf

Update include project header styling

be2969d

Update project file

310fd47

Update checked and fixed Linter errors

dfa021a

Update include jest setup

ee70bef

Merge pull request #22 from Nemwel-Boniface/projectHeader

0c202dc

Milestone 2 : Project header

Add footer markup and style it for issue #16

9758bc0

Merge pull request #23 from Nemwel-Boniface/footer

66a7f33

Add footer markup and style it for issue #16

Merge pull request #24 from Nemwel-Boniface/projectSetUp

d5c0f8e

Milestone 1 : Complete Project set up

Update include project markup

494b894

Update to the gitignore file

bc5f9db

Update to project scripts

ecd89f7

Update to project styling

3f9d61a

Update to README.md files

85387ec

Update checked and fixed linter errors

854a604

Checked image dir

9b0d37a

Merge pull request #25 from Nemwel-Boniface/displayMovies

f0ab006

Project Milestone 4 : Display movies

Modified display page

7bfea39

-modifed display page in index.js to uinique id of the cards

Add contact form markup

1957dff

Add a comment popup script

9df888c

Create html elements dynamically for the comment popup Add event listener for the comment and and close buttons

Add basic styling for the comment pop up

5036e07

make the posiotion fixed and blured the background

modified gitignore to prevent dist from commited

fd042b4

other modified config files

f9dfd6d

Delete dist directory

ab05a7a

Delete dist directory

e85a127

Add font-size for comment list header

3a0d34f

Update README.md

7bf2b59

Merge pull request #26 from Nemwel-Boniface/comment-popup

0a8c3f3

Comment popup (#14)

Update included send likes to API

04969ea

zmekonnen251 and others added 24 commits March 9, 2022 16:03

Merge pull request #27 from Nemwel-Boniface/displayLikes

7c3c00d

Milestone 6 : Display likes

Add fuctionality for the comment popup section

0396341

-Add a function that post/add a comment to the involement API -Add a function taht retrieve comments from the involement API -Add a comment counter

Merge pull request #28 from Nemwel-Boniface/comment-functionaliy

24d8dc5

Add functionality for the comment popup section

Update to the README.md

5b5b72a

Update to index markup

bedbd2f

Update to movie number counter

9f017d0

Update checked and fixed all linter errors

24043ac

Add a test for comment counter

40412b1

Update to the count all movies function

ed12732

Merge pull request #29 from Nemwel-Boniface/countAllMovies

d1c605f

Milestone 8 : all movies counter

Merge pull request #30 from Nemwel-Boniface/comment-counter-test

2846bd7

Add a test for comment counter

Update included tests for all movies counter

a49ee7d

Checked and fixed linter errors

eaabd2d

Merge pull request #31 from Nemwel-Boniface/itemsCounterTest

57b8387

Milestone 10 : Items counter test

Add final enhancement

4ebb7cb

Add styling for the movie cards Add styling for the navbar

Update to the project styling

ec284b2

Make the comment popup mobile responsive

8d79b37

Update made the movies section mobile responsive

b758e5d

Update styled the navbar mobile version

2b0fd5b

Update the Mobile version and fixed linter errors

7cc92bf

Update README.md

d35b3ac

Merge pull request #33 from Nemwel-Boniface/final-enhancement

cf81f50

Milestone 11 : Final enhancement

Update to the README.md contents

c83ac85

Created MIT.md file

b34880d

Amrhub suggested changes Mar 10, 2022

View reviewed changes

zmekonnen251 added 2 commits March 10, 2022 18:04

Make the comment to be added in the comment list immediatly the user …

a2fa8ab

…submitted it

Fix linter error

36197ba

Dipeshtwis approved these changes Mar 10, 2022

View reviewed changes

zmekonnen251 merged commit 6f65a9d into main Mar 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript Capstone Project : Let's Chill #34

Javascript Capstone Project : Let's Chill #34

Nemwel-Boniface commented Mar 10, 2022

netlify bot commented Mar 10, 2022 •

edited

Amrhub left a comment

Amrhub Mar 10, 2022 •

edited by zmekonnen251

Amrhub Mar 10, 2022

Dipeshtwis left a comment

		const { commentCounterFunc } = require('./modules/commentCounter.js');

		const { countAllMovies } = require('./modules/movieCounter.js');

Javascript Capstone Project : Let's Chill #34

Javascript Capstone Project : Let's Chill #34

Conversation

Nemwel-Boniface commented Mar 10, 2022

Hello reviewer(s) 👋 👋

General requirements

HTML/CSS & JavaScript requirements

Project requirements

netlify bot commented Mar 10, 2022 • edited

Amrhub left a comment

Choose a reason for hiding this comment

To Highlight ✔️

Required Changes ♻️

Optional suggestions

Amrhub Mar 10, 2022 • edited by zmekonnen251

Choose a reason for hiding this comment

Amrhub Mar 10, 2022

Choose a reason for hiding this comment

Dipeshtwis left a comment

Choose a reason for hiding this comment

netlify bot commented Mar 10, 2022 •

edited

Amrhub Mar 10, 2022 •

edited by zmekonnen251