Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Good work on implementing the logic to calculate the age and century and dynamically create the table rows. However, changes are needed because the generated table is not semantically correct. You are creating table header cells (<th>) for the data within the table body. According to HTML standards, data cells should be created using the <td> (table data) element, while <th> is reserved for the table's header row. Using the wrong element can negatively affect accessibility and default browser styling. Please update your code to use document.createElement('td') for the data cells to fix this.
✨ 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
| const namePerson = document.createElement('th'); | ||
|
|
||
| namePerson.textContent = person.name; | ||
|
|
||
| const genderPerson = document.createElement('th'); | ||
|
|
||
| genderPerson.textContent = person.sex; | ||
|
|
||
| const bornedPerson = document.createElement('th'); | ||
|
|
||
| bornedPerson.textContent = person.born; | ||
|
|
||
| const diedPerson = document.createElement('th'); | ||
|
|
||
| diedPerson.textContent = person.died; | ||
|
|
||
| const agePerson = document.createElement('th'); | ||
|
|
||
| agePerson.textContent = (person.died - person.born).toString(); | ||
|
|
||
| const centuryPerson = document.createElement('th'); |
There was a problem hiding this comment.
You're creating table header cells (<th>) for the table body. According to HTML semantics, data cells within the table body should be <td> (table data) elements. The <th> tag is reserved for the cells in the table's header row (<thead>). Using <td> will ensure your table is structured correctly and styles are applied as expected.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job addressing the feedback from the previous review! Your code now correctly uses <td> elements and meets all the functional requirements of the task.
I'm approving your solution, but I have one minor suggestion for future improvement regarding performance. In src/scripts/main.js, the document.querySelector('.dashboard') call is inside your loop. For better efficiency, it's a best practice to select this element once before the loop begins and store it in a variable. This avoids repeatedly searching the DOM, which can be slow with larger amounts of data.
Overall, excellent work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| centuryPerson, | ||
| ); | ||
|
|
||
| document.querySelector('.dashboard').appendChild(personElement); |
There was a problem hiding this comment.
This works, but for better performance, it's a good practice to query for the .dashboard element only once, before the loop starts. Repeatedly searching the DOM inside a loop can be slow, especially with large datasets.
2 participants
https://MarianaKlochnyk.github.io/js_task_generate_table_DOM/