country populate

3 years ago · dad6bc653a
parent 6d3edde5eb
commit dad6bc653a
3 changed files with 71 additions and 16 deletions
--- a/04_Day_Components/index.html
+++ b/04_Day_Components/index.html
@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
-</head>
-<body>
-$END$
-</body>
-</html>
--- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js
+++ b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js
@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import WorldList from "./population";

 const numbers = [];

@ -7,6 +8,16 @@ for( let i=0; i <= 31; i++ ){
    numbers.push(i);
 }

+const hexaColor = () => {
+    let str = '0123456789abcdef'
+    let color = ''
+    for (let i = 0; i < 6; i++) {
+        let index = Math.floor(Math.random() * str.length)
+        color += str[index]
+    }
+    return '#' + color
+}
+
 const listContainer = {
    display:'flex',
    flexWrap: 'wrap',
@ -19,14 +30,14 @@ const listItemEven = {
    padding: '3rem',
    width: 150,
    height: 150,
-    backgroundColor: 'crimson'
+    backgroundColor: `${hexaColor()}`
 }

 const listItemOdd = {
    padding: '3rem',
    width: 150,
    height: 150,
-    backgroundColor: 'green'
+    backgroundColor: `${hexaColor()}`
 }

 // The App, or the parent or the container component
@ -38,13 +49,24 @@ const App = () => {
        <ul style={listContainer}>
            {
                numbers.map( number => {
-                    if(number % 2 === 0 ){
                        return <li key={number} style={listItemEven}>{number}</li>
-                    } else if( number % 2 === 1 ){
-                        return <li key={number} style={listItemOdd}>{number}</li>
-                    }
                })}
        </ul>
+        <h2>Hexademical Colors</h2>
+        <ul style={listContainer}>
+            {
+                numbers.map( number => {
+                    return <li key={number} style={{
+                        padding: '3rem',
+                        width: 150,
+                        height: 150,
+                        backgroundColor: `${hexaColor()}`
+                    }} >{hexaColor()}</li>
+                })}
+        </ul>
+        <div>
+            <WorldList/>
+        </div>
    </div>
  )
 }
--- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js
+++ b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js
@ -0,0 +1,43 @@
+import React from "react";
+import { tenHighestPopulation as countryData } from './data/ten_most_highest_populations';
+
+console.log(countryData)
+
+
+const WorldList = () => {
+    const percentPop = (number) => {
+      const population = countryData.map(country => country.population)
+      const worldPop = Math.max(...population);
+      return (
+          ((number*100)/worldPop)
+      )
+    }
+
+    console.log(percentPop(countryData[0].population))
+
+    return(
+        <div style={{display:'flex',alignItems:'center',flexDirection:"column"}}>
+            <h2>30 DAYS OF REACT</h2>
+            <h1>World Population</h1>
+            <p>Ten most populated Countries</p>
+
+            <ul style={{padding: "1rem"}}>
+                {countryData.map( (country,index) => {
+                    return (
+                        <li key={index} style={{display:'flex',justifyContent:"space-between",gap:120}}>
+                            <p style={{width:220}}>{country.country}</p>
+                            <div style={{width:500,height:20}}>
+                                <div style={{width:`${percentPop(country.population)}%`, height:'100%',backgroundColor:'orange',textAlign:'center'}}>
+                                    {Math.round(percentPop(country.population))}
+                                </div>
+                            </div>
+                            <p style={{width:120}}>{country.population}</p>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default WorldList