add exercise 2 day-05

solutions/day-05/map-list-key/src/App.css

@@ -3,6 +3,8 @@
   padding: 0;
 }
 
+/* Exercise 1 */
+/* 
 .container ul {
   list-style: none;
 }
@@ -31,4 +33,30 @@
 .numbersContainer ul li {
   display: flex;
   margin: 1px;
+} */
+
+/* Exercise 2 */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.container ul li {
+  width: 100px;
+  height: 100px;
+  margin: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
 }

solutions/day-05/map-list-key/src/App.js

@@ -2,36 +2,48 @@ import React from "react";
 import "./App.css";
 
 const App = () => {
-  const numbers = [
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-    22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  const hexas = [
+    "#4e417e",
+    "#02dc92",
+    "#dfbaa0",
+    "#d8394e",
+    "#2c31d3",
+    "#7fcfd2",
+    "#0e5d46",
+    "#d98590",
+    "#7923d7",
+    "#6e5eeb",
+    "#2a176b",
+    "#cbae6f",
+    "#b6841d",
+    "#62df7d",
+    "#9e4d2c",
+    "#393b73",
+    "#8cface",
+    "#1a4f07",
+    "#045529",
+    "#04e754",
+    "#697980",
+    "#018120",
+    "#5bdcc7",
+    "#7010b2",
+    "#c50007",
+    "#cdb58e",
+    "#298b5d",
+    "#58e253",
+    "#a9c3c5",
+    "#66fec5",
   ];
 
-  return (
-    <div className="container">
-      <h1>30 Day os React</h1>
-      <h3>Number Generator</h3>
-      <div className="numbersContainer">
-        <ul>
-          {/* <Numbers numbers={numbers} /> */}
-          {numbers.map((number) =>
-            number % 2 === 0 ? (
-              <li
-                className="box"
-                style={{ backgroundColor: "rgb(83, 187, 158)" }}
-              >
-                {number}
-              </li>
-            ) : (
-              <li className="box" style={{ backgroundColor: "tomato" }}>
-                {number}
-              </li>
-            )
-          )}
-        </ul>
-      </div>
+  return <div className="container">
+    <h1>30 Days of React</h1>
+    <h3>Hexadecimal Colors</h3>
+    <div>
+      <ul>
+        {hexas.map((hexa) => <li style={{background: `${hexa}`}}>{hexa}</li>)}
+      </ul>
     </div>
-  );
+  </div>;
 };
 
 export default App;

solutions/day-05/map-list-key/src/App4.js

@@ -0,0 +1,37 @@
+import React from "react";
+import "./App.css";
+
+const App = () => {
+  const numbers = [
+    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
+    22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  ];
+
+  return (
+    <div className="container">
+      <h1>30 Day os React</h1>
+      <h3>Number Generator</h3>
+      <div className="numbersContainer">
+        <ul>
+          {/* <Numbers numbers={numbers} /> */}
+          {numbers.map((number) =>
+            number % 2 === 0 ? (
+              <li
+                className="box"
+                style={{ backgroundColor: "rgb(83, 187, 158)" }}
+              >
+                {number}
+              </li>
+            ) : (
+              <li className="box" style={{ backgroundColor: "tomato" }}>
+                {number}
+              </li>
+            )
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default App;