비전공자 개발일기

Javascript - search 본문

Javascript

Javascript - search

HiroDaegu 2021. 11. 3. 00:20
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>
body {
  text-align: center;
}

img {
  margin: 10px;
}
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' 카테고리의 다른 글

swal() - 예쁜 알림창  (0) 2021.12.17
Javascript - Update CSS  (0) 2021.11.04
Javascript - list  (0) 2021.11.02
Javascript - lightBox  (0) 2021.11.01
Javascript - Calendar2  (0) 2021.10.31
'Javascript' Related Articles more