내 식료품 목록 및 식사 아이디어 앱: LISTLESS

반응형

이 앱을 만든 저의 목표는 제가 일상에서 겪는 두 가지 문제를 해결하는 것이었습니다: 저녁 식사를 위해 무엇을 만들어야 할지 고민하는 것과 물건을 잊어버려서 코너로 돌아갈 필요가 없도록 제 식료품 쇼핑 목록을 정리하는 것이었습니다.

HTML 파일이 한 개 있는 앱을 만드는 일이었지만, 저는 리스트 기능과 식사 아이디어 생성기가 다른 페이지에 분리되기를 원했습니다. 이를 위해 앱의 "홈 페이지" 역할을 하는 메인 디브 하나를 만든 다음 홈 페이지, 목록 기능 및 식사 아이디어 생성기의 "링크" 역할을 하는 세 개의 링크를 탐색 모음에 만들었습니다.

목록 기능이나 음식 아이디어의 이벤트 수신기가 클릭으로 트리거되면 메인 div의 내부 HTML이 빈 문자열로 설정된 다음 새 코드가 DOM에 렌더링됩니다. 이렇게 하면 응용프로그램은 둘 이상의 페이지인 것처럼 나타납니다.

홈 페이지로 돌아가려면 메인 div가 다시 지워진 다음 홈 페이지의 내용이 다시 로드됩니다.

 

"식사 아이디어"를 클릭하면 메인 div가 재설정되고 제목과 버튼이 DOM에 로드됩니다.

"여기 클릭"을 클릭하면 이벤트 수신기가 트리거되어 내 JSON 데이터베이스에 대한 가져오기 요청을 실행합니다.

 

가져오기 요청이 데이터베이스에서 임의의 음식 값을 반환하기 위해 0과 1 사이의 "의사 난수"(1은 포함하지 않음)를 반환하는 Math.random()을 사용했습니다. 그런 다음 이 숫자에 서버에 있는 항목 수(현재 6개)를 곱한 다음 Math.seil()을 사용하여 반올림합니다. 저는 다운 대신 반올림해서 반환 가능한 최저 숫자가 1이 되도록 합니다.

랜덤 번호가 생성되면, 저는 그 랜덤 번호를 내 데이터베이스의 URL 끝에 연결하고 가져오기 요청을 시작합니다. 응답은 JSON으로 스트링된 다음 내 loadRandomMeal로 전달됩니다. 이 loadRandomMeal은 임의의 식사의 사진, 이름 및 링크가 포함된 카드를 만듭니다. 만약 식사 아이디어가 마음에 들지 않는다면, 버튼의 문자는 행운을 다시 시도하도록 당신을 초대합니다. 만약 당신이 식사 아이디어가 마음에 든다면, 당신은 새로운 탭에서 당신을 위해 레시피를 클릭할 수 있다.

이 프로젝트는 만드는 것이 너무 재미있었고, 저는 그것을 개선하고 아름답게 만드는 기술을 더 쌓고 싶습니다.

읽어주셔서 감사합니다.