DEV Community

Cover image for Day 3 almost 80% work of the second component is completed and fetched content from NASA API 🌠 and more stuff dohackathon
krishna kakade
krishna kakade

Posted on

Day 3 almost 80% work of the second component is completed and fetched content from NASA API 🌠 and more stuff dohackathon

Hackathon Journey
hello all 😊👋
In this Day 3(note day3 is just for the name I am working on this stuff since 1 2 weeks) article of the digital Ocean hackathon, I am going to write about how I did things and which things I completed till today so let's jump into the article now.

If you are following this series then you are knowing the first component of this project is ready if you're not following the series then somewhere below you can find the series thing you can check out.
Today I am going to tell you about the second component as the previous component I solved a major issue related to the react-router thing
here stack overflow link

i deleted app.js file and reference related to that and then did following enter image description here

enter image description here

enter image description here

thank you brother saurabh for guiding me 🎉❤

or else you can also check

and after giving Space.js file after clicking on that now in space component I fetched information from NASA APOD(astronomy picture of the day)specific API nasa APOD API
look how I did it space.js

import React from "react";
import styles from "./Space.module.css";

import {useState,useEffect} from "react";
function Space() {
  const [photoData,setPhotoData]=useState(null);
  useEffect(()=>{
fetchPhoto();
async function fetchPhoto(){
  const res = await fetch(`https://api.nasa.gov/planetary/apod?api_key=`);
  const data=await res.json();
  setPhotoData(data);
  console.log(data);
}
  },[]); //empty array for running only once then empty array for that 


  if (!photoData) return <div />;

  return (
    <>
    <div className={styles.space}>
      {photoData.media_type === "image" ? (
        <img 
          src={photoData.url}
          alt={photoData.title}
          className={styles.space}
        />
      ) : (
        <iframe
          title="space-video"
          src={photoData.url}
          frameBorder="0"
          gesture="media"
          allow="encrypted-media"
          allowFullScreen
          className={styles.space}
        />
      )}
      <div>
        <h1>{photoData.title}</h1>
        <p className={styles.space.date}>{photoData.date}</p>
        <p className={styles.space.explanation}>{photoData.explanation}</p>
      </div>

    </div>
    </>
  );
}
export default Space;
Enter fullscreen mode Exit fullscreen mode

css modules is good option when we work with reactjs
Space.module.css



.space {
  display: flex;
  padding: 40px;
  margin: 0 auto;
  max-height: 100%;
  width: auto;

}

.space img {
  width: 80%;
  margin-right: 50px;
  object-fit: contain;
  max-height: 80vh;

}

.space h1 {
  margin-top: 0;
  margin-bottom: 0;
}

.space date {
  margin-top: 0;
  margin-bottom: 30px;
}

.space explanation {
  color: #bbb;
}

@media (max-width: 1280px) {
  .space {
    display: block;
  }

  .space img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;

  }
}

Enter fullscreen mode Exit fullscreen mode

And now I will show how the second component of an app look like

App second componet

and now what is remaining in the second component that I will show below
Alt Text
the next thing I working on that

I fetched content from API with this code:

import React from "react"
import styles from "./Space.module.css";

import {useState,useEffect} from "react";
function Space() {
  const [photoData,setPhotoData]=useState(null);
  useEffect(()=>{
fetchPhoto();
async function fetchPhoto(){
  const res = await fetch(`https://api.nasa.gov/planetary/apod?api_key=hETQq0FPsZJnUP9C3sUEFtwmJH3edb4I5bghfWDM`);
  const data=await res.json();
  setPhotoData(data);
  console.log(data);
}
  },[]); //empty array for running only once then empty



and for text to speech thing one my college friend/brother Onkar Khedkar is working on that part because he skilled in that domain and after completing this component one about component will come and after that spacetravel will be deployed and made public.

thank you for reading have a nice day all.😊

GIF

Top comments (2)

Collapse
 
ben profile image
Ben Halpern

Cool!

Collapse
 
krishnakakade profile image
krishna kakade

Thank you 😊❤