From 38dec4fa53914cca1bc565c86420f76698e89a42 Mon Sep 17 00:00:00 2001 From: TiFAu Date: Fri, 20 Feb 2026 01:20:58 +0200 Subject: [PATCH 1/3] added solution --- README.md | 2 +- src/scripts/main.js | 28 +++++++++++++++++++++++++++- src/styles/_fonts.scss | 2 +- src/styles/main.scss | 38 +++++++++++++++++++++++--------------- 4 files changed, 52 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 42684231e..b5c700812 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://TiFAu.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/src/scripts/main.js b/src/scripts/main.js index c6e3f8784..520b49e35 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,29 @@ 'use strict'; -// write your code here +const spanPopulation = [...document.querySelectorAll('.population')]; +const averagePopulation = document.querySelector('.average-population'); +const totalPopulation = document.querySelector('.total-population'); +const total = spanPopulation.reduce( + (sum, n) => sum + Number(n.innerHTML.split(',').join('')), + 0, +); +const average = Math.round(total / spanPopulation.length); + +function convertNumbers(number) { + const resultNumber = []; + const numberToString = String(number); + + for (let i = numberToString.length; i > 0; i -= 3) { + if (i < 3) { + resultNumber.unshift(numberToString.slice(0, i)); + + break; + } + resultNumber.unshift(numberToString.slice(i - 3, i)); + } + + return resultNumber.join(','); +} + +averagePopulation.outerHTML = convertNumbers(average); +totalPopulation.outerHTML = convertNumbers(total); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/main.scss b/src/styles/main.scss index c05bc1020..cfb425f79 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,15 +1,19 @@ @import 'fonts'; body { - background: #eee; + counter-reset: section; + display: flex; - margin: 0; + align-items: center; + justify-content: center; + width: 100vw; height: 100vh; - justify-content: center; - align-items: center; + margin: 0; + font-family: Roboto, sans-serif; - counter-reset: section; + + background: #eee; } h1 { @@ -18,28 +22,32 @@ h1 { .list { margin: 32px 0; - list-style: none; padding: 0; + list-style: none; &__item { - margin: 8px; - border-bottom: 1px solid darkgrey; + position: relative; + display: flex; justify-content: space-between; - padding: 4px 4px 4px 30px; - position: relative; - img { - margin-right: 8px; - } + margin: 8px; + padding: 4px 4px 4px 30px; + border-bottom: 1px solid darkgrey; &::before { - color: #565754; - counter-increment: section; content: counter(section); + counter-increment: section; + position: absolute; top: 50%; left: 5px; transform: translateY(-60%); + + color: #565754; + } + + img { + margin-right: 8px; } } } From 3fb58f46c44543f9e3c25fd619536f081ef7204b Mon Sep 17 00:00:00 2001 From: TiFAu Date: Fri, 20 Feb 2026 01:42:04 +0200 Subject: [PATCH 2/3] added new solution with "textContent" instead of "outerHTML" --- src/scripts/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/main.js b/src/scripts/main.js index 520b49e35..3e54fea49 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -25,5 +25,5 @@ function convertNumbers(number) { return resultNumber.join(','); } -averagePopulation.outerHTML = convertNumbers(average); -totalPopulation.outerHTML = convertNumbers(total); +averagePopulation.textContent = convertNumbers(average); +totalPopulation.textContent = convertNumbers(total); From aa2bac9de4ee31b363494e1570c3db2f921d5918 Mon Sep 17 00:00:00 2001 From: TiFAu Date: Fri, 20 Feb 2026 02:13:21 +0200 Subject: [PATCH 3/3] added new solution with "textContent" instead of "outerHTML", trim() --- src/scripts/main.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/scripts/main.js b/src/scripts/main.js index 3e54fea49..8511cdde2 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -4,7 +4,7 @@ const spanPopulation = [...document.querySelectorAll('.population')]; const averagePopulation = document.querySelector('.average-population'); const totalPopulation = document.querySelector('.total-population'); const total = spanPopulation.reduce( - (sum, n) => sum + Number(n.innerHTML.split(',').join('')), + (sum, n) => sum + Number(n.textContent.trim().split(',').join('')), 0, ); const average = Math.round(total / spanPopulation.length); @@ -25,5 +25,10 @@ function convertNumbers(number) { return resultNumber.join(','); } -averagePopulation.textContent = convertNumbers(average); -totalPopulation.textContent = convertNumbers(total); +if (averagePopulation) { + averagePopulation.textContent = convertNumbers(average); +} + +if (totalPopulation) { + totalPopulation.textContent = convertNumbers(total); +}