From ae81af55bbc74c9433ef88738762932b79304bb1 Mon Sep 17 00:00:00 2001 From: Alex Robertson Date: Tue, 14 Apr 2020 15:57:45 -0700 Subject: [PATCH 1/2] Finished Wave One and Wave Two. --- src/App.css | 11 ++++++----- src/App.js | 11 +++++++---- src/components/Timeline.js | 21 ++++++++++++++++++--- src/components/TimelineEvent.js | 11 ++++++++--- 4 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/App.css b/src/App.css index e20270c..93a1262 100644 --- a/src/App.css +++ b/src/App.css @@ -1,17 +1,18 @@ .App-header { - background-color: #222; + background-color: #62d9c3; padding-bottom: 0.5rem; - color: white; + color:#262223; position: fixed; width: 100%; } .App-title { text-align: center; - font-size: 1.5em; + padding: 2.0rem; + font-size: 1.9em; } .App-main { - padding-top: 7rem; - background-color: #E6ECF0; + padding-top: 9rem; + background-color:#62d9c3; } diff --git a/src/App.js b/src/App.js index 76d86d2..ecb4c9b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,22 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; +import TimelineEvent from './components/TimelineEvent'; function App() { console.log(timelineData); - - // Customize the code below return (
-

Application title

+

{timelineData.person}'s Social Media Feed

+
); diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 463eb3e..fe8ad04 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -2,9 +2,24 @@ import React from 'react'; import './Timeline.css'; import TimelineEvent from './TimelineEvent'; -const Timeline = () => { - - return; +const Timeline = (props) => { + const eventBrick = props.events.map((event) => { + + return( + + ); + }); + + return ( +
+ {eventBrick} +
+ ); } export default Timeline; \ No newline at end of file diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js index cc476c2..c14d68e 100644 --- a/src/components/TimelineEvent.js +++ b/src/components/TimelineEvent.js @@ -2,9 +2,14 @@ import React from 'react'; import './TimelineEvent.css'; import Timestamp from './Timestamp'; -const TimelineEvent = () => { - - return; +const TimelineEvent = (props) => { + return( +
+
  • {props.person}
    • +
    • +
  • {props.status}
    • +
    + ); } export default TimelineEvent; \ No newline at end of file From 17f092682c8533636ccf780674d6a440545ea8f9 Mon Sep 17 00:00:00 2001 From: Alex Robertson Date: Tue, 14 Apr 2020 20:45:16 -0700 Subject: [PATCH 2/2] Updated CSS styling. --- src/App.css | 13 ++++++++++--- src/App.js | 20 +++++++++++++------- src/components/Timeline.css | 6 +++++- src/components/TimelineEvent.css | 8 ++++++-- src/data/timeline.json | 14 +++++++------- src/index.css | 5 ++++- 6 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/App.css b/src/App.css index 93a1262..7a8e3d5 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,25 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&family=Bebas+Neue&display=swap'); + .App-header { background-color: #62d9c3; padding-bottom: 0.5rem; color:#262223; position: fixed; - width: 100%; + width: 14%; + top: 0; + font-family: "Bebas Neue", cursive } .App-title { text-align: center; - padding: 2.0rem; + padding: 0rem; font-size: 1.9em; } .App-main { - padding-top: 9rem; + padding: 5rem; + margin-top: 200px; + margin-left: 300px; background-color:#62d9c3; + font-family: "Baloo Tamma 2", cursive } diff --git a/src/App.js b/src/App.js index ecb4c9b..105dd80 100644 --- a/src/App.js +++ b/src/App.js @@ -4,22 +4,28 @@ import timelineData from './data/timeline.json'; import Timeline from './components/Timeline'; import TimelineEvent from './components/TimelineEvent'; +const feedFodder = timelineData.events.map((event) => { + return ( + { + person: event.person, + status: event.status, + timeStamp: event.timeStamp + } + ); +}); + function App() { console.log(timelineData); return (
    -

    {timelineData.person}'s Social Media Feed

    +

    {timelineData.person}'s Moment Feed

    - +
    ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Timeline.css b/src/components/Timeline.css index e31f946..a19e1b3 100644 --- a/src/components/Timeline.css +++ b/src/components/Timeline.css @@ -1,5 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Vast+Shadow&display=swap'); + .timeline { - width: 30%; + width: 70%; margin: auto; text-align: left; + font-family: "Bebas Neue", cursive; + list-style-type: none } diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css index ea6407a..b6df191 100644 --- a/src/components/TimelineEvent.css +++ b/src/components/TimelineEvent.css @@ -1,9 +1,10 @@ .timeline-event { display: grid; grid-template: 2rem auto 2rem / 1fr 1fr; - padding: 0.5rem; + padding: 2rem; border-bottom: 1px solid #E6ECF0; - background-color: #FFF; + background-color: #62d9c3; + list-style-type: none; } .timeline-event:hover { @@ -14,6 +15,7 @@ grid-area: 1 / 1 / span 1 / span 1; margin-top: 0.5rem; font-weight: bolder; + list-style-type: none; } .event-status { @@ -24,4 +26,6 @@ grid-area: 1 / 2 / span 1 / span 1; margin-top: 0.5rem; text-align: right; + font-style: italic; + list-style-type: none; } diff --git a/src/data/timeline.json b/src/data/timeline.json index 743c449..7631237 100644 --- a/src/data/timeline.json +++ b/src/data/timeline.json @@ -2,33 +2,33 @@ "person": "Ada Lovelace", "events": [ { - "person": "Adele Goldberg", - "status": "In Smalltalk, everything happens somewhere else.", + "person": "Charles Babbage", + "status": "No one made 'em like Lord Byron made 'em. #LoveladieFanClub", "timeStamp": "2018-05-18T22:12:03Z" }, { - "person": "Erica Baker", + "person": "Erica Bemis", "status": "Every once in a while, life affords you the opportunity to have real, authentic, genuine happiness. It's up to you to see it. Pay attention.", "timeStamp": "2018-05-18T22:19:40Z" }, { - "person": "Aubrey Tang", + "person": "Jane Tang", "status": "The art of computer programming is a blend of mathematics and poetry.", "timeStamp": "2018-05-18T22:41:19Z" }, { - "person": "Julia Evans", + "person": "Herb Binochet", "status": "no seriously what if we replaced tech books with informative concise 30 page zines though", "timeStamp": "2018-05-18T23:02:44Z" }, { - "person": "Stephanie Hurlburt", + "person": "Stacy Hurple", "status": "I don’t think you can do good work if you’re not at least occasionally talking to a person you’re building for.", "timeStamp": "2018-05-18T23:09:38Z" }, { "person": "Yan Zhu", - "status": "//for a good time, paste this into twitter page console: c=new AudioContext;n=setInterval(\"for(n+=7,i=k,P='▲.\\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;doc.innerHTML=P;with(c.createOscillator())frequency.value=200*(j+n/k^j),connect(c.destination),start(),stop(n/k)\",k=64)", + "status": "Going through this quarantine like whaaa?", "timeStamp": "2018-05-18T23:51:01Z" } ] diff --git a/src/index.css b/src/index.css index 8cbdf41..0c51db7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&family=Bebas+Neue&display=swap'); + body { margin: 0; padding: 0; - font-family: 'Muli', sans-serif; + font-family: "Baloo Tamma 2", cursive; + font-size: 22px; } \ No newline at end of file