JavaScript capstone project - Your API-based webapp #40

danifromecuador · 2023-04-22T21:04:04Z

In this pull request my partner @Mylo16 and I have created a movie web app using an API and following the following requirements:

Use ES6, linters, git flow, and Webpack
Send and receive data from two different APIs
Working with asynchronous Javascript
Performing code reviews for team members
Writting units test for JavaScript functions.

Also, we have recorded a video presentation:

https://drive.google.com/file/d/1Nb_6EsuK566uN8HR-VdVr0pifxITkRaI/view

Assets feature

In this pull request I'm suggesting the API for our movies webpage

Setup project

Create footer in HTML

Display list of items

Likes counter API

Finished comments counter and its testing

Test items counter function

Add second author and live demo link

Change source of heart button link

addod19

Hi @danifromecuador and @Mylo16,

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!

Highlights

Involvement API is used to record user interaction 🚀
App contains a home page and a comments pop up 💯
The web app should retrieve data from the selected API and show the list of items on the screen 🎆
Homepage footer is similar to the mockup 👍
Comment pop up works as expected 🥇
When a user clicks on the Like button of an item, the interaction gets recorded in the Involvement API, and the screen gets updated 🚀
Function for the counters present 👍
All unit test passed with edge cases 💯

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.

You can also consider:

Capitalizing all commit messages and also write commit messages like Fix instead of Fixed going forward

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.

addod19 · 2023-04-22T21:57:12Z

src/index.html

+  <header>
+    <nav>
+      <div class="logo-container"><img class="logo" src="../assets/logo.png" alt="application logo"></div>
+      <ul id="nav-lists">
+        <li class="nav-list"><a href="#arrow">Arrow(1)</a></li>
+        <li class="nav-list"><a href="#blacklist">BlackList(1)</a></li>
+        <li class="nav-list"><a href="#blacklist">The Last of Us(1)</a></li>
+      </ul>
+    </nav>
+  </header>


It would be better if the home page header can be seen as we have in the mock up. Currently the header is not accessible as we can see in the screenshot below as compared to the mockup

addod19 · 2023-04-22T21:58:58Z

src/index.html

+  <footer>
+    <p>Created by Eric and Dani under CC license</p>
+  </footer>
+  <!-- <script src="index.js" type="module"></script> -->


Optional

It would be nice if we remove commented piece of code, it makes our codebase messy and difficult to understand

addod19 · 2023-04-22T22:01:36Z

src/index.js

+  const epiArray = await apiGet();
+  for (let i = 0; i < epiArray.length; i += 1) {
+    if (epiArray[i].season === 1) {
+      mainBody.innerHTML += generateMovies(epiArray[i], numberOfLikes[i].likes);


It would be better if we can see the like icons as we have in the mockup, our is not showing

addod19 · 2023-04-22T22:05:42Z

src/modules/userInteraction.js

+  return `
+    <div id = "modal">
+        <div id = "modal-content">
+            <img id = "close-btn" src = "../assets/closebtn.png" alt = "close button"/>


The close icon in the popup window is not showing as expected, it could be a path problem. Let us kindly resolve this

addod19 · 2023-04-22T22:18:11Z

src/styles.css

+  width: 80%;
+  position: relative;
+  margin: auto;
+  display: flex;


It would be better if we follow CSS best practices, like for example; display: flex has appeared more than 3 times so it would be better if we create a class for it and attach it to the HTML elements

addod19 · 2023-04-22T22:19:30Z

src/styles.css

+
+/***** MAIN SECTION *****/
+
+#main {


It would be better if we use class attributes for styling our elements instead of the ID we have currently

addod19 · 2023-04-22T22:25:26Z

README.md

+
+## 📝 License <a name="license"></a>
+
+This project is [MIT](./MIT.md) licensed.


It would be better if we create the MIT license file in our root directory so that we can fix the 404 error page not found

Owusu-Desmond

Hi @danifromecuador and @Mylo16 👋

Great work on making the changes requested by a previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some changes you still need to work on before you move on to the next project but you are almost there.

Highlights 👍

✔️ Good commit history.
✔️ No linter errors.
✔️ Your project is well documented

Required Changes ♻️

Check the comments under the review.

Optional suggestions

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.

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.

Owusu-Desmond · 2023-04-23T00:43:07Z

src/index.js

+    if (epiArray[i].season === 1) {
+      mainBody.innerHTML += generateMovies(epiArray[i], numberOfLikes[i].likes);


As requested by the previous code reviewer, It would be better if you make the like icons show as we have in the mockup or design guidelines. Currently, the icons are not showing as you can see below 👇

Shedrack-Sunday

Hi @danifromecuador

Congratulations! 🎉 Your project is complete and ready to be merged! 🚀

Highlights

Descriptive PR ✔️
Nice use of code semantics✔️
Beautiful UI ✔️

Optional Suggestions 💡

While these comments with the [OPTIONAL] prefix won't prevent the approval of this pull request, I strongly recommend taking them into account as they can improve your code. Some of them were missed by the previous reviewer and addressing them will really enhance your application.
Cheers and Happy coding!👏👏👏

If you have any questions or need clarification on anything, feel free to leave a comment in the pull request thread, and don't forget to tag me so I'll receive the notification.

As per the Code reviews limits policy, you have a limited number of reviews per project. If you feel that the code review was unfair, you can request a second opinion using this form.

Mylo474 and others added 30 commits April 18, 2023 17:52

Added project assets

731d783

fixed error

d3f10c6

Added project assets

01bc41b

Add txt file that describes the API tha we will use

da73475

Merge pull request #23 from danifromecuador/assets-feature

b6d0d04

Assets feature

Add webpack files

0758326

Merge pull request #24 from danifromecuador/find-API

c76ee0b

In this pull request I'm suggesting the API for our movies webpage

Add linters files

afa19bf

Add jest files for testing

72cb4e4

Add babel files to manage ES6 syntax

3b70e80

Create dist folder by running this command: npm run build

4448a8f

Merge pull request #25 from danifromecuador/setup-project

be8a842

Setup project

Create footer in HTML

f8d04b1

Added homepage header

06b7320

Merge pull request #26 from danifromecuador/footer

3b28b66

Create footer in HTML

Fix conflict

7b36eaa

Create generateMovies function

6c39f94

Merge pull request #28 from danifromecuador/display-list-of-items

eedf80f

Display list of items

Create likes counter with involvment API

4f0415e

Fix linter errors

9c44836

Run npm run build command to create the dist files

83cc617

Added comment popup first section

109a6cc

fix linter errors

9d97fdb

Merge pull request #29 from danifromecuador/likes-counter-api

bdf21be

Likes counter API

Update screen when the user clicks on the like button

7c0a984

fixed conflict

49fe1a8

fixed conflict

d7160c3

solved git conflict

a538852

fixed conflict

3cd8688

Merge branch 'dev' into add-new-like

c2677bd

Mylo474 and others added 15 commits April 21, 2023 20:49

Fixed linter errors

f686b9e

Fixed linter errors

c01e4e2

Updated READMe.md file

e763ba1

Merge pull request #35 from danifromecuador/comments-counter

7b2b394

Finished comments counter and its testing

Create episodesCounter test

b2541aa

Fix linter errors and Run npm run build to create dist files

f05666e

Merge pull request #36 from danifromecuador/test-items-counter

3fc4d39

Test items counter function

styled homepage

832feef

Merge branch 'test-items-counter' into dev

0f1b54a

Add second author and live demo link

3a8f4bf

Fix stylelint error

e953fd2

Merge pull request #37 from danifromecuador/update-readme

8b60f02

Add second author and live demo link

Change source of heart button link

fa3b544

Merge branch 'dev' into fix-heart-button

94c075d

Merge pull request #38 from danifromecuador/fix-heart-button

cc10ebe

Change source of heart button link

addod19 suggested changes Apr 22, 2023

View reviewed changes

Mylo16 and others added 4 commits April 23, 2023 00:02

Rename LICENSE to MIT.md

07c479a

Fix review errors

76cdbf4

Fix review errors

f9b1cb9

Fix review errors

4d40b08

Owusu-Desmond suggested changes Apr 23, 2023

View reviewed changes

danifromecuador temporarily deployed to github-pages April 23, 2023 01:08 — with GitHub Pages Inactive

danifromecuador added 2 commits April 22, 2023 20:35

Change icon images for icon unicode

e004902

Install webpack again and Fix linter errors

6471dda

danifromecuador temporarily deployed to github-pages April 23, 2023 01:41 — with GitHub Pages Inactive

Shedrack-Sunday approved these changes Apr 23, 2023

View reviewed changes

Mylo16 merged commit b1f9ea0 into main Apr 23, 2023

danifromecuador deployed to github-pages November 13, 2024 00:22 — with GitHub Pages View deployment

danifromecuador deployed to github-pages January 10, 2025 05:50 — with GitHub Pages View deployment

danifromecuador deployed to github-pages January 10, 2025 05:51 — with GitHub Pages View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JavaScript capstone project - Your API-based webapp #40

JavaScript capstone project - Your API-based webapp #40

danifromecuador commented Apr 22, 2023

addod19 left a comment

addod19 Apr 22, 2023

addod19 Apr 22, 2023

addod19 Apr 22, 2023

addod19 Apr 22, 2023

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading

Owusu-Desmond left a comment

Owusu-Desmond Apr 23, 2023

Shedrack-Sunday left a comment


		## 📝 License <a name="license"></a>

		This project is [MIT](./MIT.md) licensed.

		if (epiArray[i].season === 1) {
		mainBody.innerHTML += generateMovies(epiArray[i], numberOfLikes[i].likes);

JavaScript capstone project - Your API-based webapp #40

JavaScript capstone project - Your API-based webapp #40

Conversation

danifromecuador commented Apr 22, 2023

In this pull request my partner @Mylo16 and I have created a movie web app using an API and following the following requirements:

addod19 left a comment

Choose a reason for hiding this comment

Hi @danifromecuador and @Mylo16,

Highlights

Required Changes ♻️

Optional suggestions

addod19 Apr 22, 2023

Choose a reason for hiding this comment

addod19 Apr 22, 2023

Choose a reason for hiding this comment

Optional

addod19 Apr 22, 2023

Choose a reason for hiding this comment

addod19 Apr 22, 2023

Choose a reason for hiding this comment

addod19 Apr 22, 2023 • edited by danifromecuador Loading

Choose a reason for hiding this comment

addod19 Apr 22, 2023 • edited by danifromecuador Loading

Choose a reason for hiding this comment

addod19 Apr 22, 2023 • edited by danifromecuador Loading

Choose a reason for hiding this comment

Owusu-Desmond left a comment

Choose a reason for hiding this comment

Highlights 👍

Required Changes ♻️

Optional suggestions

Owusu-Desmond Apr 23, 2023

Choose a reason for hiding this comment

Shedrack-Sunday left a comment

Choose a reason for hiding this comment

Highlights

Optional Suggestions 💡

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading

addod19 Apr 22, 2023 •

edited by danifromecuador

Loading