Implement dom task #526
Implement dom task #526
Conversation
|
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 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:
By the way, you may proceed to the next task before this one is reviewed and merged. Sincerely yours, |
|
Please remove the image. It is not required for the code review |
|
@Semka094 please read the bot's message carefully and act accordingly. |
|
@OleksiyRudenko I've read the bot's massage carefully but couldn't find any issues. Could you please point out where is the problem with the code? |
Probably, I should have stated that I had completed self-checks and fixed the code. |
|
I have completed self-checks. |
OleksiyRudenko
added
the
self-check-done
|
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. А. Чому так? Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити? В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?
Г. Хіба недостатньо того, що я додав(ла) коміт із змінами? Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті. |
|
Hello, @OleksiyRudenko & @madmaxWMFU Can you please, check my PR? |
| }, | ||
| } | ||
|
|
||
| document.getElementById('menu').addEventListener('click', (e) => { |
There was a problem hiding this comment.
Please, split the code.
const menuWrap = document.getElementById('menu');
const getData = ({ target }) => { ... }
menuWrap.addEventListener('click', getData);
There was a problem hiding this comment.
I do not see any benefit in splitting the code, can you please explain a bit?
In my opinion, it is redundant as neither menuWrap nor getData will be reused later in the code.
There was a problem hiding this comment.
Perhaps for simple tasks it is not necessary to do this. But the declaration and description of individual functions makes it possible to clearly understand the structured code, re-calling of functions and other aspects for further support of the project.
| }); | ||
|
|
||
|
|
||
| const contentElement = document.getElementById('content'); |
There was a problem hiding this comment.
You better use the class name to search.
There was a problem hiding this comment.
I think it is better to use ID since it is unique and the class names might be used in other parts of the project.
In this case, I will be forced to rely on the order of elements in the DOM structure.
What do you think?
There was a problem hiding this comment.
It is only a recommendation. Also you can read a post
| const { sections } = data[menuId]; | ||
|
|
||
| const pageSectionsHtml = sections.map(({title, items}) => { |
There was a problem hiding this comment.
| const { sections } = data[menuId]; | |
| const pageSectionsHtml = sections.map(({title, items}) => { | |
| const const [[ title, { sections } ]] = Object.entries(data).filter(([key, val]) => key === menuId); | |
| const pageSectionsHtml = sections.map(({title, items}) => { |
| const { sections } = data[menuId]; | ||
|
|
||
| const pageSectionsHtml = sections.map(({title, items}) => { |
There was a problem hiding this comment.
| const { sections } = data[menuId]; | |
| const pageSectionsHtml = sections.map(({title, items}) => { | |
| const const [[ title, { sections } ]] = Object.entries(data).filter(([key, val]) => key === menuId); | |
| const pageSectionsHtml = sections.map(({title, items}) => { |
| const titleHtml = title ? `<h3>${title}</h3>` : ''; | ||
| const textHtml = items.map((text) => `<p>${text}</p>`).join(''); | ||
|
|
||
| return `${titleHtml}${textHtml}` |
There was a problem hiding this comment.
| return `${titleHtml}${textHtml}` | |
| return `${titleHtml}${textHtml}`; |
| }); | ||
|
|
||
|
|
||
| const contentElement = document.getElementById('content'); |
There was a problem hiding this comment.
It is only a recommendation. Also you can read a post
| }, | ||
| } | ||
|
|
||
| document.getElementById('menu').addEventListener('click', (e) => { |
There was a problem hiding this comment.
Perhaps for simple tasks it is not necessary to do this. But the declaration and description of individual functions makes it possible to clearly understand the structured code, re-calling of functions and other aspects for further support of the project.
|
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. А. Чому так? Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити? В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?
Г. Хіба недостатньо того, що я додав(ла) коміт із змінами? Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті. |
DOM task
Demo |
Code base
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.