From 410f757cba6934f466006e53e917e4655ae90416 Mon Sep 17 00:00:00 2001 From: Lauren Davidson Date: Wed, 12 Feb 2020 08:57:01 -0500 Subject: [PATCH 1/3] Where we left off --- src/02_starter/App.js | 4 ++++ src/02_starter/Img.js | 14 ++++++++++++++ src/index.js | 4 ++-- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/02_starter/App.js b/src/02_starter/App.js index 0196597..53d1bff 100644 --- a/src/02_starter/App.js +++ b/src/02_starter/App.js @@ -1,12 +1,16 @@ import React from 'react' import Layout from './Layout' import imgSources from './data' +import Image from './Img' //the top-level component for our app. I've added some basic styling and a flexbox layout for you so your gifs make a nice grid :) export default function App() { return ( + + + ) } diff --git a/src/02_starter/Img.js b/src/02_starter/Img.js index 98bfceb..383c049 100644 --- a/src/02_starter/Img.js +++ b/src/02_starter/Img.js @@ -1 +1,15 @@ //a component that displays an image goes here +import React from 'react' + +export default function Image(props) { + + props = { + hi: 'url goes here', + test: 'test', + another: 'another' + } + + + const someVariable = props.hi + return cute kitten +} diff --git a/src/index.js b/src/index.js index e8c592b..c88d24a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' -import App from './01_example/App' -// import App from './02_starter/App' /*uncomment this import and comment out the one above when you're ready to write your own code*/ +// import App from './01_example/App' +import App from './02_starter/App' /*uncomment this import and comment out the one above when you're ready to write your own code*/ ReactDOM.render(, document.getElementById('root')) From ed50d3f439ab31618b7deecdbf27b11e00a9969d Mon Sep 17 00:00:00 2001 From: Lauren Davidson Date: Wed, 12 Feb 2020 09:08:39 -0500 Subject: [PATCH 2/3] Cleanup --- src/02_starter/App.js | 7 ++++--- src/02_starter/Img.js | 14 ++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/02_starter/App.js b/src/02_starter/App.js index 53d1bff..1c2b95e 100644 --- a/src/02_starter/App.js +++ b/src/02_starter/App.js @@ -2,15 +2,16 @@ import React from 'react' import Layout from './Layout' import imgSources from './data' import Image from './Img' +import { Row, Col } from 'shards-react' //the top-level component for our app. I've added some basic styling and a flexbox layout for you so your gifs make a nice grid :) export default function App() { return ( - - - + + + ) } diff --git a/src/02_starter/Img.js b/src/02_starter/Img.js index 383c049..4d7fb73 100644 --- a/src/02_starter/Img.js +++ b/src/02_starter/Img.js @@ -3,13 +3,11 @@ import React from 'react' export default function Image(props) { - props = { - hi: 'url goes here', - test: 'test', - another: 'another' - } + // props = { + // url: 'url goes here', + // test: 'test', + // another: 'another' + // } - - const someVariable = props.hi - return cute kitten + return cute kitten } From 61f9c42bdf3fabebd3a3bc9677eadfc4c7866fa1 Mon Sep 17 00:00:00 2001 From: llf Date: Wed, 19 Feb 2020 11:01:02 -0500 Subject: [PATCH 3/3] 20200219 version --- src/02_starter/App.js | 11 ++++++----- src/02_starter/Img.js | 14 ++++++-------- src/02_starter/Switch.js | 14 +++++++++++++- src/02_starter/data.js | 12 ++++++++++-- 4 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/02_starter/App.js b/src/02_starter/App.js index 1c2b95e..b652187 100644 --- a/src/02_starter/App.js +++ b/src/02_starter/App.js @@ -1,17 +1,18 @@ import React from 'react' import Layout from './Layout' -import imgSources from './data' -import Image from './Img' +import urls from './data' +import Switch from './Switch' import { Row, Col } from 'shards-react' //the top-level component for our app. I've added some basic styling and a flexbox layout for you so your gifs make a nice grid :) export default function App() { + const imgToGifs = urls.map( item => { + return + }) return ( - - - + {imgToGifs} ) } diff --git a/src/02_starter/Img.js b/src/02_starter/Img.js index 4d7fb73..7cb9c4a 100644 --- a/src/02_starter/Img.js +++ b/src/02_starter/Img.js @@ -1,13 +1,11 @@ //a component that displays an image goes here import React from 'react' +import Button from './Button' export default function Image(props) { - - // props = { - // url: 'url goes here', - // test: 'test', - // another: 'another' - // } - - return cute kitten + return ( + + ) } diff --git a/src/02_starter/Switch.js b/src/02_starter/Switch.js index 6c51ac7..5c8d939 100644 --- a/src/02_starter/Switch.js +++ b/src/02_starter/Switch.js @@ -1 +1,13 @@ -//a component that handles the state of our img/gif button goes here +import React, { useState } from 'react' +import Image from './Img' + +export default function Switch(props) { + const { imgUrl, gifUrl } = props + const [showImg, setShowImg] = useState(true) + + if(showImg) { + return img setShowImg(false)} /> + } else { + return gif setShowImg(true)} /> + } +} diff --git a/src/02_starter/data.js b/src/02_starter/data.js index 0b7b4e4..5ecb8a5 100644 --- a/src/02_starter/data.js +++ b/src/02_starter/data.js @@ -1,8 +1,16 @@ //the data structure we'll use to build our app const urls = [ { - img: '', - gif: '', + img: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/video/caring_for_your_kitten_video/650x350_caring_for_your_kitten_video.jpg', + gif: 'https://media.giphy.com/media/hvS1eKlR75hMr0l7VJ/giphy.gif', + }, + { + img: 'https://geekologie.com/2019/08/29/googly-eyed-kitten.jpg', + gif: 'https://media.giphy.com/media/8OPbx53X3mFoWMw5aO/giphy.gif', + }, + { + img: 'https://www.pethealthnetwork.com/sites/default/files/styles/large/public/kittens-in-basket.jpg?itok=7mZDIHOZ', + gif: 'https://media.giphy.com/media/142Y941q45XPdm/giphy.gif', } ]