const $keyword = document.querySelector(".keyword");
const $keywords = document.querySelector(".keywords");
const $searchResults = document.querySelector(".search-results");
const $noResult = document.getElementById("noResult");
const $noValue = document.getElementById("noValue");
const $result = document.querySelector(".result");
const $resultName = document.getElementsByName('resultName');
const $body = document.querySelector('body');
const controller = new AbortController();
function searchImg(value){
loading('start');
fetch(
`https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/search?q=${value}`
)
.then((res) => res.json())
.then((results) => {
loading('finish');
if (results.data) {
if(results.data.length==0){
$noResult.style.display="block";
$searchResults.innerHTML = "";
}
else{
console.log(results.data)
$result.innerHTML = "";
$noResult.style.display="none";
$searchResults.innerHTML = results.data
.map((cat) => `<article><img src="${cat.url}" /></article>`)
.join("");
}
}
});
}
function loading(state){
if(state=="start"){
document.getElementById('loadingImage').style.display='block';
}
else{
document.getElementById('loadingImage').style.display='none';
}
}
$body.addEventListener('click', function(e){
var target = e.target;
if(target == e.currentTarget.querySelector(".result") ){
return ;
}
$result.innerHTML = "";
});
$keyword.addEventListener("keyup", (e) => {
controller.abort(); //요청 취소
const { value } = e.target;
const { key } = e;
if (value === "") {
$noValue.style.display="block";
return;
}
if (key === "Enter") {
$noValue.style.display="none";
searchImg(value);
}
else if(e.keyCode == 27){
$noValue.style.display="none";
$result.innerHTML = "";
console.log("esc")
return;
}
else { //추천 검색어
$noValue.style.display="none";
loading('start');
fetch(
`https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/keywords?q=${value}`
)
.then((res) => res.json())
.then((results) => {
loading('finish');
$result.innerHTML = "";
let dynamicHTML = "";
for(let i = 0; i<results.length; i++){
dynamicHTML += '<div><span class="resultName name="resultName" id="result_'+i+'">'+results[i]+'</span></div>'
}
$result.innerHTML += dynamicHTML;
for(let i = 0; i<results.length; i++){
document.getElementById('result_'+i).addEventListener('click',function(e){
document.getElementById('result_'+i).style.backgroundColor="lightgrey";
$keyword.value=document.getElementById('result_'+i).innerText;
searchImg(value);
})
}
});
}
});
개발자로 입사 후 첫 코딩테스트
아직 부족한 점이 많고 공부할 것도 많다는 걸 느꼈다.
기본기부터 다시 다져야겠다는 생각이 많이 든 코딩테스트
