[김교연] Sprint4 #75
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const emailInput = document.getElementById("email"); | ||
| const emailInputBorder = document.getElementById("email_input"); | ||
| const emailError = document.getElementById("email_error"); | ||
| const passwordInput = document.getElementById("password"); | ||
| const passwordInputBorder = document.getElementById("password_input"); | ||
| const passwordError = document.getElementById("password_error"); | ||
| const loginButton = document.querySelector(".btn_login2"); | ||
| const togglePasswordIcon = document.querySelector(".input_icon"); | ||
|
|
||
| /* 비밀번호 보이기 */ | ||
| togglePasswordIcon.addEventListener("click", function () { | ||
| if (passwordInput.type === "password") { | ||
| passwordInput.type = "text"; // 비밀번호 보이기 | ||
| togglePasswordIcon.src = "../img/login/btn_hidepw.svg"; | ||
| } else { | ||
| passwordInput.type = "password"; // 비밀번호 가리기 | ||
| togglePasswordIcon.src = "../img/login/btn_showpw.svg"; | ||
| } | ||
| }); | ||
|
|
||
| /* 이메일 유효성 */ | ||
| function validateEmail(email) { | ||
| const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; | ||
| return emailRegex.test(email); | ||
| } | ||
|
Comment on lines
+23
to
+26
Collaborator
There was a problem hiding this comment. 크으 ~ 순수 함수로 잘 작성된 함수입니다 👍👍일관된 타입, 일관된 반환값, 외부의 상태를 변경하지 않는 깔끔한 함수입니다 👍
|
||
|
|
||
| /* 비밀번호 유효성 */ | ||
| function validateInputs() { | ||
| const isEmailValid = emailInput.value && validateEmail(emailInput.value); | ||
| const isPasswordValid = | ||
| passwordInput.value && passwordInput.value.length >= 8; | ||
| const isFormValid = isEmailValid && isPasswordValid; | ||
|
Comment on lines
+30
to
+33
Collaborator
There was a problem hiding this comment. 별칭(
|
||
|
|
||
| if (isFormValid) { | ||
| loginButton.classList.add("active"); | ||
| loginButton.disabled = false; | ||
| } else { | ||
| loginButton.classList.remove("active"); | ||
| loginButton.disabled = true; | ||
| } | ||
| } | ||
|
|
||
| /* 이메일 에러메세지 */ | ||
| function checkEmail() { | ||
| if (!emailInput.value) { | ||
| emailError.textContent = "이메일을 입력해주세요."; | ||
| emailError.style.display = "block"; | ||
| emailInputBorder.classList.add("error-border"); | ||
| } else if (!validateEmail(emailInput.value)) { | ||
| emailError.textContent = "잘못된 이메일 형식입니다."; | ||
| emailError.style.display = "block"; | ||
| emailInputBorder.classList.add("error-border"); // input 오류 | ||
| } else { | ||
| emailError.style.display = "none"; | ||
| emailInputBorder.classList.remove("error-border"); // input 오류 제거 | ||
| emailInputBorder.classList.add("success-border"); | ||
| } | ||
| validateInputs(); | ||
| } | ||
|
|
||
| /* 비밀번호 에러메세지 */ | ||
| function checkPassword() { | ||
| if (passwordInput.value.length < 8) { | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; | ||
| passwordError.style.display = "block"; | ||
| passwordInputBorder.classList.add("error-border"); | ||
| } else { | ||
| passwordError.style.display = "none"; | ||
| passwordInputBorder.classList.remove("error-border"); | ||
| passwordInputBorder.classList.add("success-border"); | ||
| } | ||
| validateInputs(); | ||
| } | ||
|
|
||
| emailInput.addEventListener("input", checkEmail); | ||
|
Collaborator
There was a problem hiding this comment. (참고/선택) 이벤트 객체를 활용해볼 수도 있습니다 !<input id="text" />document.getElementById("text")
.addEventListener("input", (e) => {
console.log('$$ e', e.target.value);
e.target.style = "background-color: red"
});이렇게 하면 부가적인 전역 변수 선언을 줄이며 코드를 작성 하는 데에 도움이 될 수 있을거예요 ! 😊 |
||
| passwordInput.addEventListener("input", checkPassword); | ||
|
|
||
| /* 로그인 버튼 활성화 */ | ||
| loginButton.addEventListener("click", function (event) { | ||
| if (!loginButton.classList.contains("active")) { | ||
| event.preventDefault(); // 비활성화 상태 클릭 방지 | ||
| } else { | ||
| window.location.href = "/items"; | ||
| } | ||
| }); | ||
|
|
||
| validateInputs(); // 페이지 로드 시 초기 상태 체크 | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" | ||
| /> | ||
| <link rel="stylesheet" href="../Login/login.css" /> | ||
| <link rel="stylesheet" href="./signup.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
@@ -18,46 +19,56 @@ | |
| </div> | ||
| <div class="login_content"> | ||
| <h3>이메일</h3> | ||
| <div class="input_wrapper" id="email_input"> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| placeholder="이메일을 입력해주세요." | ||
| /> | ||
| </div> | ||
| <p id="email_error" class="error"></p> | ||
| <h3>닉네임</h3> | ||
| <div class="input_wrapper" id="name_input"> | ||
| <input id="name" name="name" placeholder="닉네임을 입력해주세요." /> | ||
| </div> | ||
| <p id="name_error" class="error"></p> | ||
| <h3>비밀번호</h3> | ||
| <div class="input_wrapper" id="password_input"> | ||
| <input | ||
| id="passwd" | ||
| name="password" | ||
| type="password" | ||
| minlength="8" | ||
| maxlength="20" | ||
| placeholder="비밀번호를 입력해주세요." | ||
| /> | ||
| <img | ||
| id="pwicon" | ||
| src="../img/login/btn_showpw.svg" | ||
| class="input_icon" | ||
| /> | ||
| </div> | ||
| <p id="passwd_error" class="error"></p> | ||
| <h3>비밀번호 확인</h3> | ||
| <div class="input_wrapper" id="checkpw_input"> | ||
| <input | ||
| id="checkPw" | ||
| name="checkPassword" | ||
| type="password" | ||
| minlength="8" | ||
| maxlength="20" | ||
| placeholder="비밀번호를 다시 입력해주세요." | ||
| /> | ||
| <img | ||
| id="checkpwicon" | ||
| src="../img/login/btn_showpw.svg" | ||
| class="input_icon" | ||
| /> | ||
| </div> | ||
| <p id="checkPasswd_error" class="error"></p> | ||
| <a href="/items" | ||
| ><button class="btn_signup" id="btn_signup">회원가입</button></a | ||
| > | ||
| <div class="sns_login"> | ||
| <div class="sns_login_content"> | ||
| <span class="sns_login_text">간편 로그인 하기</span> | ||
|
|
@@ -83,5 +94,6 @@ <h3>비밀번호 확인</h3> | |
| </div> | ||
| </div> | ||
| </main> | ||
| <script src="signup.js"></script> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굿굿 이렇게 하면 로드가 완료된 후 자바스크립트가 실행 되는 것을 보장받을 수 있겠네요 👍👍