day-4 updated

solutions/day-4/src/App.css

@@ -152,11 +152,20 @@ h2 {
   padding: 4px 8px;
   color: #fff;
 }
-.colorGen{
+.colorGen {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #f37575;
+  width: 100%;
+}
+
+.color {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  width: 80%;
+  color: #fff;
 }
 .colorGen button{
     background-color: #f37575;

solutions/day-4/src/components/colorGenComp.js

@@ -1,28 +1,26 @@
 import React from "react";
 
-
 export default function ColorGen() {
-     let str = '0123456789abcdef';
-     let hexColor = () => {
+
+     let hexcolor = () => {
           let color = '';
+          let str = '0123456789abcdef';
           for (let i = 0; i < 6; i++) {
-               let hex = Math.floor(Math.random() * str.length);
+               let hex = Math.floor(Math.random() * str.length );
                color += str[hex]; 
           }
           return '#' + color;
      }
-     let style = {
-          backgroundColor: '{hexColor}',
-     }
+     let arr = Array(6).fill(0);
+
+     let sixColor = arr.map((i) => <div className="color" style={{ backgroundColor: `${hexcolor()}` }}>
+          <h1>{ hexcolor()}</h1>
+     </div>);
+     // console.log(hexcolor());
+     
      return (
           <section className="colorGen">
-               <div className="colorContainer" style={style}
-               >
-                    {hexColor()}
-               </div>
-               <button>Genarate</button>
+               {sixColor}
           </section>
      )
 }
-
-// I DO NOT KNOW WHAT I AM DONING WRONG IN MY CODE. BUT ICAN'T SEE THE CHANGE OF BACKGROUND COLOR AFTER GIVING THE HEIGHT AND WIDTH TO THE COLOR CONTAINER