From 05c0ac4ae99794909a4ae1e154ef373f2d3fc754 Mon Sep 17 00:00:00 2001
From: diachkinainna <diachkinainna@gmail.com>
Date: Mon, 23 Feb 2026 16:38:51 +0200
Subject: [PATCH] add solution

---
 src/scripts/main.js    | 13 ++++++++++++-
 src/styles/_fonts.scss |  2 +-
 src/styles/main.scss   | 39 ++++++++++++++++++++++++---------------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/scripts/main.js b/src/scripts/main.js
index c6e3f8784..dd214370f 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,14 @@
 'use strict';
 
-// write your code here
+const populations = [...document.querySelectorAll('.population')];
+const numbers = populations.map(
+  (item) => +item.textContent.replaceAll(',', ''),
+);
+
+const total = numbers.reduce((sum, item) => sum + item, 0);
+const average = Math.round(total / numbers.length);
+const totalFormatted = total.toLocaleString('en-US');
+const averageFormatted = average.toLocaleString('en-US');
+
+document.querySelector('.total-population').textContent = totalFormatted;
+document.querySelector('.average-population').textContent = averageFormatted;
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..bb340d9d7 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,33 @@ 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;
     }
   }
 }