moving src folder

src/ApodCard.css

@@ -0,0 +1,31 @@
+.image-container {
+    position:  relative;
+    display: inline-block;
+    width: 100%;
+    max-width: 800px;
+    margin: auto;
+}
+
+.apod-image {
+    width: 50%;
+    height: 50%;
+    display: block;
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 20px;
+}
+
+.overlay-text {
+    margin: 5px 0;
+}

src/ApodCard.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { Container, Card, CardContent, CardMedia, Typography, CircularProgress, CardActionArea } from '@mui/material';
+import './ApodCard.css';
+import './ButtonAppBar'
+import ButtonAppBar from './ButtonAppBar';
+
+const ApodCard = () => {
+    const [apod, setApod] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchApod = async () => {
+            try {
+                const response = await fetch(`http://localhost:8080/get-apod`);
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setApod(data);
+                setLoading(false);
+            } catch (error) {
+                setError(error.message);
+                setLoading(false);
+            }
+        };
+
+        fetchApod();
+    }, []);
+
+    if (loading) {
+        return (
+            <Container style={{ textAlign: 'center', marginTop: '50px' }}>
+                <CircularProgress />
+            </Container>
+        );
+    }
+
+    if (error) {
+        return (
+            <Container style={{ textAlign: 'center', marginTop: '50px' }}>
+                <Typography variant="h5" color="error">
+                    {error}
+                </Typography>
+            </Container>
+        );
+    }
+
+    return (
+
+
+        <Container style={{ marginTop: '50px' }}>
+            <ButtonAppBar></ButtonAppBar>
+         <Card>
+                <CardActionArea>
+                <div className='overlay-date'>
+                <CardContent>
+                    <Typography variant="h5" component="div" className="overlay-text-date">
+                        {apod.title}
+                    </Typography>
+                    <Typography variant="body1" className="overlay-text-date" >
+                        Date: {apod.date}
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" className="overlay-text-date">
+                        {apod.explanation}
+                    </Typography>
+
+                    <Typography variant='' alt='no author' className="overlay-text-date">
+                      {apod.copyright}
+                    </Typography>
+
+
+
+                </CardContent>
+                </div>
+                 <div className='image-container-date'>
+                    <CardMedia
+                        component="img"
+                        alt={apod.title}
+                        image={ apod.hdurl}
+                        title={apod.title}
+                        className='apod-image-date'
+                    />
+                </div>
+
+                </CardActionArea>
+            </Card>
+
+        </Container>
+    );
+
+};
+
+export default ApodCard;

src/ApodDate.css

@@ -0,0 +1,31 @@
+.image-container-date {
+    position:  relative;
+    display: inline-block;
+    width: 100%;
+    max-width: 800px;
+    margin: auto;
+}
+
+.apod-image-date {
+    width: 50%;
+    height: 50%;
+    display: block;
+}
+
+.overlay-date {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 20px;
+}
+
+.overlay-text-date {
+    margin: 5px 0;
+}

src/ApodDate.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { Container, Card, CardContent, CardMedia, Typography, CircularProgress, CardActionArea } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import './ApodCard.css';
+import './ButtonAppBar'
+import ButtonAppBar from './ButtonAppBar';
+
+const ApodDate = () => {
+    const { date } = useParams();
+    const [apod, setApod] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchApod = async () => {
+            try {
+                const response = await fetch(`http://localhost:8080/${date}`);
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setApod(data);
+                setLoading(false);
+            } catch (error) {
+                setError(error.message);
+                setLoading(false);
+            }
+        };
+
+        fetchApod();
+    }, [date]);
+
+    if (loading) {
+        return (
+            <Container style={{ textAlign: 'center', marginTop: '50px' }}>
+                <CircularProgress />
+            </Container>
+        );
+    }
+
+    if (error) {
+        return (
+            <Container style={{ textAlign: 'center', marginTop: '50px' }}>
+                <Typography variant="h5" color="error">
+                    {error}
+                </Typography>
+            </Container>
+        );
+    }
+
+    return (
+        <Container style={{ marginTop: '50px' }}>
+            <ButtonAppBar></ButtonAppBar>
+         <Card>
+                <CardActionArea>
+                <div className='overlay-date'>
+                <CardContent>
+                    <Typography variant="h5" component="div" className="overlay-text-date">
+                        {apod.title}
+                    </Typography>
+                    <Typography variant="body1" className="overlay-text-date" >
+                        Date: {apod.date}
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" className="overlay-text-date">
+                        {apod.explanation}
+                    </Typography>
+                    <Typography variant='' alt='no author' className="overlay-text-date">
+                      {apod.copyright}
+                    </Typography>
+
+
+                </CardContent>
+                </div>
+                 <div className='image-container-date'>
+                    <CardMedia
+                        component="img"
+                        alt={apod.title}
+                        image={ apod.hdurl}
+                        title={apod.title}
+                        className='apod-image-date'
+                    />
+                </div>
+
+                </CardActionArea>
+            </Card>
+
+        </Container>
+    );
+
+};
+
+export default ApodDate;

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,19 @@
+import './App.css';
+import ApodCard from './ApodCard';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import LandingPage from './LandingPage.js';
+import ApodDate from './ApodDate';
+
+function App() {
+  return (
+ <Router>
+  <Routes>
+    <Route path='/' element={<LandingPage />}/>
+    <Route path='/today' element={<ApodCard date={new Date().toISOString().split('T')[0]}/>} />
+    <Route path='/:date' element={<ApodDate />}/>
+  </Routes>
+ </Router>
+  );
+};
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/ButtonAppBar.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { useNavigate} from 'react-router-dom';
+
+export default function ButtonAppBar() {
+    const navigate = useNavigate();
+    const handleHomeButton = () => {
+        navigate('/');
+    }
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+          <Button color="inherit" onClick={handleHomeButton}>Home</Button>
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Astronomy Photo of the Day
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}

src/LandingPage.css

@@ -0,0 +1,32 @@
+.landing-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url('https://cdn.esahubble.org/archives/images/screen/heic1302a.jpg');
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    color: white;
+}
+
+.header {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+}
+
+.logo {
+    font-weight: bold;
+}
+
+.content {
+    text-align: center;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+}