add task solution

.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

.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
 }

README.md

@@ -1,5 +1,5 @@
 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://AndriiYelieva.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` 
 

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",

src/index.html

@@ -69,7 +69,7 @@ <h1>TOP 10 LARGEST COUNTRIES BY POPULATION</h1>
         <li class="list__item">
           <div>
             <img src="images/flag-russia.gif" alt="Russia flag">
-            Russia:
+            Russia-Terrorist:
           </div>
           <span class="population">145,933,461</span>
         </li>

src/scripts/main.js

@@ -1,3 +1,18 @@
 'use strict';
 
-// write your code here
+const nodeListState = document.querySelectorAll('.population');
+const total = document.querySelector('.total-population');
+const average = document.querySelector('.average-population');
+
+const states = [...nodeListState].map(state => {
+  const conversionToNumber = state.innerHTML.split(',').join('');
+
+  return +conversionToNumber;
+});
+
+const totalPopulation = states.reduce((accumulator, currentState) => {
+  return accumulator + currentState;
+}, 0);
+
+total.innerHTML = totalPopulation.toLocaleString('en-US');
+average.innerHTML = (totalPopulation / states.length).toLocaleString('en-US');