day 02 begin

solutions/day-02/index.html

@@ -17,22 +17,73 @@
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script type="text/babel">
 
-      // To get the root element from the HTML document
-      const rootElement = document.querySelector('.root')
-
-      // JSX element
-      const header = (
-        <header>
-          <h1>Welcome to 30 Days Of React</h1>
-          <h2>Getting Started React</h2>
-          <h3>JavaScript Library</h3>
-          <p>Asabeneh Yetayeh</p>
-          <small>Oct 2, 2020</small>
+            // To get the root element from the HTML document
+            const rootElement = document.querySelector('.root')
+
+            // JSX element
+             
+    const headerStyles = {
+        backgroundColor: '#61DBFB',
+        fontFamily: 'Helvetica Neue',
+        padding: 25,
+        lineHeight: 1.5,
+    }
+           
+    const header = (
+        <header style={headerStyles}>
+            <div className = 'header-wrapper'>
+                <h1>Welcome to 30 Days Of React</h1>
+                <h2>Getting Started React</h2>
+                <h3>JavaScript Library</h3>
+                <p>Derrek Gass</p>
+                <small>Oct 2, 2020</small>
+            </div>
         </header>
-      )
-      // we render the JSX element using the ReactDOM package
-      // ReactDOM has the render method and the render method takes two arguments
-      ReactDOM.render(header, rootElement)
+    )
+    const mainStyles = {
+        backgroundColor: '#F3F0F5',
+    }
+            
+    const main = (
+        <main style = {mainStyles}>
+            <p>Prerequisite to get started react.js:</p>
+            <ul>
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>JavaScript</li>
+            </ul>
+        </main>
+    )         
+
+    const footerStyles = {
+        backgroundColor: '#61DBFB',
+    }
+
+    const footer = (
+        <footer style={footerStyles}>
+            <p>Copyright 2020</p>
+        </footer>
+    )
+            
+    const app = (
+        <div>
+            {header}
+            {main}
+            {footer}
+        </div>
+    )
+
+    const title = <h1 className='title'>Getting Started React</h1>
+    const inputField = (
+        <div>
+            <label htmlFor='firstname'>First Name</label>
+            <input type='text' id='firstname' placeholder='First Name' />
+        </div>
+    )
+
+    // we render the JSX element using the ReactDOM package
+    // ReactDOM has the render method and the render method takes two arguments
+    ReactDOM.render(app, rootElement)
 
     </script>
   </body>