TIL 10일차 (영화 검색시 결과 값 나오게하기)

오늘의 결과값

오늘은 영화를 검색할 경우 해당 영화 카드가 나오는 시스템을 제작하였다.

function findCard() {

  let name = document.getElementById('moviefind').value;

  name = name.toLowerCase();

  //데이터 없이 입력했을 경우

  if (name === ' ') {

    for (let i = 0; i < targetdata.length; i++) {

      document.querySelector('.movie-card').remove();

    }

    targetdata = null;

    targetdata = obj;

    makeCard();

  }

  else {

    let foundname = obj.filter(item => item.title.toLowerCase().includes(name));

    for (let j = 0; j < targetdata.length; j++) {

      document.querySelector('.movie-card').remove();

    }

    if (foundname === null) {

      targetdata = null;

      targetdata = obj;

    }

    else {

      targetdata = ' ';

      targetdata = foundname;

      makeCard();

    }

  }

}

위와 같이 findCard라는 함수를 이용하여서 코드를 짰다. moviefind라는 html에서의 Input창에서의 ID값의 밸류값 즉 입력값을 name이란 변수에 넣어주고 대문자, 소문자를 모두 동일하게 구현하기 위해서 name.toLowerCase()함수를 이용하여서 모두 소문자로 바꿔주었다.

전에는 전역변수 obj 데이터 값 하나만 구현하여 카드를 제작하였지만, 이제는 검색하였을 경우 데이터 값을 찾고, 해당하는 정보를 카드로 띄워주어야 하기때문에 따로 targetdata라는 변수를 만들어서 평소에는 targetdata에 전역변수 데이터 값 obj를 넣어서 사용해주다가, 띄워주고 moviefind 값이 obj 즉 전역변수 데이터와 일치하는 경우 targetdata의 정보를 비우고 해당하는 데이터 값만 targetdata에 넣고 makeCard() 즉 카드를 만드는 함수를 호출하여서 해당하는 카드만 호출하게끔 제작 하였다. 그러면 위의 결과물과 같이 검색한 결과 값 데이터만 가져올 수 있다.

그리고 다음은 추가 요구사항 부분인 엔터키로 검색하는 시스템과 카드를 클릭하였을 경우 해당하는 ID값이 나오는 것과 홈페이지를 시작했을 경우 Input 창에 자동으로 커서가 켜져있게끔 하는 시스템을 제작하였다.

우선 엔터누르는 효과가 나오게 하기 위해 따로 clickenter()라는 함수를 제작하였다.

function clickenter() {

  //keycode 13은 enter key임

  if (window.event.keyCode == 13) {

    //버튼의 아이디를 가져와 해당 버튼을 클릭한 것과 같은 효과

    document.getElementById("button-addon2").onclick();

  }

}

아래와 같은 함수를 제작하였는데 해당하는 내용은 함수가 실행될 때 KeyCode == 13 즉 Enter Key를 누를 경우 문서에서 가져온 ID 버튼을 클릭한것과 같은 효과를 낸다라는 뜻의 함수이다.

위의 함수를 

        <input type="text" class="form-control" placeholder="검색할 영화를 입력하세요" aria-label="Recipient's username"

            aria-describedby="button-addon2" id="moviefind" onkeyup="clickenter()">

HTML에서 사용한 Input창에 집어넣어주면서 onkeyup = 키보드를 땠을 때 함수를 실행 시켜준다고 설정하면, input창에서enter키를 누를시 버튼을 누른 것과 같은 효과가 나오게끔 설계하였다와 동일한 기능을 만들었다.

 

다음은 자동으로 Input창의 커서가 켜지도록 하는 시스템이다. 이 시스템은 검색한 결과 코드 한줄로 실행 할 수 있었다.

document.getElementById("moviefind").focus();

이 코드 한줄을 Js 파일에 추가해주는 것으로 작동 되었는데 해석하자면 문서의 해당하는 moviefind라는 ID를 가진 것의 focus()함수를 실행하겠다 라는 뜻이다. 이 함수를 실행하면 moviefind의 id를 가진 Input창의 커서가 실행했을 때 자동으로 켜져있는 것을 확인할 수 있다.

 

다음은 클릭했을 때 alert창으로 Id를 띄워주는 것을 제작하였는데, 처음에는 검색해서 찾아온 결과인 

let btn = document.querySelector('.movie-card');

btn.addEventListener('click', function() {

  alert("클릭");

});

addEventListener로 click의 효과를 구현하려 하였지만, 우리가 짠 코드는 js내에서 자체적으로 html파일을 만든 것이기 때문에 js내의 html파일을 click이벤트로 구현할 수 없어서 

  targetdata.forEach(element => {

    document.querySelector('.row').innerHTML += `

            <div class="movie-card" id="${element.id}" onclick="alert('영화 ID: ${element.id}')"">

                <div class="card">

                    <img src=${`https://image.tmdb.org/t/p/w400` + element.backdrop_path} class="card-img-top" art="...">

                    <div class="card-body">

                        <h4 class="card-title" id="card-title">${element.title}</h4>

                        <p class="card-text">${element.overview}</p>

                        <p class="card-text"><small class="text-body-secondary">${`Rating : ` + element.vote_average}</small></p>

                    </div>

                </div>

            </div>

  `

  })

위의 movie-card가 클래스로 있는 부분을 추가해 자체 html안에서 onclick함수를 이용하여 클릭시 alert 영화 ID가 나오도록 구현하였다.

그렇게해서 결과적으로 개인과제에서 구현하라고 한 부분은 다 구현하였고, 남은 시간동안은 꾸미기를 조금하고, 사이드바를 제작하는 식으로 해서 추가하고 싶은 부분을 더 추가해서 웹사이트를 이쁘게 꾸며볼 것이다.

오늘 한 구현부분도 잘 구현되어서 기분좋게 구현한 것 같다.