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
D2 The first component of SpaceTravel🌌🌠 is ready and fixed one headache issue
krishna kakade ・ Dec 25 '20
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
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.😊
Top comments (2)
Cool!
Thank you 😊❤