solution

[Handsome010]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because two checklist-backed requirements are still not met and they affect the core DOM output, not just style. Your numeric parsing, total/average calculations, and thousands-separator formatting are all correct and nicely implemented, so the computational logic is in good shape. However, instead of writing into the required span.total-population and span.average-population elements, you are currently targeting generic .total and .average selectors in src/scripts/main.js (check around the lines where you call document.querySelector for the output spans) — this means the specified placeholders are never updated [CHECKLIST ITEM #6, #7]. You also set textContent to strings like 'Total: ' + formattedTotal and 'Average: ' + formattedAverage, but the requirement is to replace the Calculate it! text with the numeric value only, matching the style of the other population numbers [CHECKLIST ITEM #6, #7].

To fix this, update your queries to document.querySelector('span.total-population') and document.querySelector('span.average-population'), and then assign textContent to just the formatted number (e.g., totalSpan.textContent = formattedTotal;). These changes will ensure the correct spans are updated and the content format matches the specification. As a minor improvement (not blocking), you could consider more descriptive variable names like populationSpans and populationValues, but this is optional. Once the selectors and text formatting are aligned with the requirements, your solution will fully meet the task expectations; you’re very close, and the core logic is already solid.

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

According to checklist items #6 and #7, you should be selecting the span.average-population and span.total-population elements, not generic .total and .average selectors. Update the query selectors to match the required classes so the placeholders "Calculate it!" in those spans are replaced.

[mateacademy-ai-mentor]

The requirement is to replace the Calculate it! text with the calculated total number itself. Including the 'Total: ' label changes the content format; consider setting textContent to just the formatted number so it matches the numeric style of the populations.

[mateacademy-ai-mentor]

Similar to the total, this should replace Calculate it! with the average number only. Dropping the 'Average: ' prefix will better align with the requirement to have the spans show the calculated numeric values with the same thousands-separator style.

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because the average calculation is currently incorrect and prevents one of the core requirements from being met. In src/scripts/main.js, the line that computes and formats the average uses sum / values.length.toLocaleString('en-US'), which is parsed as sum / (values.length.toLocaleString('en-US')), meaning you divide by a formatted string instead of a numeric length. This causes the average to be computed improperly and means span.average-population will not display a correctly formatted numeric value with thousands separators as required. To fix this, first compute the numeric average, for example const average = sum / values.length;, and then assign average.toLocaleString('en-US') to document.body.querySelector('span.average-population').textContent. Once that is corrected, your approach will match what you already do for the total population, which is implemented well: you correctly read all span.population values, strip commas, sum them, and format the total with toLocaleString('en-US') before writing it to span.total-population. As a minor improvement (not required for passing), you could simplify your value collection using Array.from(populations).map(...), but your current loop is perfectly acceptable. You are very close—fixing the average calculation and formatting will fully satisfy the task requirements.

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Here you correctly format the sum using toLocaleString('en-US') and assign just the numeric string to span.total-population, which matches the requirement to replace Calculate it! with the formatted number only.

[mateacademy-ai-mentor]

This line currently evaluates as sum / (values.length.toLocaleString('en-US')), because function calls have higher precedence than division. That means you’re dividing by a string and never calling toLocaleString on the numeric average. You should first compute the average (e.g., const average = sum / values.length;) and then format that number with average.toLocaleString('en-US') before assigning it to textContent so the average is displayed with the same thousands separator style as the other population numbers.

[mateacademy-ai-mentor]

Review Summary

Your solution is approved — the main.js logic correctly reads all span.population elements, converts the text to numbers, and computes both the total and average before formatting them with toLocaleString('en-US'). The fix to compute the average using a numeric sum / values.length and then rounding and formatting is exactly what was needed and matches the task requirements for displaying the populations and their average.

There are a couple of process-related items that are not visible in the code (such as following the layout guideline [CHECKLIST ITEM #2] and using npm run lint instead of npm test [CHECKLIST ITEM #3]); this approval is an educational override to help you keep moving forward while you learn those workflow expectations. For future tasks, make sure you double-check any non-code checklist steps, like updating demo links correctly and running the requested commands, so your submissions are both technically correct and process-compliant. Overall, your JavaScript is clean, focused, and meets the functional requirements well, and you’re clearly progressing in handling DOM manipulation and numeric formatting. Nice work — keep building on this solid foundation.

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩