bloominstituteoftechnology · TerriArcher · Nov 9, 2022 · Nov 9, 2022 · Nov 11, 2022 · Nov 11, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0"
+    "react-scripts": "5.0.0",
+    "styled-components": "^5.3.6"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,17 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300&family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Anybody&family=Exo+2:wght@300&family=Inconsolata:wght@300;400&display=swap" rel="stylesheet">
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Nasa</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -28,6 +28,11 @@
   color: #61dafb;
 }
 
+p, h1, h2, h3 {
+  font-family: 'Inconsolata', monospace;
+}
+
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,24 @@
-import React from "react";
+import React, {useState,useEffect} from "react";
+import axios from "axios"
+import Photo from "./components/Photo"
+import Header from "./components/Header"
 import "./App.css";
 
+
+
 function App() {
+  const [nasaData, setNasaData] = useState()
+  useEffect(() => {
+    axios.get('https://api.nasa.gov/planetary/apod?api_key=KegHQiuuqdamaU7M8nYwsOF0gVINoftWAqEaf389')
+      .then(res => {
+        setNasaData(res.data)
+      })
+      .catch(err => console.error(err))
+  }, [])
   return (
     <div className="App">
-      <p>
-        Read through the instructions in the README.md file to build your NASA
-        app! Have fun <span role="img" aria-label='go!'>🚀</span>!
-      </p>
+        {nasaData && <Header header={nasaData}/>}
+        {nasaData && <Photo photo={nasaData} />}
     </div>
   );
 }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+
+/**
+ * To-Do
+ * add in button functionality
+ * find proper color theme
+ */
+
+
+const MainWrapper = styled.div`
+    width: 50%;
+    border: thick double;
+    margin: 1% auto;
+
+    h1, h3 {
+        font-family: 'Anybody', cursive;
+    }
+
+    .dashboard {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+
+    button {
+        background-color: ${pr => pr.theme.secondary};
+    }
+
+
+`;
+
+const Header = (props) => {
+    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const month = months[props.header.date.slice(5,7) -1]
+    const day = props.header.date.slice(8)
+    const year = props.header.date.slice(0,4)
+
+
+    return (
+        <MainWrapper>
+            <h1>Welcome to your NASA photo of the day!</h1>
+            <div className="dashboard">
+                <button>Previous Day</button>
+                <h3>{month + " "+  day + ", " + year}</h3>
+                <button>Current Day</button>
+            </div>
+        </MainWrapper>
+
+    )
+};
+
+
+export default Header
diff --git a/src/components/Photo.js b/src/components/Photo.js
@@ -0,0 +1,62 @@
+import React from "react";
+import styled from 'styled-components'
+
+
+const StyledWrapper = styled.div`
+    background-color: ${pr => pr.theme.primary};
+    margin: 2%;
+    align-items: center;
+    border: groove 0.2rem #a9a9ab;
+
+    h2, h3 {
+        background-color: ${pr => pr.theme.primary};
+    }
+
+    h2 {
+        font-style: bold;
+        font-family: 'Anybody', cursive;
+    }
+
+    h3 {
+        font-style: italic;
+    }
+
+    img {
+        max-width: 40%;
+        // object-fit: cover;
+        border: ridge 0.2rem;
+    }
+
+    .content {
+        margin: 3%;
+        display: flex;
+        flex-direction: row;
+        background-color: ${pr => pr.theme.primary};
+    }
+
+    .content p {
+        padding: 2%;
+        width: 50%;
+        margin: 5%;
+        border: thick double black;
+        background-color: ${pr=> pr.theme.secondary};
+        color: white;
+        font-family: 'Exo 2', sans-serif;
+    }
+`;
+
+
+const Photo = (props) => {
+    return(
+        <StyledWrapper>
+            <h2>{props.photo.title}</h2>
+            <h3>{props.photo.copyright}</h3>
+            <div className="content">
+                <img src={props.photo.hdurl} alt={props.photo.title}/>
+                <p>{props.photo.explanation}</p>
+            </div>            
+        </StyledWrapper>
+    )
+}
+
+export default Photo
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+*{
+  background-color: #604D53;
+}
diff --git a/src/index.js b/src/index.js
@@ -2,5 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+import { ThemeProvider } from "styled-components"
+import theme from "./theme"
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+    <ThemeProvider theme={theme}>
+        <App />
+    </ThemeProvider>,
+    document.getElementById("root")
+);
diff --git a/src/theme/index.js b/src/theme/index.js
@@ -0,0 +1,6 @@
+export default {
+    primary: '#D5C5C8',
+    secondary: '#9DA3A4',
+    teriary: '#604D53',
+    wildcard: '#db7f8e'
+}