From c85608c3f55f5672f65fdd16cffaf3ca221a5f08 Mon Sep 17 00:00:00 2001 From: Bae Min Ji Date: Fri, 2 May 2025 14:35:03 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8?= =?UTF-8?q?=EB=AF=B8=EC=85=984=20PR=EC=9E=AC=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FE-Sprint-Mission1-week1/login.html | 7 +- .../FE-Sprint-Mission1-week1/login.js | 83 ++++++++++++ .../FE-Sprint-Mission1-week1/signup.html | 21 ++- .../FE-Sprint-Mission1-week1/signup.js | 127 ++++++++++++++++++ .../FE-Sprint-Mission1-week1/styles/login.css | 22 +++ .../FE-Sprint-Mission1-week1/styles/reset.css | 1 + 6 files changed, 253 insertions(+), 8 deletions(-) create mode 100644 FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js create mode 100644 FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html index 68b6debe..c1f92414 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html @@ -26,14 +26,18 @@
+
이메일을 입력해주세요.
+
잘못된 이메일 형식입니다.
숨김 아이콘 +
비밀번호를 입력해주세요.
+
비밀번호를 8자 이상 입력해주세요.
- @@ -56,5 +60,6 @@ + diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js new file mode 100644 index 00000000..8a38cf85 --- /dev/null +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js @@ -0,0 +1,83 @@ +const inputEmail = document.querySelector("#form__email"); +const emailErrorMessage = document.querySelector("#form__email--message"); +const emailInvalidMessage = document.querySelector( + "#form__email--invalid-message" +); + +const inputPassword = document.querySelector("#form__password"); +const passwordErrorMessage = document.querySelector("#form__password--message"); +const passwordInvalidMessage = document.querySelector( + "#form__password--invalid-message" +); + +const loginButton = document.querySelector("#login-button"); + +const toggleIcon = document.querySelector( + ".form__password--wrapper .input-icon" +); + +function checkLoginFormValidity() { + const emailValue = inputEmail.value.trim(); + const passwordValue = inputPassword.value.trim(); + + const emailIsValid = + /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue); + const passwordValid = passwordValue.length >= 8; + + if (emailIsValid && passwordValid) { + loginButton.disabled = false; + loginButton.classList.remove("button--disabled"); + } else { + loginButton.disabled = true; + loginButton.classList.add("button--disabled"); + } +} + +inputEmail.addEventListener("blur", function (e) { + const emailValue = e.target.value.trim(); + + if (emailValue === "") { + inputEmail.style.border = "1px solid red"; + emailErrorMessage.style.display = "block"; + emailInvalidMessage.style.display = "none"; + } else if ( + !/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue) + ) { + inputEmail.style.border = "1px solid red"; + emailErrorMessage.style.display = "none"; + emailInvalidMessage.style.display = "block"; + } else { + inputEmail.style.border = "1px solid var(--gray-100)"; + emailErrorMessage.style.display = "none"; + emailInvalidMessage.style.display = "none"; + } + + checkLoginFormValidity(); +}); + +inputPassword.addEventListener("blur", function (e) { + const passwordValue = e.target.value.trim(); + + if (passwordValue === "") { + inputPassword.style.border = "1px solid red"; + passwordErrorMessage.style.display = "block"; + passwordInvalidMessage.style.display = "none"; + } else if (passwordValue.length < 8) { + inputPassword.style.border = "1px solid red"; + passwordErrorMessage.style.display = "none"; + passwordInvalidMessage.style.display = "block"; + } else { + inputPassword.style.border = "1px solid var(--gray-100)"; + passwordErrorMessage.style.display = "none"; + passwordInvalidMessage.style.display = "none"; + } + checkLoginFormValidity(); +}); + +toggleIcon.addEventListener("click", function (e) { + inputPassword.type = inputPassword.type === "password" ? "text" : "password"; + toggleIcon.src = + inputPassword.type === "password" + ? "images/btn_visibility_on_24px.png" + : "images/btn_visibility_on_24px 2.png"; +}); diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.html b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.html index d7088834..106cccfa 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.html +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.html @@ -27,24 +27,31 @@
+
이메일을 입력해주세요.
+
잘못된 이메일 형식입니다.
+ + + +
닉네임을 입력해주세요.
- -
숨김 아이콘 +
비밀번호를 입력해주세요.
+
비밀번호를 8자 이상 입력해주세요.
- 숨김 아이콘 - + 숨김 아이콘 + +
비밀번호가 일치하지 않습니다.
- - @@ -67,6 +74,6 @@ - + diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js new file mode 100644 index 00000000..77af34a5 --- /dev/null +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js @@ -0,0 +1,127 @@ +const inputEmail = document.querySelector("#form__email"); +const emailErrorMessage = document.querySelector("#form__email--message"); +const emailInvalidMessage = document.querySelector( + "#form__email--invalid-message" +); + +const inputPassword = document.querySelector("#form__password"); +const passwordErrorMessage = document.querySelector("#form__password--message"); +const passwordInvalidMessage = document.querySelector( + "#form__password--invalid-message" +); + +const signupButton = document.querySelector("#signup-button"); + +const toggleIcon = document.querySelectorAll( + ".form__password--wrapper .input-icon" +); + +const inputpasswordCheck = document.querySelector("#passwordCheck"); +const passwordCheckMessage = document.querySelector("#passwordCheck--message"); + +const inputNickName = document.querySelector("#form__nickName"); +const nickNameInvalidMessage = document.querySelector( + "#form__nickName--invalid-message" +); + +function checkSignupFormValidity() { + const emailValue = inputEmail.value.trim(); + const passwordValue = inputPassword.value.trim(); + const passwordCheckValue = inputpasswordCheck.value.trim(); + const nickNameValue = inputNickName.value.trim(); + + const emailIsValid = + /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue); + const passwordValid = passwordValue.length >= 8; + + if ( + emailIsValid && + passwordValid && + passwordValue === passwordCheckValue && + nickNameValue !== "" + ) { + signupButton.disabled = false; + signupButton.classList.remove("button--disabled"); + } else { + signupButton.disabled = true; + signupButton.classList.add("button--disabled"); + } +} + +inputEmail.addEventListener("blur", function (e) { + const emailValue = e.target.value.trim(); + + if (emailValue === "") { + inputEmail.style.border = "1px solid red"; + emailErrorMessage.style.display = "block"; + emailInvalidMessage.style.display = "none"; + } else if ( + !/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue) + ) { + inputEmail.style.border = "1px solid red"; + emailErrorMessage.style.display = "none"; + emailInvalidMessage.style.display = "block"; + } else { + inputEmail.style.border = "1px solid var(--gray-100)"; + emailErrorMessage.style.display = "none"; + emailInvalidMessage.style.display = "none"; + } + + checkSignupFormValidity(); +}); + +inputPassword.addEventListener("blur", function (e) { + const passwordValue = e.target.value.trim(); + + if (passwordValue === "") { + inputPassword.style.border = "1px solid red"; + passwordErrorMessage.style.display = "block"; + passwordInvalidMessage.style.display = "none"; + } else if (passwordValue.length < 8) { + inputPassword.style.border = "1px solid red"; + passwordErrorMessage.style.display = "none"; + passwordInvalidMessage.style.display = "block"; + } else { + inputPassword.style.border = "1px solid var(--gray-100)"; + passwordErrorMessage.style.display = "none"; + passwordInvalidMessage.style.display = "none"; + } + checkSignupFormValidity(); +}); + +inputpasswordCheck.addEventListener("blur", function (e) { + const passwordValue = inputPassword.value.trim(); + const passwordCheckValue = e.target.value.trim(); + + if (passwordValue !== passwordCheckValue) { + inputpasswordCheck.style.border = "1px solid red"; + passwordCheckMessage.style.display = "block"; + } else { + inputpasswordCheck.style.border = "1px solid var(--gray-100)"; + passwordCheckMessage.style.display = "none"; + } + checkSignupFormValidity(); +}); + +inputNickName.addEventListener("blur", function (e) { + const nickNameValue = e.target.value.trim(); + + if (nickNameValue === "") { + inputNickName.style.border = "1px solid red"; + nickNameInvalidMessage.style.display = "block"; + } + checkSignupFormValidity(); +}); + +toggleIcon.forEach(function (icon) { + icon.addEventListener("click", function () { + const wrapper = icon.closest(".form__password--wrapper"); + const input = wrapper.querySelector("input"); + + const isPassword = input.type === "password"; + input.type = isPassword ? "text" : "password"; + icon.src = isPassword + ? "images/btn_visibility_on_24px 2.png" + : "images/btn_visibility_on_24px.png"; + }); +}); diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/login.css b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/login.css index da5b6897..ab872664 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/login.css +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/login.css @@ -62,6 +62,20 @@ input { line-height: 32px; } +.button--disabled { + background-color: var(--gray-400); + width: 640px; + height: 56px; + margin: 0 auto; + padding: 16px; + border: 1px solid var(--gray-400); + border-radius: 40px; + color: var(--gray-100); + font-size: 20px; + font-weight: 600; + line-height: 32px; +} + .form__social-login { display: flex; justify-content: space-between; @@ -90,6 +104,14 @@ input { color: var(--gray-800); } +.error__message { + font-size: 14px; + font-weight: 600; + color: var(--error); + display: none; + margin: 0 16px 18px; +} + a { color: var(--blue); text-decoration: underline; diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/reset.css b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/reset.css index e1c8cee3..5377523e 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/reset.css +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/reset.css @@ -140,6 +140,7 @@ table { --gray-50: #f9fafb; --blue: #3692ff; --skyBlue: #e6f2ff; + --error: #f74747; } * { From ea88cf4a178802900c04bd761964aba26658ac3a Mon Sep 17 00:00:00 2001 From: Bae Min Ji Date: Fri, 2 May 2025 15:56:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FE-Sprint-Mission1-week1/index.html | 55 +++++++------------ .../FE-Sprint-Mission1-week1/login.html | 6 +- 2 files changed, 22 insertions(+), 39 deletions(-) diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/index.html b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/index.html index bbb4d78b..9cad93b2 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/index.html +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/index.html @@ -12,40 +12,25 @@ 판다마켓 - - - - + + + +
- + 로그인일상의 모든 물건을 거래해 보세요
판다마켓의 마스코트인 판다가 손을 흔들고 있는 이미지입니다. @@ -80,7 +65,7 @@

일상의 모든 물건을 거래해 보세요

두 마스코트 판다가 하나의 인기상품을 구경하는 이미지입니다. @@ -95,7 +80,7 @@

인기 상품을 확인해 보세요

돋보기가 상품을 확대하는 이미지입니다.
@@ -109,7 +94,7 @@

구매를 원하는 상품을 검색해 보세요

다양한 상품들이 각각의 카테고리에 담겨지는 모습의 이미지입니다.
@@ -127,7 +112,7 @@

판매를 원하는 상품을 등록하세요

믿을 수 있는
판다마켓 중고 거래

두 마스코트 판다가 즐겁게 거래하는 이미지입니다.
@@ -140,13 +125,11 @@

믿을 수 있는
판다마켓 중고 거래

©codeit - 2024
Privacy Policy - FAQ + FAQ
믿을 수 있는
판다마켓 중고 거래 rel="noopener noreferrer" > 페이스북 아이콘 트위터 아이콘 유투브 아이콘 인스타 아이콘 diff --git a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html index c1f92414..7dd932ba 100644 --- a/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html +++ b/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html @@ -18,7 +18,7 @@
- +