Ports - Jessica

src/App.css

@@ -1,5 +1,5 @@
 .App-header {
-  background-color: #222;
+  background-color: #38A1F3;
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;

src/App.js

@@ -3,18 +3,25 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
+// import TimelineEvent from './components/TimelineEvent'; //temp
+
 
 class App extends Component {
+
   render() {
     console.log(timelineData);
+    const eventObjects = timelineData.events.map((event, i) => {
+      return event;
+    });
+    console.log(eventObjects);
 
-    // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Soash Meeds</h1>
         </header>
         <main className="App-main">
+          <Timeline events={eventObjects} />
         </main>
       </div>
     );

src/components/Timeline.js

@@ -1,10 +1,23 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+// testing
+const Timeline = (props) => {
+  const eventComponents = props.events.map((event, i) => {
+    return (
+        <TimelineEvent
+          person={event.person}
+          status={event.status}
+          timestamp={event.timeStamp} />
+    );
+  });
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+  return (
+    <section class="timeline">
+        {eventComponents}
+    </section>
+  );
 }
 
 export default Timeline;
+

src/components/TimelineEvent.js

@@ -2,9 +2,14 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  return (
+    <section class="timeline-event">
+      <h4 class="event-person">{props.person}</h4>
+      <p class="event-status">{props.status}</p>
+      <p class="event-time"><Timestamp time={props.timestamp} /></p>
+    </section>
+  );
 }
 
 export default TimelineEvent;