Skip to content

APOD: Astronomy Picture of the Day, NASA API interface with HTML, CSS and JS

Notifications You must be signed in to change notification settings

IvanMarte2403/astronomical-app-using-NASA-API

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How to Use? 🧑‍🚀

In the middle of the page you can see a white block, you can modify the date with the extern calendar or write manually

Is very important

Only write dates between 2000 and today, because the API don´t have information on those dates. When you modify the date, the image, copyright, and text change image

About The API

The NASA API´s is free 💸. But is necessary a key for use, you can request one in Nasa webSite in Get Started, complete the form, and the key will be send to your email.

image

🔨 All have diferent Key Api So if my code don´t run in your laptop maybe is because the key expired, but only need enter in Nasa WebSite and request a new one. Replace the new key in this environment 🔑queryKey in script.js .

image

The Astronomy Picture Day this website of nasa is on the most popular website, it has the populas appeal of a Justin Bieber video. This endpoint structures the APOD imagery and associated metadata so that it can be repurposed for other applications. In additio, if the concept_tags parameter is set to TRUE, then keyword derived from the image explanation are returned.

The Query Parameters

image

https://api.nasa.gov/

Code

Only 4 documents are important in the code 💻 the other are part of a library similar to bootstrap. If you download bootstrap in the App will be run perfect to. This documents is important for you if you want modify.

  1. index.html
  2. style.css
  3. parallax.js
  4. script.js

Design 🖌️

I modify the vectors in photoshop to create a only attractive application and modify manualy the with

Architecture

The architecture made easier because i use a library similar to boostrap, making rows and cols to build the app. In some parte i implement flex-box to organize, but boostrap also includes it.

Parallax and Animations 🌑

I love the animation of the moon is pure css, the challenge did the creaters and the little satelite animation´s. The parallax only read the value of windows scroll, and move all the images, the second work are the desing in Photoshop

image

About

APOD: Astronomy Picture of the Day, NASA API interface with HTML, CSS and JS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages