diff --git a/04_Day_Components/index.html b/04_Day_Components/index.html index 4bdcfcb..e69de29 100644 --- a/04_Day_Components/index.html +++ b/04_Day_Components/index.html @@ -1,10 +0,0 @@ - - - - - $Title$ - - -$END$ - - \ No newline at end of file diff --git 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 index eeff30f..27742a3 100644 --- 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 = () => { +

Hexademical Colors

+ +
+ +
) } diff --git 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 new file mode 100644 index 0000000..0ba0ac4 --- /dev/null +++ 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( +
+

30 DAYS OF REACT

+

World Population

+

Ten most populated Countries

+ + +
+ ) +} + +export default WorldList \ No newline at end of file