From 7c1d5820ea7e162823be02d8ff559bd614fabe3d Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Thu, 24 Aug 2023 00:44:06 +0800
Subject: [PATCH] Population task solve

---
 .github/workflows/test.yml |  2 +-
 .linthtmlrc.json           | 48 +++++++++++++++++++++++++++++++++++++-
 package.json               |  2 +-
 src/scripts/main.js        | 25 +++++++++++++++++++-
 4 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 340cff5c..f3065d38 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -20,7 +20,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
-    - run: npm start & sleep 5 && npm test
+    - run: npm test
     - name: Upload HTML report(backstop data)
       if: ${{ always() }}
       uses: actions/upload-artifact@v2
diff --git a/.linthtmlrc.json b/.linthtmlrc.json
index 0f2047a7..774726eb 100644
--- a/.linthtmlrc.json
+++ b/.linthtmlrc.json
@@ -1,3 +1,49 @@
 {
-  "extends": "@mate-academy/linthtml-config"
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "style"
+  ],
+  "attr-name-ignore-regex": "viewBox",
+  "attr-no-dup": true,
+  "attr-quote-style": "double",
+  "attr-req-value": true,
+  "class-no-dup": true,
+  "doctype-first": true,
+  "doctype-html5": true,
+  "fig-req-figcaption": true,
+  "head-req-title": true,
+  "html-req-lang": true,
+  "id-class-style": false,
+  "id-no-dup": true,
+  "img-req-src": true,
+  "img-req-alt": "allownull",
+  "indent-width": 2,
+  "indent-style": "spaces",
+  "indent-width-cont": true,
+  "input-radio-req-name": true,
+  "spec-char-escape": true,
+  "tag-bans": [
+    "b",
+    "i",
+    "u",
+    "center",
+    "style",
+    "marquee",
+    "font",
+    "s"
+  ],
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": "never",
+  "tag-close": true,
+  "text-ignore-regex": "&",
+  "title-no-dup": true,
+  "line-end-style": "lf",
+  "attr-new-line": 2,
+  "attr-name-style": "dash",
+  "attr-no-unsafe-char": true
 }
diff --git a/package.json b/package.json
index eb1d8619..2a8d0f64 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "0.0.2",
-    "@mate-academy/scripts": "^0.8.10",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/stylelint-config": "0.0.9",
     "colors": "^1.3.3",
     "eslint": "^5.16.0",
diff --git a/src/scripts/main.js b/src/scripts/main.js
index c6e3f878..947103b3 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,26 @@
 'use strict';
 
-// write your code here
+const populationSpans = document.querySelectorAll('.population');
+
+let totalPopulation = 0;
+
+populationSpans.forEach(populationSpan => {
+  const populationValue
+    = parseInt(populationSpan.textContent.replace(/,/g, ''));
+
+  if (!isNaN(populationValue)) {
+    totalPopulation += populationValue;
+  }
+});
+
+const averagePopulation = totalPopulation / populationSpans.length;
+
+function addThousandsSeparator(number) {
+  return number.toLocaleString('en-Us');
+}
+
+const totalPopulationSpan = document.querySelector('.total-population');
+const averagePopulationSpan = document.querySelector('.average-population');
+
+totalPopulationSpan.textContent = addThousandsSeparator(totalPopulation);
+averagePopulationSpan.textContent = addThousandsSeparator(averagePopulation);