fix and deploy => missing div and mismatched div has been update

04_Day_Component/04_components.md

@@ -13,7 +13,7 @@
 </sub>
 
 </div>
-</div>
+
 
 [<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>]()
 
@@ -471,7 +471,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/public/index.html

@@ -62,13 +62,11 @@
 
       header {
         background-color: #61dbfb;
-        padding: 25;
           padding: 10px;
       }
 
       main {
-        padding: 10px;
-        padding-bottom: 60px;
+          padding: 10px 10px 60px;
           /* Height of the footer */
       }
 

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

@@ -1,7 +1,7 @@
 // index.js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import asabenehImage from './images/asabeneh.jpg'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import asabenehImage from './images/asabeneh.jpg';
 
 const hexaColor = () => {
     let str = '0123456789abcdef'
@@ -49,7 +49,7 @@ const Header = () => (
 // User Card Component
 const UserCard = () => (
     <div className='user-card'>
-    <img src={asabenehImage} alt='asabeneh image' />
+        <img src={asabenehImage} alt='asabeneh image'/>
         <h2>Asabeneh Yetayeh</h2>
     </div>
 )
@@ -75,11 +75,11 @@ const Main = () => (
         <div className='main-wrapper'>
             <p>Prerequisite to get started react.js:</p>
             <ul>
-        <TechList />
+                <TechList/>
             </ul>
-      <UserCard />
+            <UserCard/>
             <div>
-        <HexaColor />
+                <HexaColor/>
             </div>
         </div>
     </main>
@@ -97,12 +97,12 @@ const Footer = () => (
 // The App, or the parent or the container component
 const App = () => (
     <div className='app'>
-    <Header />
-    <Main />
-    <Footer />
+        <Header/>
+        <Main/>
+        <Footer/>
     </div>
 )
 
 const rootElement = document.getElementById('root')
 // we render the JSX element using the ReactDOM package
-ReactDOM.render(<App />, rootElement)
+ReactDOM.render(<App/>, rootElement)