06-day-format-correction

2 years ago · eaeddebc97
parent bd20ecc198
commit eaeddebc97
2 changed files with 19 additions and 27 deletions
--- a/06_Day_Map_List_Keys/06-my-map-list-keysc/public/index.html
+++ b/06_Day_Map_List_Keys/06-my-map-list-keysc/public/index.html
@ -127,6 +127,12 @@
        text-align: center;
      }

+      table {
+        width: 50%;
+        align-content: center;
+        margin-left: 15%;
+      }
+
      tr {
        height: 25px;        
      }
@ -143,7 +149,8 @@

      .td-value {
        width: 80px;
-        text-align: right;
+        text-align: left;
+        padding-left: 5%;
      }

      .div-line {
@ -151,25 +158,6 @@
        background-color: orange;
      }

-      .graph-title {
-        font-size: small;
-        font-family: Arial;
-        text-align: center;
-      }
-
-      .graphs {
-        display: flex;
-        justify-content: center;
-      }
-
-      #stat {
-        display: flex;
-        justify-content: center;
-      }
-
-      .stat-table {
-        border: thin solid gray;
-      }
    </style>
  </head>
  <body>
--- a/06_Day_Map_List_Keys/06-my-map-list-keysc/src/index.js
+++ b/06_Day_Map_List_Keys/06-my-map-list-keysc/src/index.js
@ -58,6 +58,10 @@ const Main = ({ numbers }) => (
 )

 //Population
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
+}
+
 const Country = ({ countries }) => {
  const countryList = countries.map((country) =>
    <tr className='tr'>
@ -68,7 +72,7 @@ const Country = ({ countries }) => {
        </div>
      </td>
      <td className='td-value'>
-        {new Intl.NumberFormat('ru-RU').format(country.population)}
+        {numberWithCommas(country.population)}
      </td>
    </tr>
  )
@ -79,7 +83,7 @@ const Country = ({ countries }) => {
 const Population = ({ countries, count }) => (
  <main>
    <h1>{count} most populated countries in the world</h1>
-    <Country countries={countries} />
+    <table className='table'><Country countries={countries} /></table>
  </main>
 )