Javascript Project 5 . 요리검색
요리를 검색할 수 있는 페이지
사용자가 요리를 검색하면, 관련 요리들이 리스트업된다.
랜덤버튼을 통해 자동으로 요리를 보여준다.
CSS
- 검색정렬 grid를 이용
- repeat을 통해 갯수,너비를 조정, grid-gap으로 간격조정
- 해당 요리사진에 마우스를 대면 요리정보가 가운데 위치
- 해당 요리사진을 클릭하면 목록하단에 상세내역이 펼쳐진다.
- @media와 gird를 이용해 반응형적용
JS
- const를 처음 선언하고 콤마로 한번에 처리.
- fetch()함수로 API호출
- join으로 배열연결해서 항목 한꺼번에 출력
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join
'* > Project' 카테고리의 다른 글
| Team Project : DB연동/left join/ select option값 불러오기/ 코드분리 (0) | 2021.05.24 |
|---|---|
| Javascript Project 6. 탁구점수판 (0) | 2021.05.15 |
| Team Project : 오타 /getParameter 파싱오류 / id값 전달/ 동일한 클래스선택 (0) | 2021.05.12 |
| Team Project : 개별id값불러오기/hidden input태그 (0) | 2021.05.07 |
| Javascript Project 4 . 비디오 플레이어 (0) | 2021.05.02 |
| Javascript Project 3 . 영화관 좌석 예약 (0) | 2021.05.01 |
| Javascript Project 2 . 슬라이드 네비게이션 & 팝업 (0) | 2021.04.29 |
| Javascript Project 1 . 회원가입양식 및 유효성검사 (1) | 2021.04.29 |