cleaning

03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html

@@ -60,12 +60,12 @@
 
       header {
         background-color: #61dbfb;
-          padding: 10px;
+        padding: 10px;
       }
 
       main {
-          padding: 10px 10px 60px;
-          /* Height of the footer */
+        padding: 10px 10px 60px;
+        /* Height of the footer */
       }
 
       ul {

04_Day_Component/04_components.md

@@ -470,7 +470,7 @@ const hexaColor = () => {
   return '#' + color
 }
 
-const HexaColor = () => <div>{hexaColor()}</dv>
+const HexaColor = () => <div>{hexaColor()}</div>
 
 const rootElement = document.getElementById('root')
 // we render the JSX element using the ReactDOM package

04_Day_Component/30-days-of-react_boilerplate-components/src/index.js

@@ -14,7 +14,7 @@ const hexaColor = () => {
 }
 
 const HexaColor = () => {
-  let bgColor = hexaColor()
+  const bgColor = hexaColor()
   const styles = {
     height: '100px',
     display: 'flex',
@@ -62,7 +62,7 @@ const TechList = () => {
 }
 const buttonStyles = {
   padding: '10px 20px',
-  background: 'rgb(0, 255, 0',
+  background: 'rgb(0, 255, 0)',
   border: 'none',
   borderRadius: 5,
 }
@@ -79,6 +79,8 @@ const Main = () => (
       </ul>
       <UserCard />
       <div>
+        {/* Generate two different hexa colors every time */}
+        <HexaColor />
         <HexaColor />
       </div>
     </div>