[TIL]231023_input값 콘솔에 출력하기 / filter()

ㅇㅖㅈㅣ·2023년 10월 23일
2

Today I Learned

목록 보기
10/93
post-thumbnail

오픈 API만 가져오면 뭐하나... 다음 스텝으로 나아가질 못하는데 하하ㅎㅏㅏㅏ.............😥

1차 관문

input에 넣은 값 console에 출력


HTML

<form id="searchForm">
     <input type="text" id="inputValue" placeholder="Find Movie!">
     <button id="clickButton">search</button>
</form>

JavaScript

//input에 검색어를 입력
  const searchInput = document.querySelector("#inputValue");
  const searchForm = document.querySelector('#searchForm');
  // console.log(searchButton);

 // form태그 안에서 -> input에 엔터나, 버튼 클릭을 하면 submit 이벤트가 발생함
    const searchMovie = (event) => {
      event.preventDefault()
      let searchText = searchInput.value;
  
        console.log(searchText);
      }

      searchForm.addEventListener("submit", searchMovie);

정말 계속 붙잡고 있다가 팀원분들의 도움으로 겨우 겨우 1차 관문을 넘었다...(감사합니다🫶🏻)


2차 관문

filter를 이용해 input에 해당하는 값만 불러오기

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]

내가 아는 filter() 메소드는 이것인데 이걸 어떻게 적용하면 좋을지 머리싸매는중(ing)



과제 제출이 오늘까지였지만 결국 해결하지 못하고 제출했다.
이번엔 '처음이니까'라는 말로 혼자 위안삼아 보았지만 다음부터는 어떻게든 집요하게 풀어낼 수 있도록 물고 늘어져야 한다!!!!!!!!!!!!!!!!!!!!!!!!!


과제 리뷰영상을 보면서 리팩터링 할 예정인데 놓치지 말아야할 부분은
1. 그냥 흘려넘기는 것이 아닌 무조건 이해
2. 내가 해내지 못한 부분의 코드를 보면서 어떻게 적용시킬 수 있을지 고민
3. 나의 결과물 디벨롭....

👊🏻📚👩🏻‍💻

profile
웰씽킹_나는 경쟁력을 갖춘 FE개발자로 성장할 것이다.

0개의 댓글