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

5 years ago · 6f2ae7272d
parent 8412c51b89
commit 6f2ae7272d
3 changed files with 79 additions and 81 deletions
--- a/04_Day_Component/04_components.md
+++ b/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
--- a/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
@ -14,9 +14,9 @@

    <title>30 Days Of React App</title>
    <style>
-    
+
      /* == General style === */
-      
+
      * {
        box-sizing: border-box;
        padding: 0;
@ -62,14 +62,12 @@

      header {
        background-color: #61dbfb;
-        padding: 25;
-        padding: 10px;
+          padding: 10px;
      }

      main {
-        padding: 10px;
-        padding-bottom: 60px;
-        /* Height of the footer */
+          padding: 10px 10px 60px;
+          /* Height of the footer */
      }

      ul {
@ -101,9 +99,9 @@
        border-radius: 50%;
        width: 14%;
      }
-      
+
    </style>
-    
+
  </head>
  <body>
    <div id="root"></div>
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
@ -1,108 +1,108 @@
 // 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'
-  let color = ''
-  for (let i = 0; i < 6; i++) {
-    let index = Math.floor(Math.random() * str.length)
-    color += str[index]
-  }
-  return '#' + color
+    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 HexaColor = () => {
-  let bgColor = hexaColor()
-  const styles = {
-    height: '100px',
-    display: 'flex',
-    'justify-content': 'center',
-    'align-items': 'center',
-    fontFamily: 'Montserrat',
-    margin: '2px auto',
-    borderRadius: '5px',
-    width: '75%',
-    border: '2px solid black',
-  }
-  return (
-    <div style={styles}>
-      <h2>{bgColor}</h2>
-    </div>
-  )
+    let bgColor = hexaColor()
+    const styles = {
+        height: '100px',
+        display: 'flex',
+        'justify-content': 'center',
+        'align-items': 'center',
+        fontFamily: 'Montserrat',
+        margin: '2px auto',
+        borderRadius: '5px',
+        width: '75%',
+        border: '2px solid black',
+    }
+    return (
+        <div style={styles}>
+            <h2>{bgColor}</h2>
+        </div>
+    )
 }

 // Header Component
 const Header = () => (
-  <header>
-    <div className='header-wrapper'>
-      <h1>Welcome to 30 Days Of React</h1>
-      <h2>Getting Started React</h2>
-      <h3>JavaScript Library</h3>
-      <p>Asabeneh Yetayeh</p>
-      <small>Oct 3, 2020</small>
-    </div>
-  </header>
+    <header>
+        <div className='header-wrapper'>
+            <h1>Welcome to 30 Days Of React</h1>
+            <h2>Getting Started React</h2>
+            <h3>JavaScript Library</h3>
+            <p>Asabeneh Yetayeh</p>
+            <small>Oct 3, 2020</small>
+        </div>
+    </header>
 )

 // User Card Component
 const UserCard = () => (
-  <div className='user-card'>
-    <img src={asabenehImage} alt='asabeneh image' />
-    <h2>Asabeneh Yetayeh</h2>
-  </div>
+    <div className='user-card'>
+        <img src={asabenehImage} alt='asabeneh image'/>
+        <h2>Asabeneh Yetayeh</h2>
+    </div>
 )

 // TechList Component
 const TechList = () => {
-  const techs = ['HTML', 'CSS', 'JavaScript']
-  const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
-  return techsFormatted
+    const techs = ['HTML', 'CSS', 'JavaScript']
+    const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
+    return techsFormatted
 }
 const buttonStyles = {
-  padding: '10px 20px',
-  background: 'rgb(0, 255, 0',
-  border: 'none',
-  borderRadius: 5,
+    padding: '10px 20px',
+    background: 'rgb(0, 255, 0',
+    border: 'none',
+    borderRadius: 5,
 }

 const Button = () => <button style={buttonStyles}> action </button>

 // Main Component
 const Main = () => (
-  <main>
-    <div className='main-wrapper'>
-      <p>Prerequisite to get started react.js:</p>
-      <ul>
-        <TechList />
-      </ul>
-      <UserCard />
-      <div>
-        <HexaColor />
-      </div>
-    </div>
-  </main>
+    <main>
+        <div className='main-wrapper'>
+            <p>Prerequisite to get started react.js:</p>
+            <ul>
+                <TechList/>
+            </ul>
+            <UserCard/>
+            <div>
+                <HexaColor/>
+            </div>
+        </div>
+    </main>
 )

 // Footer Component
 const Footer = () => (
-  <footer>
-    <div className='footer-wrapper'>
-      <p>Copyright 2020</p>
-    </div>
-  </footer>
+    <footer>
+        <div className='footer-wrapper'>
+            <p>Copyright 2020</p>
+        </div>
+    </footer>
 )

 // The App, or the parent or the container component
 const App = () => (
-  <div className='app'>
-    <Header />
-    <Main />
-    <Footer />
-  </div>
+    <div className='app'>
+        <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)