[생능북스] GOAT 시리즈 자바스크립트 (응용)

 
생능북스의 GOAT 시리즈 자바스크립트 도서를 통해 공부한 내용을 적용할 수 있는 간단한 단어장을 만들어 검색 기능을 구현해 보았다.

이런 짧은 코드이고, 검색창에 내가 미리 작성해 둔 영단어 혹은 한글 뜻을 입력하면 화면에 해당 단어 카드만 보이도록 한다.

예를 들어 단어가 apple이라면 ap까지만 입력해도 검색이 가능하다.

검색 아이콘이나 엔터를 누르는 경우 검색이 가능하며, 단어를 지우고 다시 검색 아이콘이나 엔터를 눌러 전체 단어 카드를 확인할 수 있다
 
 
반응형 레이아웃

@media (max-width: 768px) { 
    .word-card { 
        width: calc(50% - 10px); 
    } 
} 

@media (max-width: 480px) { 
    .word-card { 
        width: calc(100% - 10px); 
    } 
}

반응형으로 만들었기 때문에 화면이 작아지면 하나의 열에 단어 카드가 2개씩 보인다.

 
자바스크립트의 문법을 공부하고 동작 원리를 알아가며 코드를 작성하는 것이 재미있게 느껴진다. 이 도서를 통해 자바스크립트에 흥미를 붙일 수 있고 기술 스택 또한 얻어가는 느낌이다. 자바스크립트 입문자에게 추천한다.

 
저자 깃허브 : https://github.com/kwakmoonki/booksr/