Andrey action menu #265

zadorogniyandrey · 2022-08-22T15:40:55Z

action-menu

Demo |
Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

OleksiyRudenko · 2022-08-22T16:39:32Z

Please read bot's explanations and instructions carefully.

Check your PR files here:

Feel free to ask questions. Students' chat will be very helpful in resolving this issue.

OleksiyRudenko · 2022-08-22T17:22:33Z

A risky approach. I am not sure if it won't delete files from the PopUp task.
On commercial project this would pose a serious problem.
We need to keep an eye on what happens after this PR gets merged.
Before submitting your next task keep the constribution instructions handy.

github-actions · 2022-08-22T17:23:38Z

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Please, make sure you haven't made common mistakes

Universal recommendations:

Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

zadorogniyandrey · 2022-08-22T17:31:07Z

I understand that I have to delete unnecessary files from the "change file", but I don't understand how to do it(

OleksiyRudenko · 2022-08-22T18:14:24Z

@zadorogniyandrey

Oh, I see... Your PopUp wasn't in its own dedicated folder, so you needed to move it. And you did this in a single commit. You cannot really split a commit. They are atomic. Learning: commit frequently and never do "big things" in one commit. Merging commits is easier than splitting them.

Let's fix this in two steps.

Step 1. Renaming files.
Create a new branch (from main), move popup files, commit, push, open PR, ping me.

I'll let you know what to do next.

zadorogniyandrey · 2022-08-22T18:27:49Z

Thanks! I opened a new PR

OleksiyRudenko · 2022-08-22T18:33:58Z

#266 merged.
Update your local main from upstream.
Rebase your andrey-action-menu on main.
Force push andrey-action-menu.

If any step fails, post an error message here. If in doubt ask questions.

zadorogniyandrey · 2022-08-22T18:52:27Z

to force push I have to go to the andrey-action-menu branch and enter git push origin andrey-action-menu -f?

OleksiyRudenko · 2022-08-22T19:10:58Z

Yes

zadorogniyandrey · 2022-08-22T19:17:02Z

it worked) thank you!

github-actions · 2022-08-22T19:22:33Z

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Please, make sure you haven't made common mistakes

Universal recommendations:

Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

zadorogniyandrey · 2022-08-24T07:56:48Z

I checked the work and fixed a bug. Please review my work

stale · 2022-09-07T09:30:37Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

OleksiyRudenko · 2022-09-07T10:47:33Z

A proposal: post a link to your app demo and source code in Students' chat and ask peers for review.
Collect feedback, fix issues, if user acceptance testing (UAT) reveals any.
Once done, post here a message like "UAT requested, feedback collected, fixes implemented" and a link to your request for UAT in telegram. (See this for an example of UAT-related message)

P.S. Also this my comment should remove Stale label.

A-Ostrovnyy

Good work!

submissions/zadorogniyandrey/action-menu/js/main.js

zadorogniyandrey · 2022-09-12T12:29:14Z

Thanks! I'll try to fix

zadorogniyandrey · 2022-09-13T07:46:50Z

I have corrected the errors. But not sure if I used the append method correctly

A-Ostrovnyy

Good progress!

A-Ostrovnyy · 2022-09-13T17:38:40Z

submissions/zadorogniyandrey/action-menu/js/main.js

+const main = document.querySelector(".main");
+const menuItems = (item, menuList) => {
+  item.map(function (item) {
+    let sideWrap = document.createElement('div');


div can't be a child element of the ul for this case use createFragment

A-Ostrovnyy · 2022-09-13T17:39:58Z

submissions/zadorogniyandrey/action-menu/js/main.js

+    menuList.append(sideWrap)
+  });
+};
+const content = (i = 1, arr = companies) => {


Functions denote actions hence their names should start with a verb. Variables containing strings, numbers, and objects are normally nouns. Boolean variables/functions start with is, does, has etc. A variable containing multiple entities and functions returning lists containing entity names in plural form.

submissions/zadorogniyandrey/action-menu/js/main.js

zadorogniyandrey · 2022-09-14T09:51:42Z

Thank you! I didn't know about create fragment. Is creating templates the right solution?

submissions/zadorogniyandrey/action-menu/css/style.css

zadorogniyandrey · 2022-09-14T19:17:32Z

I did it with templates because I didn't find a way to insert a code snippet using document.createFragment

A-Ostrovnyy

Good progress!

A-Ostrovnyy · 2022-09-14T19:29:26Z

submissions/zadorogniyandrey/action-menu/js/main.js

+  item.map(function (item) {
+    let sideWrap = document.createElement('template');
+    sideWrap.innerHTML = `<li class="sidebar__menu__item"><button class="sidebar__btn" data-company = ${item.id}>${item.title}</button></li>`;
+    menuList.append(sideWrap.content);


Adding elements to DOM from a loop is a bad practice. A browser will run reflow and repaint for every element in the loop. Instead, you can:

Use append method, which can add several elements in one operation.

Create some wrapper, add your items to the wrapper and then add it to DOM. It will be one operation.

Clone current container. Add items to a container and then replace your old container with a new one. But be aware of event listeners.

Use innerHTML instead.

A-Ostrovnyy · 2022-09-14T19:35:38Z

submissions/zadorogniyandrey/action-menu/js/main.js

+];
+const menu = document.querySelector(".sidebar__menu");
+const main = document.querySelector(".main");
+const addmenuItems = (item, menuList) => {


What's the point to use menuList parameter if you use this function once, and in this parameter, you pass menu element from line 47?

A-Ostrovnyy · 2022-09-14T19:36:38Z

submissions/zadorogniyandrey/action-menu/js/main.js

+    `;
+};
+const changeContent = (e) => {
+  let btn = e.target;


Use const for elements that will not be changed.

A-Ostrovnyy · 2022-09-14T19:40:20Z

submissions/zadorogniyandrey/action-menu/js/main.js

+    menuList.append(sideWrap.content);
+  });
+};
+const addcontent = (i = 1, arr = companies) => {


Why do you add a second parameter if you do not pass him in your code?

stale · 2022-09-28T20:25:45Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

OleksiyRudenko added the task-DOM label Aug 22, 2022

OleksiyRudenko removed the task-DOM label Aug 22, 2022

stranger0708 added 6 commits August 22, 2022 21:40

add action-menu

fc51c61

empty string

d2c145d

remove popup

146f955

add

48c4e8b

del

35030d4

add

c716310

zadorogniyandrey force-pushed the andrey-action-menu branch from 5084a1b to c716310 Compare August 22, 2022 19:13

OleksiyRudenko added the task-DOM label Aug 22, 2022

fix bug

59cccb3

stale bot added the 💤 Stale label Sep 7, 2022

stale bot removed the 💤 Stale label Sep 7, 2022

A-Ostrovnyy self-assigned this Sep 11, 2022

A-Ostrovnyy requested changes Sep 11, 2022

View reviewed changes

corrects

95df495

zadorogniyandrey requested a review from A-Ostrovnyy September 13, 2022 07:49

A-Ostrovnyy requested changes Sep 13, 2022

View reviewed changes

createFragment

735b2c5

zadorogniyandrey requested a review from A-Ostrovnyy September 14, 2022 09:51

A-Ostrovnyy reviewed Sep 14, 2022

View reviewed changes

submissions/zadorogniyandrey/action-menu/css/style.css Show resolved Hide resolved

fix cursor

a263f6e

zadorogniyandrey requested a review from A-Ostrovnyy September 14, 2022 19:20

A-Ostrovnyy requested changes Sep 14, 2022

View reviewed changes

stale bot added the 💤 Stale label Sep 28, 2022

stale bot closed this Oct 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Andrey action menu #265

Andrey action menu #265

zadorogniyandrey commented Aug 22, 2022

OleksiyRudenko commented Aug 22, 2022 •

edited

Loading

OleksiyRudenko commented Aug 22, 2022

github-actions bot commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022 •

edited

Loading

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

github-actions bot commented Aug 22, 2022

zadorogniyandrey commented Aug 24, 2022

stale bot commented Sep 7, 2022

OleksiyRudenko commented Sep 7, 2022

A-Ostrovnyy left a comment

zadorogniyandrey commented Sep 12, 2022

zadorogniyandrey commented Sep 13, 2022 •

edited

Loading

A-Ostrovnyy left a comment

A-Ostrovnyy Sep 13, 2022

A-Ostrovnyy Sep 13, 2022

zadorogniyandrey commented Sep 14, 2022

zadorogniyandrey commented Sep 14, 2022

A-Ostrovnyy left a comment

A-Ostrovnyy Sep 14, 2022

A-Ostrovnyy Sep 14, 2022

A-Ostrovnyy Sep 14, 2022

A-Ostrovnyy Sep 14, 2022

stale bot commented Sep 28, 2022

Andrey action menu #265

Andrey action menu #265

Conversation

zadorogniyandrey commented Aug 22, 2022

action-menu

OleksiyRudenko commented Aug 22, 2022 • edited Loading

OleksiyRudenko commented Aug 22, 2022

github-actions bot commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022 • edited Loading

OleksiyRudenko commented Aug 22, 2022

zadorogniyandrey commented Aug 22, 2022

github-actions bot commented Aug 22, 2022

zadorogniyandrey commented Aug 24, 2022

stale bot commented Sep 7, 2022

OleksiyRudenko commented Sep 7, 2022

A-Ostrovnyy left a comment

Choose a reason for hiding this comment

zadorogniyandrey commented Sep 12, 2022

zadorogniyandrey commented Sep 13, 2022 • edited Loading

A-Ostrovnyy left a comment

Choose a reason for hiding this comment

A-Ostrovnyy Sep 13, 2022

Choose a reason for hiding this comment

A-Ostrovnyy Sep 13, 2022

Choose a reason for hiding this comment

zadorogniyandrey commented Sep 14, 2022

zadorogniyandrey commented Sep 14, 2022

A-Ostrovnyy left a comment

Choose a reason for hiding this comment

A-Ostrovnyy Sep 14, 2022

Choose a reason for hiding this comment

A-Ostrovnyy Sep 14, 2022

Choose a reason for hiding this comment

A-Ostrovnyy Sep 14, 2022

Choose a reason for hiding this comment

A-Ostrovnyy Sep 14, 2022

Choose a reason for hiding this comment

stale bot commented Sep 28, 2022

OleksiyRudenko commented Aug 22, 2022 •

edited

Loading

zadorogniyandrey commented Aug 22, 2022 •

edited

Loading

zadorogniyandrey commented Sep 13, 2022 •

edited

Loading