js_get_data_DOM

README.md

@@ -1,14 +1,15 @@
 1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_get_data_DOM/)
+   - [DEMO LINK](https://A1daros.github.io/js_get_data_DOM/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
-    - There are no tests for this task so use `npm run lint` command instead of `npm test`
+   - There are no tests for this task so use `npm run lint` command instead of `npm test`
 
 ### Task: TOP 9 LARGEST COUNTRIES BY POPULATION
 
 Hello! In this task, you need to parse data from the list, and based on it get the average and total value.
 You no need to change styles or HTML layout in this task. Change only `main.js` file.
 
 Steps to do this challenge:
+
 1. Get all text data from `span` with class `population`
 2. Make sure that the given string can be converted to a number and convert it to number.
 3. Calculate average and total value-based to parsed numbers.

src/scripts/main.js

@@ -1,3 +1,29 @@
 'use strict';
 
-// write your code here
+const spanData = document.querySelectorAll('.population');
+const convertedSpanData = Array.from(spanData).map((span) => {
+  const raw = span.textContent;
+  const cleaned = raw.trim().replace(/[,\s]/g, '');
+  const numValue = Number(cleaned);
+
+  if (Number.isNaN(numValue)) {
+    return 0;
+  }
+
+  const population = numValue;
+
+  return population;
+});
+
+const totalPopulation = convertedSpanData.reduce((acc, population) => {
+  return acc + population;
+}, 0);
+const averagePopulation = Math.round(
+  totalPopulation / convertedSpanData.length,
+);
+
+const totalPopulationElement = document.querySelector('.total-population');
+const averagePopulationElement = document.querySelector('.average-population');
+
+totalPopulationElement.textContent = totalPopulation.toLocaleString();
+averagePopulationElement.textContent = averagePopulation.toLocaleString();