diff --git a/README.md b/README.md index d23b7673..22f3d914 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -코드잇 프론트 엔드 13기 유선향 스프린트 미션 3입니다. -제출일 12월 27일 +13기 프론트엔드 개인 스프린트 미션4 +제출일 12월 3일 \ No newline at end of file diff --git a/index.html b/index.html index 691d1c42..348cb1ed 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ content="https://fastidious-tiramisu-8831ce.netlify.app/" /> - +
diff --git a/login.html b/login.html index 10d9fbd1..7d6125d9 100644 --- a/login.html +++ b/login.html @@ -4,11 +4,11 @@ 판다마켓-로그인 - + + name="user_email" /> + +
- +
@@ -61,6 +70,7 @@
- + + diff --git a/login.js b/login.js deleted file mode 100644 index e69de29b..00000000 diff --git a/package.json b/package.json new file mode 100644 index 00000000..c54849f8 --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "13-sprint-mission", + "version": "1.0.0", + "description": "13기 프론트엔드 개인 스프린트 미션4 제출일 12월 3일", + "main": "", + "type": "module", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/signin.html b/signin.html new file mode 100644 index 00000000..bfaf40fa --- /dev/null +++ b/signin.html @@ -0,0 +1,7 @@ + + + + + signin페이지 + + diff --git a/signup.html b/signup.html index 4ef4e022..0c81ea7a 100644 --- a/signup.html +++ b/signup.html @@ -4,12 +4,11 @@ 판다마켓-회원가입 - - + + name="user_email" /> +
+ name="nickname" /> +
- - +
- -
@@ -83,6 +93,7 @@ 로그인 - + + diff --git a/signup.js b/signup.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/login.js b/src/login.js new file mode 100644 index 00000000..5d6e45e4 --- /dev/null +++ b/src/login.js @@ -0,0 +1,105 @@ +const Email = document.querySelector("#user_email"); +const password = document.querySelector("#login_password"); +const Error_message = document.querySelectorAll(".error_message"); +const Btn = document.querySelector("#Btn"); +const eyes = document.querySelector("i"); +const Input = document.querySelectorAll(".input_area"); + +const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + +document.addEventListener("DOMContentLoaded", () => { + Button_inactive(); +}); //초기 Button 상태 설정 + +Btn.addEventListener("click", () => { + if (!Btn.disabled) { + location.href = "./items.html"; + } +}); + +//이메일 유효성 검사 함수 +function email_check(email) { + return pattern.test(email); +} +//비밀번호 8자리 이상 체크 함수 +function password_checked(password) { + return password.length > 7; +} + +//a태그 존재시 삭제 +function tag_delete(i) { + let isTag = Error_message[i].querySelector("a"); + if (isTag) { + Error_message[i].lastChild.remove(); + } +} + +function Email_focus_out(e) { + let input = e.target.value; + tag_delete(0); + if (!email_check(input)) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + if (input == "") { + text.textContent = "이메일을 입력해주세요"; + Error_message[0].prepend(text); + } else { + text.textContent = "잘못된 이메일 형식 입니다."; + Error_message[0].prepend(text); + } + } else { + e.target.classList.remove("input_red_border"); + } +} + +//비밀번호 함수 +function Password_focus_out(e, x) { + let input = e.target.value; + tag_delete(x); + if (!password_checked(input)) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = + input === "" + ? "비밀번호를 입력해주세요" + : "비밀번호를 8자 이상 입력해주세요"; + Error_message[x].prepend(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//버튼 함수 +function Button_inactive(e) { + switch (email_check(Email.value) && password_checked(password.value)) { + case true: + Btn.disabled = false; + + break; + case false: + Btn.disabled = true; + + break; + } +} +//패스워드 숨김 핸들러 함수 +function Password_hide(e) { + if (password.type == "password") { + password.type = "text"; + e.target.classList.remove("fa-eye-slash"); + e.target.classList.add("fa-eye"); + } else { + password.type = "password"; + e.target.classList.remove("fa-eye"); + e.target.classList.add("fa-eye-slash"); + } +} +//이벤트 핸들러 등록 +password.addEventListener("focusout", Password_focus_out); +Email.addEventListener("focusout", Email_focus_out); +password.addEventListener("focusout", (e) => Password_focus_out(e, 1)); +eyes.addEventListener("click", Password_hide); + +Input.forEach((input) => { + input.addEventListener("change", Button_inactive); +}); diff --git a/src/signup.js b/src/signup.js new file mode 100644 index 00000000..5dbd068d --- /dev/null +++ b/src/signup.js @@ -0,0 +1,171 @@ +const Email = document.querySelector("#user_email"); +const nickname = document.querySelector("#user_nickname"); +const password = document.querySelector("#password"); +const check_pass = document.querySelector("#password_correct"); +const Btn = document.querySelector("#Btn"); +const Error_message = document.querySelectorAll(".error_message"); +const Input = document.querySelectorAll(".input_area"); +const eyes = document.querySelectorAll("i"); + +const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + +document.addEventListener("DOMContentLoaded", () => { + Btn.disabled = true; +}); //초기 Button 상태 설정 + +Btn.addEventListener("click", () => { + if (!Btn.disabled) { + location.href = "./signin.html"; + } +}); + +//이메일 유효성 검사 함수 +function email_check(email) { + return pattern.test(email); +} +//비밀번호 8자리 이상 체크 함수 +function password_checked(password) { + return password.length > 7; +} + +//a태그 존재시 삭제 +function tag_delete(i) { + let isTag = Error_message[i].querySelector("a"); + if (isTag) { + Error_message[i].lastChild.remove(); + } +} + +//이메일 함수 +function Email_focus_out(e) { + let input = e.target.value; + tag_delete(0); + if (!email_check(input)) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + if (input == "") { + text.textContent = "이메일을 입력해주세요"; + Error_message[0].prepend(text); + } else { + text.textContent = "잘못된 이메일 형식 입니다."; + Error_message[0].prepend(text); + } + } else { + e.target.classList.remove("input_red_border"); + } +} + +//닉네임 함수 +function Nickname_focus_out(e) { + tag_delete(1); + if (e.target.value == "") { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = "닉네임을 입력해 주세요"; + Error_message[1].append(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//비밀번호 함수 +function Password_focus_out(e, x) { + let input = e.target.value; + tag_delete(x); + if (!password_checked(input)) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = + input === "" + ? "비밀번호를 입력해주세요" + : "비밀번호를 8자 이상 입력해주세요"; + Error_message[x].prepend(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//비밀번호 확인 함수 +function Password_correct(e, x) { + let input = e.target.value; + tag_delete(x); + if (input !== password.value) { + const text = document.createElement("a"); + e.target.classList.add("input_red_border"); + text.textContent = "비밀번호가 일치하지 않습니다.."; + Error_message[x].append(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//form에 값이 다 있는지 보는 함수 +function is_form_value() { + let array = []; + for (let i = 0; i < 4; i++) { + array.push(Boolean(Input[i].value)); + } + return array.every((x) => x == true); +} + +//에러 메시지가 없는지 보는 함수 +function is_error() { + let array = []; + for (let i = 0; i < 4; i++) { + let x = Boolean(Error_message[i].querySelector("a")); + array.push(x); + } + console.log(array); + return array.every((x) => x == false); +} + +//패스워드 숨김 핸들러 함수 +function Password_hide(e) { + if (password.type == "password") { + password.type = "text"; + e.target.classList.remove("fa-eye-slash"); + e.target.classList.add("fa-eye"); + } else { + password.type = "password"; + e.target.classList.remove("fa-eye"); + e.target.classList.add("fa-eye-slash"); + } +} + +//패스워드 확인 숨김 핸들러 함수 + +function check_pass_hide(e) { + if (password.type == "password") { + check_pass.type = "text"; + e.target.classList.remove("fa-eye-slash"); + e.target.classList.add("fa-eye"); + } else { + check_pass.type = "password"; + e.target.classList.remove("fa-eye"); + e.target.classList.add("fa-eye-slash"); + } +} +//버튼 함수 + +function Button_inactive(e) { + switch (is_form_value() && is_error()) { + case true: + Btn.disabled = false; + break; + case false: + Btn.disabled = true; + break; + } +} + +//이벤트 핸들러 등록 +Email.addEventListener("focusout", Email_focus_out); +nickname.addEventListener("focusout", Nickname_focus_out); +password.addEventListener("focusout", (e) => Password_focus_out(e, 2)); +check_pass.addEventListener("keyup", (e) => Password_correct(e, 3)); +eyes[0].addEventListener("click", Password_hide); +eyes[1].addEventListener("click", check_pass_hide); + +Input.forEach((input) => { + input.addEventListener("change", Button_inactive); +}); diff --git a/src/test.js b/src/test.js new file mode 100644 index 00000000..bc60018a --- /dev/null +++ b/src/test.js @@ -0,0 +1,155 @@ +const Email = document.querySelector("#user_email"); +const nickname = document.querySelector("#user_nickname"); +const LoginPassword = document.querySelector("#login_password"); +const Password = document.querySelector("#password"); +const check_pass = document.querySelector("#password_correct"); +const eyes = document.querySelector("i"); +const Btn = document.querySelector("#Btn"); +const Error_message = document.querySelectorAll(".error_message"); +const Input = document.querySelectorAll(".input_area"); + +import { email_check, password_checked, tag_delete } from "./utils"; + +const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; + +document.addEventListener("DOMContentLoaded", () => { + Button_inactive(); +}); //초기 Button 상태 설정 + +Btn.addEventListener("click", () => { + if (!Btn.disabled) { + location.href = "./items.html"; + } +}); + +//이메일 확인 +function Email_focus_out(e, i) { + let input = e.target.value; + tag_delete(i); + if (!email_check(input)) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = + input === "" ? "이메일을 입력해주세요" : "잘못된 이메일 형식 입니다."; + Error_message[i].prepend(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//비밀번호 +function Password_focus_out(e, i) { + let input = e.target.value; + tag_delete(i); + if (input.length < 8) { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = + input === "" + ? "비밀번호를 입력해주세요" + : "비밀번호를 8자 이상 입력해주세요"; + Error_message[i].prepend(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//닉네임 함수 +function Nickname_focus_out(e, i) { + tag_delete(i); + if (e.target.value == "") { + e.target.classList.add("input_red_border"); + const text = document.createElement("a"); + text.textContent = "닉네임을 입력해 주세요"; + Error_message[i].append(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//비밀번호 확인 함수 +function Password_correct(e, x) { + let input = e.target.value; + tag_delete(x); + if (input !== Password.value) { + const text = document.createElement("a"); + e.target.classList.add("input_red_border"); + text.textContent = "비밀번호가 일치하지 않습니다.."; + Error_message[x].append(text); + } else { + e.target.classList.remove("input_red_border"); + } +} + +//패스워드 숨김 핸들러 함수 +function Password_hide(e, el) { + if (el.type == "password") { + el.type = "text"; + e.target.classList.remove("fa-eye-slash"); + e.target.classList.add("fa-eye"); + } else { + el.type = "password"; + e.target.classList.remove("fa-eye"); + e.target.classList.add("fa-eye-slash"); + } +} + +//form에 값이 다 있는지 보는 함수 +function is_form_value() { + let array = []; + for (let i = 0; i < 4; i++) { + array.push(Boolean(Input[i].value)); + } + return array.every((x) => x == true); +} + +//에러 메시지가 없는지 보는 함수 +function is_error() { + let array = []; + for (let i = 0; i < 4; i++) { + let x = Boolean(Error_message[i].querySelector("a")); + array.push(x); + } + console.log(array); + return array.every((x) => x == false); +} +//버튼 +function Button_inactive(e, condition1, condition2) { + switch (condition1 && condition2) { + case true: + Btn.disabled = false; + break; + case false: + Btn.disabled = true; + break; + } +} + +//이벤트 핸들러 등록--------------------------------------------------------// + +Email.addEventListener("focusout", (e) => Email_focus_out(e, 0)); //이메일은 두 페이지 모드 0번 인덱스 +LoginPassword.addEventListener("focusout", (e) => Password_focus_out(e, 1)); //로그인페이지 비밀번호 +eyes[0].addEventListener("click", (e) => Password_hide(e, LoginPassword)); //로그인 페이지 비밀번호 눈 + +nickname.addEventListener("focusout", (e) => Nickname_focus_out(e, 1)); //회원가입 페이지 닉네임 +Password.addEventListener("focusout", (e) => Password_focus_out(e, 2)); //회원가입페이지 비밀번호 +check_pass.addEventListener("keyup", (e) => Password_correct(e, 3)); //회원가입페이지 비밀번호 확인 +eyes[0].addEventListener("click", (e) => Password_hide(e, Password)); //회원가입 페이지 비밀번호 눈 +eyes[1].addEventListener("click", (e) => Password_hide(e, check_pass)); //회원가입 페이지 비밀번호 확인 눈 + +Input.forEach((input) => { + input.addEventListener( + "change", + (e) => Button_inactive(e, is_form_value(), is_error()) //회원가입 페이지 버튼 + ); +}); +Input.forEach((input) => { + input.addEventListener( + "change", + Button_inactive( + e, + email_check(Email.value), + password_checked(Password.value) + ) + ); //로그인 페이지 버튼 +}); diff --git a/color.css b/style/color.css similarity index 93% rename from color.css rename to style/color.css index 1016b0a8..4d04dabe 100644 --- a/color.css +++ b/style/color.css @@ -12,4 +12,5 @@ --white: #ffffff; --backgroundLightBlue: #cfe5ff; --backgroundLightGray: #fcfcfc; + --inputRed: #f74747; } diff --git a/main.css b/style/main.css similarity index 100% rename from main.css rename to style/main.css diff --git a/signup_login.css b/style/signup_login.css similarity index 90% rename from signup_login.css rename to style/signup_login.css index 3605bd2d..18574cd6 100644 --- a/signup_login.css +++ b/style/signup_login.css @@ -60,7 +60,6 @@ main { font-size: 18px; font-weight: 700px; color: var(--gray800); - position: relative; } .input_area { @@ -91,10 +90,14 @@ main { /* 여기까지 form 기본 영역 */ +.i_tag_position { + margin: 0; + position: relative; +} i { position: absolute; right: 5%; - bottom: 20%; + bottom: 30%; } /* 눈모양 i태그 */ @@ -156,6 +159,22 @@ i { color: var(--blue); } +/*------------------------------------------------------*/ +/*js 기능 css*/ +.input_red_border { + border: 1px solid var(--inputRed); +} +.error_message { + width: 100%; +} +.error_message > a { + color: var(--inputRed); + font-size: 14px; + line-height: 24px; + font-weight: 600; + text-align: left; +} + /* 화면 너비기준 1199px ~768px 타블렛 */ @media (max-width: 1199px) {