day 02 begin

solutions/day-02/index.html

@@ -21,18 +21,69 @@
             const rootElement = document.querySelector('.root')
 
             // JSX element
+             
+    const headerStyles = {
+        backgroundColor: '#61DBFB',
+        fontFamily: 'Helvetica Neue',
+        padding: 25,
+        lineHeight: 1.5,
+    }
+           
     const header = (
-        <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>Asabeneh Yetayeh</p>
+                <p>Derrek Gass</p>
                 <small>Oct 2, 2020</small>
+            </div>
         </header>
     )
+    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(header, rootElement)
+    ReactDOM.render(app, rootElement)
 
     </script>
   </body>