Nasa Photo Of The Day App

This is an app that displays a new photo each day using a NASA API.

Check it out here

https://nasa-photo-of-the-day-three.now.sh/

Motivation

I built this project for Lambda School.

Installation
Features
Support
Tech

Screenshots

Tech

Built with

Features

This project has a minimal design with data from a NASA API displayed into a card that has a floating animation as if it's in space. It dynamically updates every day with the new image, date, and description.

Code Example

function App() {
  // set useState and pull in data from API
  const [date, setDate] = useState();
  const [title, setTitle] = useState();
  const [url, setUrl] = useState();
  const [explanation, setExplanation] = useState();

  // axious request to the API
  // grab specific data
  useEffect (() => {
    axios.get(`https://cors-anywhere.herokuapp.com/https://api.nasa.gov/planetary/apod?api_key=OYB9iH2UyhXcplnYm1eMwAi6CRMi30yyTEKOpd99`)
      .then (response => {
        console.log(response.data);
        setDate(response.data.date);
        setTitle(response.data.title);
        setUrl(response.data.url);
        setExplanation(response.data.explanation);
      })
      .catch(err => console.log(err));
  }, []);

    if (!url) return <Loading />;
  return (

    // Display component on page
    <div className="App">
      <p>
        {/* {<Loading />} */}
        <PicOfTheDay
        date={date}
        title={title}
        url={url}
        explanation={explanation}
        />
      </p>
    </div>
  );
}

Installation

Clone to your local machine https://github.com/ardissam0/nasa-photo-of-the-day.git

Setup

$ npm i
$ npm start

API Reference

https://api.nasa.gov/planetary/apod?api_key=OYB9iH2UyhXcplnYm1eMwAi6CRMi30yyTEKOpd99

Support

Reach out to me on social media if you have any questions!

ardissam0/nasa-photo-of-the-day