Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job on implementing the recursive logic to traverse the data object! The way you handle nested levels is well done. However, this requires changes because the current implementation produces invalid HTML, which is a core requirement of the task.
Your createTree function in src/scripts/main.js appends <li> elements directly to the <div> container. According to HTML standards, <li> elements must be direct children of a <ul> or <ol> tag. To fix this, you should ensure that the very first set of list items is also wrapped in a <ul> element inside the container.
You're very close to a complete solution! Address this structural issue, and you'll be all set.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/scripts/main.js
Outdated
| function createTree(element, data) { | ||
| // WRITE YOUR CODE HERE | ||
| for (const key in data) { | ||
| const li = document.createElement('li'); | ||
|
|
||
| li.textContent = key; | ||
| element.appendChild(li); | ||
|
|
||
| if (Object.keys(data[key]).length) { | ||
| const ul = document.createElement('ul'); | ||
|
|
||
| li.appendChild(ul); | ||
| createTree(ul, data[key]); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This function's logic incorrectly handles the initial call. It assumes the element it receives is a list element (<ul>) that can have <li> children. However, the initial call passes a <div>. Appending <li> elements directly to a <div> creates an invalid HTML structure. A proper list must be wrapped in a <ul> (or <ol>) element. The function should create a main <ul> element inside the container element.
| /> | ||
| </head> | ||
| <body> | ||
| <div id="tree"></div> |
There was a problem hiding this comment.
The task is to create a nested ul/li list. When your createTree function runs, it will append <li> elements directly into this <div>. This is not valid HTML, as <li> elements must be direct children of a <ul> or <ol>. To ensure the generated list is semantically correct, this root container should be a <ul>.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Thanks for addressing the previous feedback! While the list is now correctly placed inside the container, this submission requires changes because the generated HTML structure is invalid and doesn't meet the core requirements.
The main issue is in your recursive logic. For every key, you are creating a new <ul> and putting the key's text directly inside it. According to HTML rules, a <ul> can only contain <li> elements, and text should be placed within an <li>.
To fix this, please adjust your approach: for each level of the object, you should create a single <ul>. Then, loop through all keys at that level and create a separate <li> for each one. The key's text goes inside the <li>, and if there's a nested object, the new <ul> for the next level should also be appended inside that same <li>.
You're very close! Just focus on getting that <ul>/<li> relationship right.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/scripts/main.js
Outdated
| for (const key in data) { | ||
| const ul = document.createElement('ul'); | ||
|
|
||
| ul.textContent = key; | ||
| element.appendChild(ul); | ||
|
|
||
| if (Object.keys(data[key]).length) { | ||
| const li = document.createElement('li'); | ||
|
|
||
| ul.appendChild(li); | ||
| createTree(li, data[key]); | ||
| } | ||
| } |
There was a problem hiding this comment.
The logic in this loop creates an incorrect HTML structure for the list. Here's a breakdown:
- A
<ul>is created for every key: A new list is created for each item (e.g., 'Drink', 'Fruit'). Instead, items at the same level should be<li>elements within a single, shared<ul>. - Text is in the
<ul>: The item's text (thekey) is being put directly into the<ul>element. Text should be inside an<li>element. - An
<li>is created conditionally: An<li>is only created if there's a nested object. An<li>should be created for every key to hold its text.
The correct approach is to create one <ul> per level of nesting, and then loop to create an <li> for each key within that <ul>.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this submission! You've done a fantastic job addressing the feedback from the previous review. The recursive logic for building the tree is now implemented perfectly, and the generated HTML structure is valid. Your solution fully meets all the requirements of the task. I am happy to approve this submission. Well done!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
No description provided.