FruitFinder 제작

- 깃허브 주소

GitHub - canoe726/FruitFinder: FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지

 

 

1. 소개

 

FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지

 

- 웹 프론트엔드 실력 향상 토이 프로젝트

 

 

2. 개요

 

1) 사용언어 : HTML, CSS, JavaScript(Vanilla)

 

2) API : Web Storage API 를 사용하여 화면 스킨, 입력한 검색어 저장
* Web Storage API 를 지원하지 않는 브라우저 사용 시 동작하지 않음

 

 

3. 사용법

1) 실행 : 모든 파일을 로컬에 저장 -> 웹 브라우저를 통한 실행
2) 환경 : 구글 크롬에서 사용 권장 (반응형 UI)

 

 

4. 구현 된 화면

 

1) 스킨 변경

 

2) 모달창 이벤트

 

 

3) apple 검색 결과

 

 

4) 검색한 결과가 존재하지 않음 (404 Not Found)

 

 

5) 검색한 키워드 모두 제거 (단일 제거도 가능)

 

 

6) 무한 스크롤 (Lazy Loading)

 

 

7) 모바일 화면

 

 

※ 1) ~ 7) 기능 구현 포스팅 예정