day 02 stuff...

solutions/day-02/index.html

@@ -101,38 +101,77 @@
 
             // JSX element
              
+    const welcome = 'Welcome to 30 Days Of React'
+    const title = 'Getting Started React'
+    const subtitle = 'JavaScript Library'
+    const author = {
+        firstName: 'Derrek',
+        lastName: 'Gass'
+    }
+    const date = 'Oct 15, 2020'
+    const numOne = 3
+    const numTwo = 2
+
+
+    const yearBorn = 1988
+    const currentYear = new Date().getFullYear()
+    const age = currentYear - yearBorn
+    const personAge = (
+        <p>
+            {' '}
+            {author.firstName} {author.lastName} is {age} years old
+        </p>
+    )
 
+    const techs = ['HTML', 'CSS', 'JavaScript']
 
     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>Derrek Gass</p>
-                <small>Oct 2, 2020</small>
+                <h1>{welcome}</h1>
+                <h2>{title}</h2>
+                <h3>{subtitle}</h3>
+                <p>Student: {author.firstName} {author.lastName} </p>
+                <small>Date: {date}</small>
             </div>
         </header>
     )
     
+    const result = (
+        <p>
+            {numOne} + {numTwo} = {numOne + numTwo}
+        </p>
+    )
+
+
+
+      // JSX element, main
       const main = (
         <main>
           <div className='main-wrapper'>
-                <p>Prerequisite to get started react.js:</p>
-                <ul>
-                <li>HTML</li>
-                <li>CSS</li>
-                <li>JavaScript</li>
-                </ul>
+            <p>
+              Prerequisite to get started{' '}
+              <strong>
+                <em>react.js</em>
+              </strong>
+              :
+            </p>
+            <ul>{techs}</ul>
+            {result}
+            {personAge}
           </div>
         </main>
       )
 
+
+
+      const copyRight = 'Copyright 2020'
+
       // JSX element, footer
       const footer = (
         <footer>
           <div className='footer-wrapper'>
-            <p>Copyright 2020</p>
+            <p>{copyRight}</p>
           </div>
         </footer>
       )