editing about

api/server.js

@@ -0,0 +1,25 @@
+const express = require('express');
+const axios = require('axios');
+const cors = require('cors');
+const app = express();
+const port = 3001;
+
+app.use(cors());
+
+app.get('/events', (req, res) => {
+  axios.get('https://eonet.gsfc.nasa.gov/api/v3/events?status=open&limit=20')
+      .then(response => {
+          console.log("Data from API:", response.data); 
+          res.json(response.data.events);
+      })
+      .catch(error => {
+          console.error("Error:", error);
+          res.status(500).send(error);
+      });
+});
+
+app.listen(port, () => {
+  console.log(`Server running on http://localhost:${port}`);
+});
+
+

package.json

@@ -11,6 +11,8 @@
     "mongodb": "^5.6.0",
     "node-cron": "^3.0.2",
     "nodemailer": "^6.9.3",
+    "ol": "^7.4.0",
+    "ol-mapbox-style": "^10.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",

src/AboutModal.js

@@ -17,24 +17,24 @@ const AboutModal = ({ onClose }) => (
     <div className="star-wars">
       <Section title="Astronomy Picture of the Day (APOD)">
         <p className="crawl">
-          Our APOD feature allows you to discover a new celestial wonder every
+          APOD feature allows you to discover a new celestial wonder every
           day. Accompanied by detailed explanations, you can learn about our
           universe in a visually striking way.
         </p>
       </Section>
-      <Section title="Near Earth Objects (NEO)">
+      <Section title="EONET">
         <p className="crawl">
-          The NEO feature provides you with real-time data about objects that
-          have recently passed close to Earth. With information like the close
-          approach date and the estimated diameter, this feature helps you
-          comprehend the activity that occurs in our planet's vicinity.
+          The Earth Observatory Natural Event Tracker (EONET) is a repository of
+          metadata about natural events around the world. It's maintained by
+          NASA's Earth Science Division. EONET events are categorized into
+          several types such as wildfires, severe storms, floods, and more.
         </p>
       </Section>
-      <Section title="Image Search">
+      <Section title="Video Search">
         <p className="crawl">
-          Powerful search tool taps into NASA's vast image database, enabling
+          Powerful search tool taps into NASA's vast video database, enabling
           you to find stunning visuals of distant galaxies, nebulae, planets,
-          and more. Click on an image to view it in greater detail within a
+          and more. Click on a video to view it in greater detail within a
           dedicated modal.
         </p>
       </Section>

src/index.css

@@ -36,23 +36,13 @@ video {
       top: 100vh;
   }
   70% {
-      top: -500vh; /* Adjust this value based on the length of your content */
+      top: -500vh; 
   }
   100% {
-      top: -500vh; /* Adjust this value based on the length of your content */
+      top: -500vh; 
   }
 }
 
-
-
-/* .no-results{
-  color: rgb(239, 238, 238);
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
-  margin-top: 20px;
-} */
-
 .about {
   padding: 20px;
   border-radius: 10px;
@@ -71,17 +61,10 @@ video {
   text-align: center;
 }
 
-.star-wars {
-  margin-top: 20px;
-}
-
 .star-wars .crawl {
   text-align: justify;
   color: #fdfcfc;
-  font-size: 20px;
-
-
-
+  font-size: 20px;  
 }
 
 .section {
@@ -185,7 +168,7 @@ header h2 {
 
 .container-child p, .container-child h4{
   display: inline;
-  background-color: #3B0A38;
+  background-color: #2a314b;
   max-height: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -246,3 +229,37 @@ header h2 {
   }
 }
 
+.apod{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;  
+  margin-top: 50px;
+}
+.loading-apod{
+  color: #fdfcfc;
+}
+.apod-text{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;  
+  color: rgb(0, 0, 0);
+  font:bold 15px 'Roboto', sans-serif;
+  font-family: 'Open Sans', sans-serif;
+  margin-top: 5px;
+  opacity: 0.8;
+}
+
+.apod-title {
+  font-size: 25px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: rgb(207, 221, 245);
+  display: flex;
+
+}
+.title-astronomy{
+  color: rgb(85, 170, 239);
+  display: flex;
+}