TV 프로그램 API 응용

const form = document.querySelector('#searchForm');


form.addEventListener('submit', async (evt) => { // api를 불러올때 실패할 수 있으니 async를 사용
    evt.preventDefault(); // submit의 기본 이벤트를 막아준다.
    const searchTerm = form.elements.query.value; //  form 변수의 속성중 이름이 query인 value값을 변수로 사용
    const config = { params: { q: searchTerm } }; // ?q=searchTerm과 같은 의미 (params 을 써야함)
    const res = await axios.get(`https://api.tvmaze.com/search/shows`, config); // async니까 await 반드시 사용 axios로 해당 api를 get한다.
    console.log(res); // resolve시의 console.log
    if (!document.getElementsByClassName('imgs').length > 0) {
        makeImages(res.data);
    } else {
        removeImgs();
        makeImages(res.data);
    }
})

const makeImages = (shows) => {
    for (result of shows) { // 위에서 shows에 res.data를 넣어서 res.data의 배열들이 result로 정렬된다.
        if (result.show.image) { // 정렬된 res.data.show.image가 true일 경우 
            const img = document.createElement("IMG"); // img 속성 만듬
            img.classList.add('imgs');
            img.src = result.show.image.medium; // img의 소스
            document.body.append(img); // body에 img 추가 
        }
    }
}

const removeImgs = () => {
    const removeTime = document.getElementsByClassName('imgs').length;
    // 해당 코드를 for 안에 넣으면 지워질때마다 length의 수가 줄어서 전부 삭제가 안되고 
    // 몇개씩 남는다. 그래서 횟수를 미리 정하고 반복문을 사용한다.
    for (let i = 0; i < removeTime; i++) {
        document.querySelector('.imgs').remove(); // All을 사용하면 삭제가 안됨 하나씩 삭제해아함
    }
}