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

#dohackathon #react #webdev #showdev

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

Dec 25 '20

i deleted app.js file and reference related to that and then did following

thank you brother saurabh for guiding me 🎉❤

Open Full Answer

or else you can also check

D2 The first component of SpaceTravel🌌🌠 is ready and fixed one headache issue

krishna kakade ・ Dec 25 '20 ・ 3 min read

#dohackathon #react #webdev #showdev

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;

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;

  }
}

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

and now what is remaining in the second component that I will show below

the next thing I working on that

Jan 3 '21 Comments: 1 Answers: 1

** 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

…

Open Full Question

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.😊