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/README.md b/README.md index 36dc318d..38ebe8a0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ 1. Replace `` with your Github username in the link - - [DEMO LINK](https://.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` 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/index.html b/src/index.html index 980cfa6b..20e1376d 100644 --- a/src/index.html +++ b/src/index.html @@ -69,7 +69,7 @@

TOP 10 LARGEST COUNTRIES BY POPULATION

  • Russia flag - Russia: + Russia-Terrorist:
    145,933,461
  • diff --git a/src/scripts/main.js b/src/scripts/main.js index c6e3f878..bec2f6fc 100644 --- a/src/scripts/main.js +++ b/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');