List structure #1

godiarksel · 2022-06-08T19:03:24Z

Created the HTML structure for the application and configured the tasks to display dynamically. This was achieved by using Javascript. The CSS styles were also applied for this milestone.

brytebee

Hi, @godiarksel👋,

Good job so far coming so far with the progress you've made! 💪💪

Highlights

You have done amazing in the following:

Webpack was used to set up the project.✔️
It has an array of simple objects containing the required keys and data types.✔️
It renders the list to the page excellently.✔️

However, there are some issues that you still need to work on to go to the next project but you are almost there!

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.

Please, remember to tag me in your question so I can receive the notification.

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 @brytebee in your question so I can receive the notification.

Use @brytebee on slack for faster responses.

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.

brytebee · 2022-06-09T11:12:58Z

README.md


-> Description the project.
+> This is a project undertaken in week two of module two to test our abilities to develop a functional application using Webpack.


Optional: This is a good description. However, it can be improved by giving a description of the functionalities of the app in this section.
In future projects, consider implementing this. 🚁

[OPTIONAL] As required by the previous, Please, add a meaningful Project description. Remember A project description is a high-level overview of why you're doing a project. The document explains a project's objectives and essential qualities. Is an essential document that provides your audience with a comprehensive overview of the project. Think of it as the elevator pitch that focuses on what and why without delving into how.

[OPTIONAL] Kindly, it would be nice to add explicit steps for cloning your app, as this will be of help to non-technical users. You can put the steps to clone and run the project in a new Getting Started section under the project's description. This includes git clone URL , cd.., etc.

The README file It is the first file a person will see when they encounter your project, so it should be fairly brief but detailed. It will make your project stand out from a bunch of others.

brytebee · 2022-06-09T11:15:23Z

src/index.js

+// const taskSection = document.querySelector('section');
+const taskInput = document.querySelector('input');
+const taskContainer = document.querySelector('.task-container');
+// const clearBtn = document.querySelector('button');


Required: For a professional-looking code base, kindly remove unused and commented out code. This improves code readability and follows the clean code convention.

brytebee · 2022-06-09T11:25:40Z

src/index.js

+  taskContainer.appendChild(tasksEl);
+  const checkBox = document.querySelectorAll('.checkbox');
+  completeTask(checkBox);
+  addToLocalStorage(task, false, checkBox.length - 1);


Required: Awesome job here 👏👏👏
Although you are required to display a static list, you've gone a step further to implement adding user entered items. However, the list index is required to begin from 1. Consider removing the - 1 in the snippet addToLocalStorage(task, false, checkBox.length - 1);

… into list-structure

BenMukebo

Hi @godiarksel,

You did a great 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!

To highlight 💪🏻

No linter errors. ✔️
GitHub flow was correctly used. ✔️
👍 Good job!

STATUS: CHANGES REQUESTED ♻️

Please Check the comments under the review and make all required changes

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 ping me @BenMukebo when you comment 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.

BenMukebo · 2022-06-09T12:11:04Z

README.md


-> Description the project.
+> This is a project undertaken in week two of module two to test our abilities to develop a functional application using Webpack.


[OPTIONAL] As required by the previous, Please, add a meaningful Project description. Remember A project description is a high-level overview of why you're doing a project. The document explains a project's objectives and essential qualities. Is an essential document that provides your audience with a comprehensive overview of the project. Think of it as the elevator pitch that focuses on what and why without delving into how.

[OPTIONAL] Kindly, it would be nice to add explicit steps for cloning your app, as this will be of help to non-technical users. You can put the steps to clone and run the project in a new Getting Started section under the project's description. This includes git clone URL , cd.., etc.

The README file It is the first file a person will see when they encounter your project, so it should be fairly brief but detailed. It will make your project stand out from a bunch of others.

BenMukebo · 2022-06-09T12:22:22Z

src/index.js

+  }
+}
+
+const taskArray = [];


As requested by the previous reviewer 👇🏻

Although you are required to display a static list, you've gone a step further to implement adding user entered items. However, the list index is required to begin from 1. Consider removing the - 1 in the snippet addToLocalStorage(task, false, checkBox.length - 1);

Make sure to address these requested changes 😄

You should have an array of some simple to do tasks (array of objects) with each object containing three keys - description [string], completed [bool], index: [number].

Then write a function that iterates over the tasks array and populates the HTML list item element for each task.

The task array is rendered dynamically to the DOM when the page load and don't forget 🤔 as requested by the previous reviewer the tasks should appear in order of the index values for each task

The requested changes were already implemented.

roshan-bajgain

Hi @godiarksel,

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

Highlights

No linter errors. ✔️
GitHub flow is followed. ✔️
Professional README file. ✔️
PR has a good title and summary. ✔️

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.

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.

godiarksel and others added 10 commits June 8, 2022 21:39

Reconfigure webpack and load project assets

389fe64

Update readme file

5a86550

Run linter checks

0fdd8f0

Fix linter errors

edec457

Fix eslint and stylelint bugs

0a41630

fix linter bugs

0b7e87c

Run linter tests

7c8bc9e

debug linter

8e34065

Fix webpack bug

29781b5

Update README.md

9db52c9

brytebee suggested changes Jun 9, 2022

View reviewed changes

godiarksel added 2 commits June 9, 2022 14:43

Make project adjustments

d710383

Merge branch 'list-structure' of https://github.com/godiarksel/my-to-do…

594a229

… into list-structure

BenMukebo suggested changes Jun 9, 2022

View reviewed changes

godiarksel and others added 2 commits June 9, 2022 16:23

Update the dist/main.js

4a5bc8f

Update README.md

44290ba

roshan-bajgain approved these changes Jun 9, 2022

View reviewed changes

godiarksel merged commit 67357f5 into master Jun 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

List structure #1

List structure #1

godiarksel commented Jun 8, 2022

brytebee left a comment

brytebee Jun 9, 2022

BenMukebo Jun 9, 2022

brytebee Jun 9, 2022

brytebee Jun 9, 2022 •

edited

Loading

BenMukebo left a comment •

edited

Loading

BenMukebo Jun 9, 2022

BenMukebo Jun 9, 2022

godiarksel Jun 9, 2022

roshan-bajgain left a comment •

edited

Loading


		> Description the project.
		> This is a project undertaken in week two of module two to test our abilities to develop a functional application using Webpack.

List structure #1

List structure #1

Conversation

godiarksel commented Jun 8, 2022

brytebee left a comment

Choose a reason for hiding this comment

Highlights

Required Changes ♻️

Optional suggestions

Use @brytebee on slack for faster responses.

brytebee Jun 9, 2022

Choose a reason for hiding this comment

BenMukebo Jun 9, 2022

Choose a reason for hiding this comment

brytebee Jun 9, 2022

Choose a reason for hiding this comment

brytebee Jun 9, 2022 • edited Loading

Choose a reason for hiding this comment

BenMukebo left a comment • edited Loading

Choose a reason for hiding this comment

Hi @godiarksel,

To highlight 💪🏻

STATUS: CHANGES REQUESTED ♻️

Optional suggestions

BenMukebo Jun 9, 2022

Choose a reason for hiding this comment

BenMukebo Jun 9, 2022

Choose a reason for hiding this comment

godiarksel Jun 9, 2022

Choose a reason for hiding this comment

roshan-bajgain left a comment • edited Loading

Choose a reason for hiding this comment

Highlights

Optional suggestions

brytebee Jun 9, 2022 •

edited

Loading

BenMukebo left a comment •

edited

Loading

roshan-bajgain left a comment •

edited

Loading