msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

06-day-format-correction

Browse Source
pull/331/head
Dan.Kapustin 2 years ago
parent bd20ecc198
commit eaeddebc97
2 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File

30
06_Day_Map_List_Keys/06-my-map-list-keysc/public/index.html
Unescape View File

@ -127,8 +127,14 @@
text-align: center; text-align: center;
} }
table {
width: 50%;
align-content: center;
margin-left: 15%;
}
tr { tr {
height: 25px; height: 25px;
} }
.td-name { .td-name {
@ -143,7 +149,8 @@
.td-value { .td-value {
width: 80px; width: 80px;
text-align: right; text-align: left;
padding-left: 5%;
} }
.div-line { .div-line {
@ -151,25 +158,6 @@
background-color: orange; 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> </style>
</head> </head>
<body> <body>

16
06_Day_Map_List_Keys/06-my-map-list-keysc/src/index.js
Unescape View File

@ -58,17 +58,21 @@ const Main = ({ numbers }) => (
) )
//Population //Population
function numberWithCommas(x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
const Country = ({ countries }) => { const Country = ({ countries }) => {
const countryList = countries.map((country) => const countryList = countries.map((country) =>
<tr className='tr'> <tr className='tr'>
<td className='td-name'>{country.name}</td> <td className='td-name'>{country.name}</td>
<td className='td-line'> <td className='td-line'>
<div className='div-line' style={{marginRight : `${100 - country.prc}%`, color: 'white'}}> <div className='div-line' style={{ marginRight: `${100 - country.prc}%`, color: 'white' }}>
{country.name} {country.name}
</div> </div>
</td> </td>
<td className='td-value'> <td className='td-value'>
{new Intl.NumberFormat('ru-RU').format(country.population)} {numberWithCommas(country.population)}
</td> </td>
</tr> </tr>
) )
@ -79,7 +83,7 @@ const Country = ({ countries }) => {
const Population = ({ countries, count }) => ( const Population = ({ countries, count }) => (
<main> <main>
<h1>{count} most populated countries in the world</h1> <h1>{count} most populated countries in the world</h1>
<Country countries={countries} /> <table className='table'><Country countries={countries} /></table>
</main> </main>
) )
@ -101,7 +105,7 @@ const App = () => {
.map((country) => { .map((country) => {
return { name: country.name, population: country.population } return { name: country.name, population: country.population }
}) })
const world = data const world = data
.map((country) => { .map((country) => {
return { name: country.name, population: country.population } return { name: country.name, population: country.population }
@ -110,7 +114,7 @@ const App = () => {
return { name: 'World', population: w.population += c.population, languages: [] } return { name: 'World', population: w.population += c.population, languages: [] }
}, { name: 'World', population: 0 }) }, { name: 'World', population: 0 })
data.push(world) data.push(world)
// find top <count> countries by population and add field Prc - country population / world population // find top <count> countries by population and add field Prc - country population / world population
const topCountries = data const topCountries = data
.map((country) => { .map((country) => {
@ -121,7 +125,7 @@ const App = () => {
)) ))
.slice(0, count + 1) .slice(0, count + 1)
.map(({ name, population }) => ({ name: name, population: population, prc: (population / world.population) * 100 })) .map(({ name, population }) => ({ name: name, population: population, prc: (population / world.population) * 100 }))
return topCountries return topCountries
}) })

Write Preview
Loading…
Cancel
Save