mergeds

06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import WorldList from "./population";
 
 const numbers = [];
 
@@ -8,16 +7,6 @@ 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',
@@ -30,14 +19,14 @@ const listItemEven = {
     padding: '3rem',
     width: 150,
     height: 150,
-    backgroundColor: `${hexaColor()}`
+    backgroundColor: 'crimson'
 }
 
 const listItemOdd = {
     padding: '3rem',
     width: 150,
     height: 150,
-    backgroundColor: `${hexaColor()}`
+    backgroundColor: 'green'
 }
 
 // The App, or the parent or the container component
@@ -49,24 +38,13 @@ 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>
   )
 }