*/Project
Javascript Project 5 . 요리검색
haileykim2014
2021. 5. 5. 23:17
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