목록전체 글 (46)
훈돌라
한 줄 정리 : 최신 영화 리스트와 각 영화의 상세정보, 리뷰 등을 확인하고 작성할 수 있는 웹사이트내용메인페이지메인페이지 반응형@media screen으로 화면의 단위를 3개로 나눔1300px 이상 : 영화카드 4개 보임1000px 이상 : 영화카드 3개 보임700px 이상 : 영화카드 2개 보임그 이하 : 영화 카드 1개 보임영화 검색addEventListener를 input으로 설정하여 입력 이벤트를 실시간으로 반영하여 검색결과 보여줌.영화 카드카드를 마우스 hover하면 영화 줄거리를 보여줌카드를 클릭하면 해당 영화의 상세 페이지로 이동..상세페이지 (영화 설명)헤더바 : 메인페이지로 돌아가는 홈버튼과 라이트/다크 모드로 바꿀 수 있는 버튼이 있음영화 정보영화 제목, 런타임, 개봉일, 장르, 평점..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cDpsHT/btsHe3nonqT/BQjCxjkVyIf7kwOLldQqBK/img.png)
저번 글에 이어서오늘은 팀원분이 완성해두신 상세페이지 -> 리뷰 작성 기능에 유효성 검사를 추가해보려고 한다. 우선 어떤 식으로 유효성 검사를 구현할지 먼저 생각을 좀 해봤다. 1. 댓글 텍스트 수2. 캡스락 keyup 여부3. 한/영 여부인데, 사실 한/영 여부는 불필요하다고 생각했고, 댓글 텍스트 수도 실제로는 제한이 없기 때문에 2. 캡스락 keyup 여부를 구현하기로 했다. const usernameInput = document.getElementById("username"); usernameInput.addEventListener("keyup", function (event) { if (event.getModifierState("CapsLock")) { // CapsLoc..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bl8IKl/btsHcbLMUZF/Oibx0h1U7uBYSkA5x3Y1A1/img.png)
검색창 인풋 유효성 검사의 다른 버젼! HTMLinput type="text" id="searchBar">p id="warningMessage" style="display: none; color: red;">영문은 지원하지 않습니다, 한글을 입력해주세요p> JSconst searchInput = document.getElementById("searchBar");const warningMessage = document.getElementById("warningMessage");searchInput.addEventListener("input", () => { const searchTerm = searchInput.value.toLowerCase(); const movieCards = Arra..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qSXLo/btsG9bkMpQg/1shZNeLVVPJljC3SvHjwh1/img.png)
인풋창에 한/영 키의 활성화 여부 ( 지금 키 상태가 한글인지, 영어인지) 를 띄우고 싶어요.. function checkHanEngKey(event) { const keyCode = event.keyCode || event.which; const isHanKey = (keyCode === 229); if (isHanKey) { alert("한/영"); } } document.addEventListener("keydown", checkHanEngKey); document.addEventListener("keypress", checkHanEngKey); document.addEventListener("keyup", checkHanEngKey); 일단 이런 식으로 한/영 키가 눌렸을 때 이벤트가 발생하..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/crk52N/btsG5ns3WDX/GEz2VGKvuYz1jPbApteod0/img.png)
이번 팀 프로젝트는 개인 과제의 연장선으로, 몇 가지 필수 기능들이 추가되었다.(1) 필수요구사항[1] TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)[2] 영화정보 상세 페이지 구현기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다[3] 상세 페이지 영화 리뷰 작성 기능 구현상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.[4] github PR(=Pull Request) 사용한 협업[5] UX를 고려한 validation ch..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bBPCni/btsG3OdmoQw/M8SEwK31iHGZKtXrlWfuY1/img.png)
완성한 코드를 제출하고, 피드백을 받아 살짝 수정하였다. - 검색 기능에서 item class 를 이용하여 요소를 가져온 이후 요소를 순회하면서 filter를 하고있을때, id 를 갖고 document.getElementById(id) 하고게신데, 이미 순회하고 있는 familyTitle자체가 document.getElementById(id)로 가져온 결과와 같은 요소이기때문에 document.getElementById(id)를 하는건 불필요한 행위입니다. familyTitle[i].style.display = 'block'; 이렇게만하셔도 됩니다. 수정전 if (rows.includes(filterValue)) { document.getElementById(id).style...