[JavaScript] [레시피 상세보기 페이지] 재료 계산기 이번 포스팅은 레시피 상세보기 페이지에서의 재료 계산기 JavaScript입니다. 재료 계산기의 대략적인 UI는 다음과 같습니다. 1. 필수 재료 조회되는 구문 먼저 필수 재료와 부가 재료가 담길 배열을 생성해줍니다. 반복문을 이용해 필수 재료의 재료명, 재료의 양, 단위를 출력해줍니다. 이때 기본적으로 재료의 양은 레시피 작성자가 입력한 재료의 양/ 작성자가 입력한 인원수로 나누어 1인분의 양이 가장 먼저 보이게끔 했습니다. 반복문 안에 script 구문을 사용해서 JavaScript에서 배열을 추가하는 함수인 push를 이용해 ingArr 배열에 담아줍니다. 다음과 같이 배열의 끝에 각 재료별 1인분의 양이 담겼습니다. 준비해주세요는 필수 재료, 있으면 좋아요는 부가 재료의 개념이지만, 해당 레시피에.. [JavaScript] [요리 후기]이미지 영역 클릭시 파일 등록하기 | 첨부파일 미리보기 | * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 작성 기능에서 사용한 JavaScript입니다. 추가적으로 업데이트할 예정입니다. 요리 후기 작성 기능은 하단의 포스팅 참고해주시면 감사하겠습니다. [요리 후기 작성] 요리 후기 작성 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 작 seongeun-it.tistory.com 이미지 영역 클릭시 파일 등록하기 첨부파일 미리보기 1. 이미지 영역 클릭 시 파일 등록하기 대략적인 UI.. [JavaScript] 사용자가 입력한 문자열을 배열에서 삭제하기 문제점 사용자가 입력한 문자열을 배열에서 삭제할 수 없다. 나의 코드 더보기 나의 로직 1. 추가 : 배열실습문제3번처럼 push()를 활용하여 추가하면 될 것 같다 1.1 배열을 선언한다 1.2 input 요소 객체를 담을 변수를 셋팅하고 1.2 그 배열에 push()를 사용해서 값들을 담는다. 2. 삭제 : ? : indexOf로 담긴 값들의 인덱스를 몇 번째 인덱스인지 구한다 ? : 그 값들을 splice(시작,제거)로 삭제한다 ? : 조건식을 이용해서 '당근'과 일치하는 인덱스를 삭제한다. => if문으로 먼저 조건검사를 한 뒤에 반복문으로 사용자가 입력한 값과, 배열의 값을 비교해보자. 코드 리모델링 기존 코드 *script단 var data = ["피자","치킨","당근","햄버거","떡볶이".. 이전 1 다음
