Conversation
… width @media (min-width: 768 px) and (max-width: 1199px) delete section gap, amend padding .section, .section.reverse add margin
…m>, function for button activation in <button>, data-valid in <input>, <span> for error-message and <script>
in <form>, data-valid in <input>, <span> for error-message, disabled for button-activation in <button> and add <script>
login-button activation
button-activation for signup-button
|
signup 페이지에서 비밀번호가 일치하지 않을 때, 비밀번호 확인 칸에서 비밀번호 입력 칸으로 이동했다가 바깥쪽 여백을 찍으면 비밀번호 확인 칸에 테두리 처리한 게 꺼집니다. 막연하게 순서때문이지 않을까 하고 생각하는데 어떻게 바꾸면 두 값이 일치하기 직전까지 테두리 처리한 것을 계속 유지할 수 있는지 알고싶습니다. |
|
이번 미션에서 만든 두 파일에 중복되는 변수이름, 조건문과 코드들이 많아서 통합 파일을 하나 만든 다음, 각각의 파일에서 재사용하고 싶은데, 아직 방법을 잘 모르겠어서 일단 파일만 만들어 둔 상태입니다... 어떻게 하면 처음에 코드를 짤 때 깔끔하게 짤 수 있는지 궁금합니다,,! |
There was a problem hiding this comment.
이번 미션에서 만든 두 파일에 중복되는 변수이름, 조건문과 코드들이 많아서 통합 파일을 하나 만든 다음, 각각의 파일에서 재사용하고 싶은데, 아직 방법을 잘 모르겠어서 일단 파일만 만들어 둔 상태입니다... 어떻게 하면 처음에 코드를 짤 때 깔끔하게 짤 수 있는지 궁금합니다,,!
우선 기능 구현에 초점을 맞추고 개발하신 후에 중복되는 코드가 있다면 그 부분부터 분리해내는 연습을 해보시면 좋을 것 같아요!
고생 많으셨습니다~! 👍 많이 고민해보신 흔적이 보이네요 ㅎㅎ
아직은 함수를 분리하고 재사용성을 높이는게 익숙치 않아 어려울 수 있어요. 너무 조급해하지 마시고 차근차근 코드 작성 연습을 하다보면 자연스럽게 익히실거에요.
다음 과제도 화이팅입니다 💪
| } | ||
|
|
||
| // 버튼 활성화 | ||
| loginForm.addEventListener("focusout", (e) => checkoutBtn(e)); |
There was a problem hiding this comment.
왜 loginForm 에서 focusout 할때마다 버튼 상태를 업데이트 해야하나요?? 요구사항에는 없는 것 같은데 추가하신 이유가 있으실까용?
There was a problem hiding this comment.
값을 입력하고 보통 loginForm 바깥으로 이동하니까 업데이트 해야한다고 생각했던 것 같습니다,,!
요구사항
기본
[x]체크리스트 [기본]
로그인
이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
회원가입
https://pandas-market.netlify.app/
멘토에게
셀프 코드리뷰를 통해 질문 이어가겠습니다.