bloominstituteoftechnology · Julianisrel · Nov 21, 2022 · Nov 21, 2022 · Nov 21, 2022 · Nov 22, 2022
diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,11 @@
     transform: rotate(360deg);
   }
 }
+body {
+background-color: #282c34;
+}
+.card-container{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 20px;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,24 @@
 import React from "react";
 import "./App.css";
+import NasaApi from './data';
+import {  Header, Cards } from './containers';
+
+
 
 function App() {
   return (
     <div className="App">
-      <p>
-        Read through the instructions in the README.md file to build your NASA
-        app! Have fun 🚀!
-      </p>
+      <Header />
+      <NasaApi /> 
+
+      {/* <Cards /> */}
     </div>
+
+
+
+
   );
 }
 
 export default App;
+
diff --git a/src/containers/Body/index.jsx b/src/containers/Body/index.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Container } from './styles';
+
+
+
+const Body = () => {
+    return (
+        <Container>
+            {/* <body>Body</body> */}
+
+            </Container>
+    )
+
+  }
+export default Body;
diff --git a/src/containers/Body/styles.js b/src/containers/Body/styles.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+
+const Container = styled.body`
+background-color: #282c34;
+
+
+`;
+export { Container };
diff --git a/src/containers/Cards/index.jsx b/src/containers/Cards/index.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+//import CardStyles from './styles';
+
+import {
+    Card, CardImg, CardText, CardBody,
+    CardTitle, CardSubtitle
+  } from 'reactstrap';
+
+  const CardContainer = ({data}) => {
+    const { date, title, explanation, url } = data;
+    console.log("DATA", data)
+
+        return (
+        <div className="card-container">
+            <Card>
+                <CardBody>
+                <CardTitle>{title}</CardTitle>
+                <CardSubtitle>{date}</CardSubtitle>
+                <CardImg width = "50%" src = {url} alt = "nasa photo of the day"/>
+                <CardText>{explanation}</CardText>      
+
+                </CardBody>
+
+
+            </Card>
+
+            <Card>
+                <CardBody>
+                <CardTitle>{title}</CardTitle>
+                <CardSubtitle>{date}</CardSubtitle>
+                <CardImg width = "50%" src = {url} alt = "nasa photo of the day"/>
+                <CardText>{explanation}</CardText>      
+
+                </CardBody>
+
+
+            </Card>
+
+            <Card>
+                <CardBody>
+                <CardTitle>{title}</CardTitle>
+                <CardSubtitle>{date}</CardSubtitle>
+                <CardImg width = "50%" src = {url} alt = "nasa photo of the day"/>
+                <CardText>{explanation}</CardText>      
+
+                </CardBody>
+
+
+            </Card>
+
+            <Card>
+                <CardBody>
+                <CardTitle>{title}</CardTitle>
+                <CardSubtitle>{date}</CardSubtitle>
+                <CardImg width = "50%" src = {url} alt = "nasa photo of the day"/>
+                <CardText>{explanation}</CardText>      
+
+                </CardBody>
+
+
+            </Card>
+
+
+
+
+        </div>
+    )
+}
+
+export default CardContainer;
diff --git a/src/containers/Cards/styles.js b/src/containers/Cards/styles.js
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+
+
+const CardStyles = styled.div`
+height: 35vh;
+width: 45%;
+`;
+
+
+export default CardStyles;
+
+
diff --git a/src/containers/Header/index.jsx b/src/containers/Header/index.jsx
@@ -0,0 +1,17 @@
+import HeaderStyles from './styles';
+import React from 'react';
+
+const HeaderContainer = () => {
+
+return (
+
+
+    <HeaderStyles>Header</HeaderStyles>
+
+)
+
+
+
+}
+
+export default HeaderContainer;
diff --git a/src/containers/Header/styles.js b/src/containers/Header/styles.js
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+
+
+const HeaderStyles = styled.div`
+background-color: lightblue;
+display: flex;
+align-items: center;
+justify-content: space-between;
+padding: 0.5rem;
+
+`;
+
+
+export default HeaderStyles;
diff --git a/src/containers/index.js b/src/containers/index.js
@@ -0,0 +1,3 @@
+export { default as Cards} from './Cards';
+export { default as Body } from './Body';
+export { default as Header } from './Header';
diff --git a/src/data.js b/src/data.js
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+import StyledContent from './styles';
+import CardContainer from "./containers/Cards";
+
+
+
+
+
+function NasaApi() {
+    const [photos, setPhotos] = useState([])
+
+   const urls= ["url1", "url2", "url3"];
+// change
+
+
+    useEffect(() => {
+       // axios.all([
+
+        axios.get(
+          "https://api.nasa.gov/planetary/apod?api_key=faHZawcTjQQrLRXilzcZEYJDOU87wLPSehtNpb2W&date=2020-03-05 "
+        )
+   // // ])
+
+
+    // .then(axios((...firstresponse) =>{
+    //     console.log(firstresponse.data);
+    //     setPhotos(firstresponse.data);
+
+    //   }))
+    .then(firstresponse =>{
+            console.log(firstresponse.data);
+            setPhotos(firstresponse.data);
+
+          })
+      .catch(err => {
+        console.log(err);
+      });
+  }, [])
+
+
+return (
+    <>
+    <StyledContent>
+    <CardContainer data={photos} />
+
+
+
+
+
+    </StyledContent>
+
+
+</>
+)
+
+
+
+}
+
+export default NasaApi;
diff --git a/src/index.js b/src/index.js
@@ -3,4 +3,10 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+<App />,
+
+
+
+
+document.getElementById("root"));
diff --git a/src/notes.md b/src/notes.md
@@ -0,0 +1,10 @@
+from cards styles {
+
+
+background-color: lightblue;
+display: flex;
+align-items: center;
+justify-content: space-between;
+padding: 0.5rem;
+
+}
diff --git a/src/styles.jsx b/src/styles.jsx
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const StyledContent = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-content: center;
+  margin: 5% 10%;
+  height: 110vh;
+`;
+
+export default StyledContent;