From 516f77a1bcb16665552d9b1a76e700a5559b52e7 Mon Sep 17 00:00:00 2001 From: Uma Chandra Sekhara Sarma Thadepalli Date: Fri, 31 May 2024 15:17:47 +0530 Subject: [PATCH] add mars-rover page --- src/App.css | 23 ++++++++++- .../DisplayDetails/DisplayDetails.jsx | 36 ++++++++++------ src/components/Navbar/Navbar.jsx | 4 +- src/main.jsx | 2 + src/pages/Home/Home.jsx | 4 +- .../MarsRover/MarsRover.jsx | 41 ++++++------------- 6 files changed, 63 insertions(+), 47 deletions(-) rename src/{components => pages}/MarsRover/MarsRover.jsx (88%) diff --git a/src/App.css b/src/App.css index a7580fd..d112885 100644 --- a/src/App.css +++ b/src/App.css @@ -13,6 +13,7 @@ -webkit-text-fill-color: transparent; font-size: 4rem; font-weight: bold; + border-top: 20dvh solid transparent; } .ip { @@ -28,7 +29,6 @@ justify-content: center; outline:none; border: none; - /* background-color: red; */ } .date_input { @@ -113,7 +113,7 @@ border-style: solid; border-width: 1px; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; } @@ -466,3 +466,22 @@ color: inherit; cursor: pointer; } + +#close-btn{ + position: relative; + bottom: 250px; +} +#close-btn button{ + padding: 5px 15px; + font-size: 1rem; + border-radius: 10px; + font-weight: bold; + color: #40019a; + border: none; +} + +#close-btn button:hover{ + color: white; + background: #40019a; + box-shadow: 0 0 10px white; +} \ No newline at end of file diff --git a/src/components/DisplayDetails/DisplayDetails.jsx b/src/components/DisplayDetails/DisplayDetails.jsx index 98fbbc5..e08e10e 100644 --- a/src/components/DisplayDetails/DisplayDetails.jsx +++ b/src/components/DisplayDetails/DisplayDetails.jsx @@ -1,15 +1,13 @@ import React from "react"; import img from "../../assets/feel the fear and do it anyway.png"; -import '../../App.css' - -function DisplayDetails({ roverInfo }) { +import "../../App.css"; +function DisplayDetails({ roverInfo, fun }) { return ( <>
-

Earth Date

-

{roverInfo.earthDate ? roverInfo.earthDate : "...."}

+

+ {roverInfo.earthDate ? roverInfo.earthDate : "...."} +

Rover Name

-

{roverInfo.roverName ? roverInfo.roverName : "...."}

+

+ {roverInfo.roverName ? roverInfo.roverName : "...."} +

Camera

-

{roverInfo.cameraName ? roverInfo.cameraName : "...."}

+

+ {roverInfo.cameraName ? roverInfo.cameraName : "...."} +

@@ -44,26 +48,34 @@ function DisplayDetails({ roverInfo }) {

Launch Date

-

{roverInfo.launchDate ? roverInfo.launchDate : "...."}

+

+ {roverInfo.launchDate ? roverInfo.launchDate : "...."} +

Land Date

-

{roverInfo.landingDate ? roverInfo.landingDate : "...."}

+

+ {roverInfo.landingDate ? roverInfo.landingDate : "...."} +

Status

-

{roverInfo.status ? roverInfo.status : "...."}

+

+ {roverInfo.status ? roverInfo.status : "...."} +

- - +
+ +
+ ); diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 333f974..860ded9 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -48,7 +48,7 @@ function Navbar() { @@ -68,7 +68,7 @@ function Navbar() { APoD
  • - MartianImagery + MartianImagery
  • NASA's Projects diff --git a/src/main.jsx b/src/main.jsx index 88ab0d8..bde04b1 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,12 +5,14 @@ import Home from "./pages/Home/Home.jsx" import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx" import './index.css' import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom" +import MarsRover from './pages/MarsRover/MarsRover.jsx' const router = createBrowserRouter( createRoutesFromElements( }> } /> } /> + }/> ) ) diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index fb2541a..4769238 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,7 +1,7 @@ import React from 'react' import Hero from '../../components/Hero/Hero.jsx' import Apod from '../../components/Apod/Apod.jsx' -import MarsRover from '../../components/MarsRover/MarsRover.jsx' +// import MarsRover from '../MarsRover/MarsRover.jsx' import ContactForm from '../../components/ContactForm/ContactForm.jsx' function Home() { @@ -9,7 +9,7 @@ function Home() { <> - + {/* */} ) diff --git a/src/components/MarsRover/MarsRover.jsx b/src/pages/MarsRover/MarsRover.jsx similarity index 88% rename from src/components/MarsRover/MarsRover.jsx rename to src/pages/MarsRover/MarsRover.jsx index 3d8c2a3..c651b6c 100644 --- a/src/components/MarsRover/MarsRover.jsx +++ b/src/pages/MarsRover/MarsRover.jsx @@ -1,12 +1,12 @@ import React, { useEffect, useState } from "react"; import img from "../../assets/mars.png"; -import DisplayDetails from "../DisplayDetails/DisplayDetails.jsx"; -import { toastify } from "../Toast/Toast.jsx"; +import DisplayDetails from "../../components/DisplayDetails/DisplayDetails.jsx"; +import { toastify } from "../../components/Toast/Toast.jsx"; import ReadableStreamDecoder from './../../utils/ReadableStreamDecoder'; function MarsRover() { - const [showDefault, setShowDefault] = useState(true); + const [showImages, setShowImages] = useState(false); const [userDate, setUserDate] = useState(""); const [roverInfo, setRoverInfo] = useState({ url: "", @@ -26,17 +26,13 @@ function MarsRover() { async function displayRover(e) { try { + e.preventDefault(); + if (userDate == "") { toastify("Enter Date", false) return } - e.preventDefault(); - - setShowDefault((prev) => { - return false; - }) - let url = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${userDate}&api_key=${import.meta.env.VITE_API_KEY}`; let response = await fetch(url); @@ -45,7 +41,7 @@ function MarsRover() { if (response.photos.length === 0) { toastify("No images for selected date", false) - setShowDefault(true) + setShowImages(false) setRoverInfo({ url: "", earthDate: "", @@ -64,6 +60,8 @@ function MarsRover() { return { ...prev, url: image_from_rover.img_src, earthDate: image_from_rover.earth_date, roverName: image_from_rover.rover.name, cameraName: image_from_rover.camera.full_name, launchDate: image_from_rover.rover.launch_date, landingDate: image_from_rover.rover.landing_date, status: image_from_rover.rover.status }; }) + setShowImages(true) + } catch (error) { console.log(error.message); } @@ -78,22 +76,11 @@ function MarsRover() { const data = await ReadableStreamDecoder(response.body); setMaxDate(data.latest_photos[0].rover.max_date); + setUserDate(data.latest_photos[0].rover.max_date); } catch (error) { console.log(error.message); } - - const today_date = new Date(); - const temp = new Date(); - - temp.setDate((today_date.getDate() - 124)) - - var dd = String(temp.getDate()).padStart(2, '0'); - var mm = String(temp.getMonth() + 1).padStart(2, '0'); - var yyyy = temp.getFullYear(); - - return `${yyyy}-${mm}-${dd}`; - } @@ -101,7 +88,6 @@ function MarsRover() { <>

    Mars Rover Imagery


    - {showDefault ?
    @@ -134,12 +120,6 @@ function MarsRover() {
    - : - - - - } -
    setUserDate((prev) => e.target.value)} />
    + {showImages && ()} + ); }