From 9d9607eea11b298310c80a7e93431d42da7ccbde Mon Sep 17 00:00:00 2001 From: Anastasia Sutkova Date: Tue, 3 Feb 2026 16:35:17 +0200 Subject: [PATCH 1/3] add task solution --- src/scripts/main.js | 33 ++++++++++++++++++++- src/styles/{_fonts.scss => fonts.scss} | 2 +- src/styles/main.scss | 40 +++++++++++++++----------- 3 files changed, 57 insertions(+), 18 deletions(-) rename src/styles/{_fonts.scss => fonts.scss} (100%) diff --git a/src/scripts/main.js b/src/scripts/main.js index c6e3f8784..cf4e9c70e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,34 @@ 'use strict'; -// write your code here +const populationElements = document.querySelectorAll('.population'); +let total = 0; + +populationElements.forEach((el) => { + const num = Number(el.innerText.replace(/,/g, '')); + + if (!isNaN(num)) { + total += num; + } +}); + +const average = Math.round(total / populationElements.length); + +function commas(num) { + const str = num.toString(); + let result = ''; + let count = 0; + + for (let i = str.length - 1; i >= 0; i--) { + if (count > 0 && count % 3 === 0) { + result = ',' + result; + } + result = str[i] + result; + count++; + } + + return result; +} + +document.querySelector('.total-population').innerText = commas(total); + +document.querySelector('.average-population').innerText = commas(average); diff --git a/src/styles/_fonts.scss b/src/styles/fonts.scss similarity index 100% rename from src/styles/_fonts.scss rename to 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..0cd5020b8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,15 +1,19 @@ -@import 'fonts'; +@use '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 320ef10abe3dbf0f9d010b3b536c900b7d4b51af Mon Sep 17 00:00:00 2001 From: Anastasia Sutkova Date: Tue, 3 Feb 2026 16:45:17 +0200 Subject: [PATCH 2/3] add solution 2 --- src/scripts/main.js | 22 +++----------- src/styles/{fonts.scss => _fonts.scss} | 0 src/styles/main.scss | 40 +++++++++++--------------- 3 files changed, 20 insertions(+), 42 deletions(-) rename src/styles/{fonts.scss => _fonts.scss} (100%) diff --git a/src/scripts/main.js b/src/scripts/main.js index cf4e9c70e..8c7325ac9 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -13,22 +13,8 @@ populationElements.forEach((el) => { const average = Math.round(total / populationElements.length); -function commas(num) { - const str = num.toString(); - let result = ''; - let count = 0; +document.querySelector('.total-population').innerText = + total.toLocaleString('en-US'); - for (let i = str.length - 1; i >= 0; i--) { - if (count > 0 && count % 3 === 0) { - result = ',' + result; - } - result = str[i] + result; - count++; - } - - return result; -} - -document.querySelector('.total-population').innerText = commas(total); - -document.querySelector('.average-population').innerText = commas(average); +document.querySelector('.average-population').innerText = + average.toLocaleString('en-US'); diff --git a/src/styles/fonts.scss b/src/styles/_fonts.scss similarity index 100% rename from src/styles/fonts.scss rename to src/styles/_fonts.scss diff --git a/src/styles/main.scss b/src/styles/main.scss index 0cd5020b8..c05bc1020 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,19 +1,15 @@ -@use 'fonts'; +@import 'fonts'; body { - counter-reset: section; - + background: #eee; display: flex; - align-items: center; - justify-content: center; - + margin: 0; width: 100vw; height: 100vh; - margin: 0; - + justify-content: center; + align-items: center; font-family: Roboto, sans-serif; - - background: #eee; + counter-reset: section; } h1 { @@ -22,32 +18,28 @@ h1 { .list { margin: 32px 0; - padding: 0; list-style: none; + padding: 0; &__item { - position: relative; - + margin: 8px; + border-bottom: 1px solid darkgrey; display: flex; justify-content: space-between; - - margin: 8px; padding: 4px 4px 4px 30px; - border-bottom: 1px solid darkgrey; + position: relative; + + img { + margin-right: 8px; + } &::before { - content: counter(section); + color: #565754; counter-increment: section; - + content: counter(section); position: absolute; top: 50%; left: 5px; transform: translateY(-60%); - - color: #565754; - } - - img { - margin-right: 8px; } } } From f2e38270a0c5724c617ec2ffc5bb7495efcc788d Mon Sep 17 00:00:00 2001 From: Anastasia Sutkova Date: Tue, 3 Feb 2026 16:53:26 +0200 Subject: [PATCH 3/3] add final --- src/styles/_fonts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 5cfc5b4d0..45cdd5400 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'); }