one Book a Day

Type Ahead input form Filter for a city or a state form 태그로 검색창을 만듭니다. 자동완성을 구현할 것임. filter로 DB에 있는 모든 검색어 중 일치하는 prefix를 가진 모든 문자열을 나열. cities DB const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then((blob) => blob.json()) .then((data) => cities.push(...data)); fetch로..

Image_Gallary script 각 panel들을 가져와 각각에 click event 나 transition 이벤트가 끝났을 떄 특정한 함수를 실행시켜 class를 부여, 선택자를 동적으로 선택할 생각입니다. css /* Flex Children */ .panel > * { margin: 0; width: 100%; transition: transform 0.5s; /* border: 1px solid red; */ flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panel > *:first-child { transform: translateY(-100%); } .panel.open-active > *:f..

CSS 변수 제어하기. 어떤 속성값을 제어할 것이냐? name에 부여한 style의 spacing과 blur속성을 제어한다. this 키워드 동작을 나타내는 메서드는 객체의 state 즉 property를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.(객체 내부의 메서드가 객체를 참조할 수 있어야 제어가 가능) this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this를 통해 자신이 속한 객체 똔느 생성할 인스턴스의 프로퍼티나 메서드를 참조. this는 함수가 실행됨과 동시에 함수내부에 선언됨 객체 내 메서드에서만 의미를 가지지 일반 함수에서는 undefined..