어제 새벽에 잠시 작업을 한뒤에 다음날 아침에 정리를 하는 글이다.

이번에 한 작업은 특정 음식을 검색을 하게 되면 해당하는 값들이 나열되게 하였다.

코드가 너무 읽기가 힘들어 보여서 위치랑을 좀 조절을 해서 한번 정리한다는 느낌으로 js를 나열해 보겠다!!

• js만 정리를 하겠다.
• css부분도 조금 동적으로 손봤는데 후에 다루겠다!!

이전에 한 작업 정리

API

기본적으로 내가 원하는 값들을 가져 오는 함수 들이다.

각 함수의 이름에 맞게 랜덤 또는 id값, 이름 등에 맞는 값들을 가져오며

getRandomMeal : 랜덤한 음식을 가져와 화면에 보이는 역할

getMealById : 랜덤한 음식중 좋아요를 누르면 favorite에 추가되는 역할

getMealsBySearch : 용어에 맞는 음식을 검색하는 역할

이렇게 담당하고 있다.

로컬 저장소

좋아요를 누르면 로컬 저장소에 값이 저장 또는 삭제되는 역할을 하는 함수이다.

처음에는 값이 없기 떄문에 getMeals 함수의 return은 null이 되게 된다.

• null값이 Return 되면 다른곳에서 오류를 발생하기 떄문에 빈배열을 넣어주었다.

함수가 작동하는 코드를 보면 모두 id값을 받아서 작동 하는 것을 알수가 있다.

• 이부분은 앞서 말한 getMealById 이 함수에서 값을 받아서 사용한다.

좋아요 누르면 추가 되는 함수

Dom을 통해서 html을 조작하고 있다.

일단 기본적으로 getRandomMeal 의 return값을 받아서 활용을 하고 있다.

이떄 좋아요 버튼을 이곳에 구현을 해놓았고 버튼이 클릭되면 class를 추가하고 로컬 저장소에 update하는 역할을 한다.

• 반대는 반대의 역할을 한다.

이후 fethFavMeals()를 호출하게 된다.

• 버튼을 누를떄마다

favorite에 추가

일단 기본적으로 공간을 한번 비워주엇다

• 동적으로 작동을 하기 위해서

버튼을 누르게 되면 로컬저장소에 값이 저장되고 그 값을 일단 가져오게 된다.

• 한개만 있다면 배열에 담을 필요가 없지만 여러개를 나열하기 때문에 배열에 담아주게 된다.

이후 그 배열에 있는 값을 하나하나 addMealToFav에 보내주게 된다.

addMealToFav 에서는 DOM작업을 하고 있다.

마찬가지로 들어오는 값을 html로 표현을 해주고 있으며
btn은 삭제 버튼이다.

삭제를 누르게 되면 로컬 저장소에 있는 값을 삭제한뒤에
fethFavMeals()를 다시 호출해 준다.

• 이 부분도 동적으로 작동을 하기 위해서 호출해 주는 부분이다.
• 내가 동적으로 작동한다는 느낌은 삭제 또는 추가를 한뒤에는 새로고침을 하지 않으면 내가 한 작동이 먹지를 않는다...
• 그러기 떄문에 다시 함수를 호출함으로써 값을 새로 나열하는 것이다.

추가로 한 작업

검색 기능

검색을 하였을떄 보이는 부분이다.

일단 검색을 하면 동적으로 작동하기 위해서

• 랜덤한 음식이 한개씩 나오는 부분을 한번 비워준다.

그뒤 검색을 한 값을 받아오고

그 값을 뿌려주면 되는 것이다.

• addMeal 함수는 뿌려주는 역할을 한다.
• 나는 직접 검색한 정보를 뿌리기 떄문에 정보에 맞는 음식이 뿌려진다.

만약 해당하는 음식이 없다면 alert가 작동을 하게 된다.

그후 검색하는 input을 다시 비워주는
searchTerm.value = ""를 실행한다.

다음에 할 작업

이제 얼추 작업은 다 끝나간다.

마지막으로 할 작업은 레시피를 보여주는 방법이다.

이부분은 나는 처음해보는 작업이라서 아마 영상을 보고 그대로 따라 해볼 것이다.

• 기존에 했던 작업은 내가 일단 해보고 안되면 영상을 참고하는 식이였는데
• 이부분에 대한 지식은 너무 전무해서.. 클론코딩식으로 따라가볼 것이다.

거의다 끝낫따~~~