add solution

.editorconfig

@@ -8,3 +8,4 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 end_of_line = lf
+quote_type = single

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2

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://dimarogkov.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 10 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.

package.json

@@ -22,7 +22,7 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "*",
-    "@mate-academy/scripts": "^1.2.10",
+    "@mate-academy/scripts": "^1.3.2",
     "@mate-academy/stylelint-config": "0.0.11",
     "@parcel/transformer-sass": "2.10.2",
     "backstopjs": "^6.2.2",

src/scripts/main.js

@@ -1,3 +1,56 @@
 'use strict';
 
-// write your code here
+document.addEventListener('DOMContentLoaded', () => {
+  // calc populations
+  const calcPopulationsInit = () => {
+    const list = document.querySelector('.list');
+
+    if (list) {
+      const averagePopulation = document.querySelector('.average-population');
+      const totalPopulation = document.querySelector('.total-population');
+      const populations = list.querySelectorAll('.population');
+      const items = list.querySelectorAll('.list__item');
+
+      // get total
+      const getTotal = () => {
+        return [...populations].reduce((a, b) => {
+          return a + +b.textContent.split(',').join('');
+        }, 0);
+      };
+
+      // get average
+      const getAverage = (number) => number / items.length;
+
+      // formatted number
+      const formatNumber = (number) => number.toLocaleString('en-US');
+
+      // set population
+      const setPopulation = (population, block) => {
+        block.textContent = population;
+      };
+
+      // calc total
+      const calcTotal = () => {
+        const total = getTotal();
+        const res = formatNumber(total);
+
+        setPopulation(res, totalPopulation);
+      };
+
+      // calc average
+      const calcAverage = () => {
+        const total = getTotal();
+        const average = getAverage(total);
+        const res = formatNumber(average);
+
+        setPopulation(res, averagePopulation);
+      };
+
+      // run func
+      calcTotal();
+      calcAverage();
+    }
+  };
+
+  calcPopulationsInit();
+});