How to get data from NASA using NASA API JavaScript

How to get data from NASA using NASA API JavaScript

How to get data from NASA using NASA API JavaScript

Hello HTML lover, In this article we learn how to get data to form NASA. We use API to get data from NASA, and we use HTML, basic CSS code, and JavaScript Code to access Api Data to Show data on our web page.

So we get pictures of the day from NASA API, there’s many NASA API but we use the day of pictures so when we click on the button to get data we get pictures of the day and there’s the description of the image below 👇 you can see a preview of a project

Preview Of Project

How to get data from NASA using NASA API JavaScript
Get data from NASA using NASA API JavaScript

 

So now we going with Our HTML Code For This Project:-

HTML CODE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NASA Meri Jaan</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
</head>

<body>

    <div class="text">
        <h1>Ager Nasa se data lena hai mere bhai <br>
        toh Javascript or Api Key Ko samjna padega na meri jaan>>
        </h1>
        <button class="custom-btn btn-16" id="get">Get Data</button>
    </div>
    <div id="container">
    </div>


    <!-- JS HERE -->
    <script src="app.js"></script>

</body>

</html>

So in this HTML code, we link our CSS File & JavaScript File. In this HTML Code, we create a heading or Button in a div and we create the second div so in the second div we show our text and image. So that’s it for HTML code.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #eee;
}

#container{
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* margin: 10px; */
    padding: 5px;
}

#container{
    text-align: center;
}
h1{
    text-align: center;
}

.text{
    text-align: center;
}

#container img{
    margin-top: 2rem;
    height: 400px;
    width: 500px;
    border-radius: 50px;
}

#container{
    font-family: 'Open Sans', sans-serif;
}


/*  Button */
button {
    margin: 20px;
  }
  .custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }

  .btn-16 {
    border: none;
    color: #000;
  }
  .btn-16:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow:
     -7px -7px 20px 0px #fff9,
     -4px -4px 5px 0px #fff9,
     7px 7px 20px 0px #0002,
     4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
  }
  .btn-16:hover {
    color: #000;
  }
  .btn-16:hover:after {
    left: auto;
    right: 0;
    width: 100%;
  }
  .btn-16:active {
    top: 2px;
  }

This is our small CSS code for NASA Api Project. We style our body tag and give background color. After that, we style our container div and hope you remember container div that’s blank in HTML code so we style so when we get our data through API we use this container. After we use basic CSS styling to align our content.

And we use lots of code for our buttons so this is optional Code for this project you can use simple button code. So that’s the CSS code for our NASA Project.

JavaScript Code

let serachButton = document.querySelector("#get");

serachButton.addEventListener("click", () => {
  sendApiRequest();
});

async function sendApiRequest() {
  let API_KEY = "How to get api key form official nada website👇Check below";
  let response = await fetch(
    `https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`
  );
  let data = await response.json();
  useApiData(data);
}

function useApiData(data) {
  document.querySelector("#container").innerHTML = data.explanation;
  document.querySelector("#container").innerHTML += `<img src = "${data.url}">`;
}



So this is JavaScript Code it’s the most important part of this project. Before we going to explain this Code we learn how to create API key form NASA’s Official website.

Ecommerce Website Using Html Css And Javascript Source Code

Step – 1

How to get data from NASA using NASA API JavaScript

Click Here For Nasa Website

Step 1 is very easy 😎, you just click this link and go to NASA’s official website.

Step – 2

How to get data from NASA using NASA API JavaScript

When you visit this website there’s a Menu(navbar) so you can a button Generate an API key 🔑 So you can click on this or this page give scroll and you see this interface 👇.
Ps – if you scroll on the home page you can also see this interface

How to get data from NASA using NASA API JavaScript

Step-4

When you see this page you see a small form with your first name, last name, and email id, how will you use this apis so don’t be afraid this is optional you can fill in these 3 input fields to get api 🔑KEY.

So when you click on sign up, there you can see API Key in big font so copy it and paste it into our project where we write api key. Also when you click on sign up you get an email from NASA that your API key is ___.
So after following these steps our NASA Project is Ready To Run.

Javascript Code Explain – 

So 1st we access this button in our JavaScript code so we use in our project. After that we use addeventlistner to the button so when someone click on button , sendapirequest function run. So after this code we create this function so we define api key and what data we want url. And get data form NASA in useapidata function. So we create a more function useApiData and in container div we add data.explanation thats our image explanation and after that we create img tag in container div and give data.url . That’s it our JavaScript Code❤.

Final Output

Thanks for reading this article. If you face any problem in this project you can do comment below or contact us by Fill contact form ❤.

Written by – CodewithRandom (Anki)



Leave a Reply