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

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

@ -127,6 +127,12 @@
text-align: center; text-align: center;
} }
table {
width: 50%;
align-content: center;
margin-left: 15%;
}
tr { tr {
height: 25px; height: 25px;
} }
@ -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>

10
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>
) )

Write Preview
Loading…
Cancel
Save