MyPull

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": "^0.27.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0"
+    "react-scripts": "5.0.0",
+    "styled-components": "^5.3.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,5 +1,14 @@
 .App {
   text-align: center;
+  margin: 0%;
+  background-color: black;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-image: url(https://c.pxhere.com/photos/1a/9d/stars_background_blue_photoshop_color_space_sky_dark-610854.jpg!d);
+  min-height: 100vh;
+  max-width: 100vw;
+  padding: 0%;
 }
 
 .App-logo {

src/App.js

@@ -1,15 +1,37 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import NavBar from "./components/header";
+import ImageContainer from "./components/imageContainer";
+import axios from "axios";
+import { BASE_URL, API_KEY } from "./constants/index";
 import "./App.css";
 
+
+
 function App() {
+  const initialDate = [new Date().getFullYear().toString(), (new Date().getMonth() + 1).toString(), new Date().getDate().toString()]
+  if(initialDate[1].length < 2)initialDate[1] = `0${initialDate[1]}`
+  //The above is to set the initial date for useState below. The jank is because the API needs specific formatting. 
+  //Such as: '2022-05-18' rather than '2022-4-18' which would return error and wrong month.
+  const [typeOfImg, setTypeOfImg] = useState('auto');
+  const [dataObj, setDataObj] = useState('This will exist soon');
+  const [date, setDate] = useState(`${initialDate[0]}-${initialDate[1]}-${initialDate[2]}`);
+
+  useEffect(()=>{
+    axios.get(`${BASE_URL}?api_key=${API_KEY}&date=${date}`)
+    .then(res=>{
+      setDataObj(res.data);
+    })
+    .catch(res=>{'error?'})
+  }, [])
+
+
+
   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>
+      <NavBar setTypeOfImg={setTypeOfImg} />
+      <ImageContainer hdurl={dataObj.hdurl} data={dataObj} />
     </div>
   );
-}
+};
 
 export default App;

src/Components/header.js

@@ -0,0 +1,36 @@
+import React, {useState, useEffect} from 'react';
+import styled from 'styled-components';
+
+const CustomHeader = styled.div`
+    border-bottom: solid .5vh white;
+    border-right: solid .5vh white;
+    border-left: solid .5vh white;
+    margin: 3vh 0vh 0vh 0vh;
+    width: 75%;
+    border-radius: 2vh;
+    background-color: lightblue;
+    padding: 2vh;
+    @keyframes fade-in {
+        0% {opacity: 0%;}
+        100% {opacity: 100%;}
+    }
+    animation-name: fade-in;
+    animation-duration: 1s;
+`;
+
+const Logo = styled.h1`
+    padding: 0px;
+    margin: 0px;
+`;
+
+const NavBar = (props) =>{
+    const {setTypeOfImg} = props;
+
+    return (
+    <CustomHeader className="nav-bar">
+        <Logo>NASA - Astronomy Picture Of the Day</Logo>
+    </CustomHeader>
+    )
+}
+
+export default NavBar;

src/Components/image.js

@@ -0,0 +1,30 @@
+import React, {useState, useEffect} from 'react';
+import styled from 'styled-components';
+
+const Image = props =>{
+    const {image} = props;
+
+    const CustomImg = styled.img`
+        border-radius: 2.5vw;
+        max-width: 70%;
+        box-sizing: border-box;
+        border: solid .5vw white;
+        border-bottom: none;
+        border-top: none;
+        margin-bottom: 0vh;
+        transition: .2s;
+
+        &:hover {
+            transition: .2s;
+            max-width: 85%;
+        }
+    `;
+
+    return(
+        <a href={image} target="_blank">
+            <CustomImg src={image} />
+        </a>
+    )
+}
+
+export default Image;

src/Components/imageContainer.js

@@ -0,0 +1,39 @@
+import React, {useState, useEffect} from 'react';
+import Image from "./image";
+import Info from "./info";
+import styled from 'styled-components';
+
+const ImageDiv = styled.div`
+    max-width: 70vw;
+    margin: 0%;
+    @keyframes imageFade {
+        0% {opacity: 0;}
+        25% {opacity: 0;}
+        50% {opacity: 0.75;}
+        100% {opacity: 1;}
+    }
+    animation-name: imageFade;
+    animation-duration: 3s;
+    background-color: #27272775;
+    padding-top: 5vh;
+    margin-bottom: 5vh;
+    border-bottom-right-radius: 2.5vw;
+    border-bottom-left-radius: 2.5vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+`
+
+
+const ImageContainer = (props)=>{
+    const {hdurl, data} = props;
+
+    return (
+        <ImageDiv className='image-container'>   
+            <Image image={hdurl} />
+            <Info data={data} />
+        </ImageDiv>
+    )
+};
+
+export default ImageContainer;

src/Components/info.js

@@ -0,0 +1,40 @@
+import React, {useState, useEffect} from "react";
+import styled from 'styled-components';
+
+const InfoContainer = styled.div`
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    color: white;
+    border: solid .5vw white;
+    max-width: 70%;
+    padding: 5vh 10vw;
+    margin: 0vh 10vh 10vh 10vh;
+    background-color: #27272775;
+    border-radius: 2.5vw;
+    border-top: none;
+    border-bottom: none;
+    margin-top: 5vh;
+`
+const InfoP = styled.p`
+    margin: .5vh;
+    border-radius: .5vw;
+    background-color: #00000080;
+    padding: .25vw;
+    width: fit-content;
+`
+
+const Info = props =>{
+    const {copyright, date, explanation, title} = props.data;
+
+    return (
+        <InfoContainer className="info-container">
+            <InfoP>Title: {title}</InfoP>
+            <InfoP>Date: {date}</InfoP>
+            <InfoP>{explanation}</InfoP>
+            <InfoP>Copyright: {copyright}</InfoP>
+        </InfoContainer>
+    )
+};
+
+export default Info

src/constants/index.js

@@ -0,0 +1,2 @@
+export const BASE_URL = 'https://api.nasa.gov/planetary/apod';
+export const API_KEY = 'j2WsfDfC5Fc8XmRj7zqMyZKqDdbiRGWcM6gGIjob';

src/index.css

@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin: 0%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;