반응형
Notice
Recent Posts
Recent Comments
Link
taenyLog
API이용하여 프로그램 검색 앱 본문
반응형
단어를 검색하면 해당 티비쇼들이 보여진다.
TV API | TVmaze - Add TV information to your website or app.
We provide a free, fast and clean REST API that's easy to use, returns JSON and conforms to the HATEOAS and HAL principles. The root url is https://api.tvmaze.com and the available endpoints are documented below. If you have any questions or suggestions re
www.tvmaze.com
위 사이트의 API 이용.
index.html
<!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>TV Show Search</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>TV Show Search</h1>
<form id="searchForm" >
<input type="text" placeholder="TV Show Title" name="query">
<button>Search</button>
</form>
<script src="app.js"></script>
</body>
</html>
app.js
const form = document.querySelector("#searchForm");
form.addEventListener("submit", async function (e) {
e.preventDefault();
const searchTerm = form.elements.query.value;
const config = {params:{q:searchTerm}}
const res = await axios.get(`https://api.tvmaze.com/search/shows`,config);
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);
}
}
}
반응형
'Web' 카테고리의 다른 글
| JavaScript 객체 복사 (0) | 2023.06.15 |
|---|---|
| JavaScript - Prototype (1) | 2023.06.15 |
| 서버에게 GET요청 (0) | 2023.06.14 |
| FETCH (0) | 2023.06.14 |
| Query Strings / HTTP HEADER (0) | 2023.06.14 |
'Web' Related Articles
more
