비전공자 개발일기

Javascript axios - search 본문

Javascript

Javascript axios - search

HiroDaegu 2021. 9. 18. 17:16
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>Tv Show Search</title>
    <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>TV Show Search</h1>
    <form id="searchForm">
      <input type="text" placeholder="TV show Title" name="query"><br>
      <button>Search</button>
    </form>
  </body>
</html>

 

const form = document.querySelector("#searchForm")
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const searchTerm = form.elements.query.value;
  const res = await axios.get(`https://api.tvmaze.com/search/shows?q=${searchTerm}`);
  // console.log(res.data[0].show.image.medium);
  makeImages(res.data);
  form.elements.query.value = "";
})

const makeImages = (shows) => {
  for(let result of shows) {
    if(result.show.image) {
      const img = document.createElement("IMG");
      img.src = result.show.image.medium;
      document.body.append(img);
    }
  }
}

 

 

728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - 3D Page  (0) 2021.09.21
Javascript - Calculator  (0) 2021.09.19
Javascript forEach, map, filter, some, every, reduce  (0) 2021.09.15
Javascript Simple update  (0) 2021.09.11
Javascript Clock  (0) 2021.09.10
'Javascript' Related Articles more