비전공자 개발일기

NASA APIs 본문

Javascript

NASA APIs

HiroDaegu 2022. 10. 19. 18:33
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
  <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 DATA</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"
    />
    <script defer src="main.js"></script>
  </head>

  <body>
    <div class="text">
      <h1>NASA API</h1>
      <button class="custom-btn btn-16" id="get">Get Data</button>
    </div>
    <div id="container"></div>

  </body>
</html>
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;
}
let serachButton = document.querySelector("#get");

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

async function sendApiRequest() {
  let API_KEY = "UR KEY";
  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}">`;
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Parallax Tilt Effect Cards  (0) 2022.10.29
TIP CAlculator  (0) 2022.10.23
Netflix Landing Screen  (0) 2022.10.17
2048 GAME  (0) 2022.10.11
Cat Game  (0) 2022.10.10
'Javascript' Related Articles more