팀 과제(영화 사이트) (6) 썸네일형 리스트형 [내일배움캠프] 노드몬 팀 과제 영화사이트 제작 결과물 사이트 메인 사이트 정렬기능(ABC순/평점순/카테고리) 상세사이트 상세사이트 댓글 CRUD [내일배움캠프] 노드몬 팀 과제 영화사이트 제작-4- 삭제기능 function Delete(a) { //로컬스토리지의 아이디와 비밀번호 데이터를 받을 배열을 만듬// let list = []; let visitId = prompt("아이디를 입력하세요"); let visitPw = prompt("비밀번호를 입력하세요"); //반복문과 push의 조합을 사용함. 로컬스토리지는 문자열만 들어가기 때문에 객체화JSON.parse룰 해줌// for (var i = 0; i < localStorage.length; i++) { if (localStorage.key(i).indexOf(arr) != -1) { list.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); }; }; console.log(list).. [내일배움캠프] 노드몬 팀 과제 영화사이트 제작-3- 저장기능 function load() { //로컬스토리지의 데이터를 받을 배열// let list = [] //상세페이지의 아이디와 같은 데이터만 뽑음// for (var i = 0; i `${list.userid} ${list.comment} 수정 삭제 ` .. [내일배움캠프] 노드몬 팀 과제 영화사이트 제작-2- 팀 사정상 댓글기능 구현 또한 내가 맡게 되었다. 댓글 저장 기능 작성 먼저 댓글을 작성하기 위한 댓글 닉네임과 비밀번호, 그리고 코멘트 부분의 뼈대를 만들었다. 그리고 아이디, 비밀번호, 코멘트의 글자수를 maxlength / oninput='handleOnInput(this, 8)로 제한했다. const nickName = document.getElementById('nickName'); const password = document.getElementById('password'); const comment = document.getElementById('comment'); 닉네임과 비밀번호, 코멘트를 getElementById 로 받아온다. function save() { if (!nickName... [내일배움캠프] 노드몬 팀 과제 영화사이트 제작-1- 작업파일 나누기 각자가 작업하는 부분을 js파일과 css파일로 나누어서 작업했다. src기능을 사용해서 따로 떨어져있는 파일이 html에 적용되도록 했다. 상세페이지 이동 function select(id) { alert(`영화 id: ${id}`); (window.location.href = "detail.html?" + id); } 기존의 alert 함수에 상세페이지로 가는 명령어를 추가했다. const url = window.location.search const arr = url.slice(1, url.length); url에 있는 id를 arr에 지정했다. 상세페이지 정보 function detailload() { fetch( "https://api.themoviedb.org/3/movie/to.. [내일배움캠프] 노드몬 팀 과제 영화사이트 제작 과제 개요 ●개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시킨 팀 프로젝트 ●팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전 (내가 만든 과제가 대표로 선택되었다.) 요구사항 ●TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용) ●영화정보 상세 페이지 구현 ▷기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다. ●상세 페이지 영화 리뷰 작성 기능 구현 ▷기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다. ▷상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다 ▷작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다. ▷작성한 정보는 브라우저의 localSt.. 이전 1 다음
