docs: add space images

src/components/Pages/Elements/DisplayPicture.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import "./Elements.css";
+
+function DisplayPicture({title, image, credit}) {
+    return (
+        <div className='image-container'>
+            <div className="image-title">{title}</div>
+            <img className='image-display' src={image} alt="moon" />
+            <div className="image-credit">Photos By {credit}</div>
+        </div>
+    );
+}
+
+export default DisplayPicture;

src/components/Pages/Elements/Elements.css

@@ -56,6 +56,30 @@
   width: 75%;
 }
 
+.image-container {
+  max-width: 800px;
+  /* top | right | bottom | left */
+  margin: 5% auto 0 auto;
+}
+
+.image-display {
+  max-width: 700px;
+  height: 500px;
+  border-radius: 8px;
+}
+
+.image-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 2.5%;
+}
+
+.image-credit {
+  font-size: 18px;
+  font-style: italic;
+  margin-bottom: 2.5%;
+}
+
 @media screen and (max-width: 768px) {
   .selection-all-button-container {
     display: block;
@@ -68,6 +92,20 @@
   .line-chart-container{
     display: none;
   }
+
+  .image-container {
+    width: 100%;
+  }
+
+  .title-container {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 5%;
+  }
+
+  .image-display {
+    width: 100%;
+  }
 }
 
 .description-text {

src/components/Pages/Mars.jsx

@@ -3,6 +3,12 @@ import Title from './Elements/Title';
 import TemperatureMars from '../Data/TemperatureMars'
 import LineChart from './Elements/LineChart';
 import { IncrementVisitorCount } from '../../utilities/counters';
+import DisplayPicture from './Elements/DisplayPicture';
+import Mars1 from "../../img/mars/mars-1.webp";
+import Mars2 from "../../img/mars/mars-2.webp";
+import Mars3 from "../../img/mars/mars-3.webp";
+import Mars4 from "../../img/mars/mars-4.webp";
+import Mars5 from "../../img/mars/mars-5.webp";
 
 const facts = [
   'Mars is about half the size of Earth. If Earth were the size of a nickel, Mars would be about as big as a raspberry.', 
@@ -14,11 +20,12 @@ const facts = [
   'Similarly to Earth, Mars has four distinct seasons. However, each season lasts about twice as long because the Martian year is almost twice that of Earth.',
 ];
 
+const images = [Mars1, Mars2, Mars3, Mars4, Mars5];
 const INTERVAL_LENGTH = 5000;
 
 function Mars() {
-
   const [factIndex, setFactIndex] = useState(0);
+  const [imageIndex, setImageIndex] = useState(0);
   const [data, setData] = useState(null);
   const [options, setOptions] = useState(null);
 
@@ -27,17 +34,23 @@ function Mars() {
     const [data, options] = TemperatureMars();
     setData(data);
     setOptions(options);
-    let intervalId = setInterval(() => {
+    let factIntervalId = setInterval(() => {
       let currentIdx = factIndex;
       setFactIndex(currentIdx + 1);
     }, INTERVAL_LENGTH);
+    let imageIntervalId = setInterval(() => {
+      let currentIdx = imageIndex;
+      setImageIndex(currentIdx + 1);
+    }, INTERVAL_LENGTH);
     return(() => {
-      clearInterval(intervalId)
+      clearInterval(factIntervalId);
+      clearInterval(imageIntervalId);
     })
   }, [factIndex]);
 
   let fact = facts[factIndex % facts.length];
-
+  let image = images[imageIndex % images.length];
+
   // data not loaded yet
   if (data == null || options == null) {
     return (
@@ -53,6 +66,7 @@ function Mars() {
       <Title title = {`Mars`} 
         subtitle={fact}/>
       <LineChart data={data} options={options}/>
+      <DisplayPicture title="The Wonder of Mars 📸 " image={image} credit={"science.nasa.gov/mars"}/>
     </div>
   );
 }

src/components/Pages/Moon.jsx

@@ -3,6 +3,12 @@ import Title from './Elements/Title';
 import LineChart from './Elements/LineChart';
 import EarthToMoon from "../Data/EarthToMoon";
 import { IncrementVisitorCount } from '../../utilities/counters';
+import DisplayPicture from './Elements/DisplayPicture';
+import Moon1 from "../../img/moon/moon-1.jpg";
+import Moon2 from "../../img/moon/moon-2.webp";
+import Moon3 from "../../img/moon/moon-3.webp";
+import Moon4 from "../../img/moon/moon-4.webp";
+import Moon5 from "../../img/moon/moon-5.webp";
 
 const facts = [
   'The Moon was likely formed after a Mars-sized body collided with Earth about 4.5 billion years ago.', 
@@ -15,10 +21,12 @@ const facts = [
   'The Moon\'s distance to Earth varies. The Moon is closest at perigee and furthest at apogee.'
 ];
 
+const images = [Moon1, Moon2, Moon3, Moon4, Moon5];
 const INTERVAL_LENGTH = 5000;
 
 function Moon() {
   const [factIndex, setFactIndex] = useState(0);
+  const [imageIndex, setImageIndex] = useState(0);
   const [data, setData] = useState(null);
   const [options, setOptions] = useState(null);
 
@@ -27,16 +35,22 @@ function Moon() {
     const [data, options] = EarthToMoon();
     setData(data);
     setOptions(options);
-    let intervalId = setInterval(() => {
+    let factIntervalId = setInterval(() => {
       let currentIdx = factIndex;
       setFactIndex(currentIdx + 1);
     }, INTERVAL_LENGTH);
+    let imageIntervalId = setInterval(() => {
+      let currentIdx = imageIndex;
+      setImageIndex(currentIdx + 1);
+    }, INTERVAL_LENGTH);
     return(() => {
-      clearInterval(intervalId)
+      clearInterval(factIntervalId);
+      clearInterval(imageIntervalId);
     })
-  }, [factIndex])
+  }, [factIndex, imageIndex])
 
   let fact = facts[factIndex % facts.length];
+  let image = images[imageIndex % images.length];
 
   // data not loaded yet
   if (data == null || options == null) {
@@ -53,6 +67,7 @@ function Moon() {
       <Title title = {`Earth's Moon`} 
         subtitle={fact}/>
       <LineChart data={data} options={options}/>
+      <DisplayPicture title="Our Stunning Moon 📸 " image={image} credit={"science.nasa.gov/moon"}/>
     </div>
     );
 };