[김가희] sprint4

login.css

@@ -43,6 +43,20 @@ body{
     outline-color: #3692FF;;
 }
 
+.error {
+    border:1px solid red;
+}
+
+
+.error-message,
+.error-message-pw,
+.error-message-nick,
+.error-message-pwcheck {
+    outline-color: red;
+    color: red;
+    display: none;
+}
+
 .input::placeholder{
     color: #9CA3AF;
     font-weight: 400;

login.html

@@ -29,12 +29,14 @@
       <form class="email-box">
         <label class="email-label" for ="email">이메일</label>
         <input class="input" placeholder="이메일을 입력해주세요" id="email">
+        <div class="error-message"></div>
       </form>
       <form class="pw-box">
         <label class="pw-label" for ="pw">비밀번호</label>
         <input class="input" placeholder="비밀번호를 입력해주세요" type="password" id="pw">
+        <div class='error-message-pw'></div>
       </form>
-      <button class="login-btn" onclick="location.href='/login'">로그인</button>
+      <button id="login" class="login-btn" onclick="location.href='/items'">로그인</button>
       <article class="easy-login-box">
         <div class="easy-content">
           <span>간편 로그인하기</span>
@@ -49,5 +51,6 @@
         <a href="signup.html">회원가입</a>
       </section>
     </main>
+    <script src="login.js"></script>
   </body>
 </html>

login.js

@@ -0,0 +1,72 @@
+const emailInputElement = document.querySelector('#email');
+const pwInputElement = document.querySelector('#pw');
+const errorMessage = document.querySelector('.error-message');
+const pwErrorMessage = document.querySelector('.error-message-pw');
+
+function emailForm(e) {
+  if (emailInputElement.value === '') {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="이메일을 입력해주세요."
+    errorMessage.style.display = 'block';
+  } else if (!(emailInputElement.value.includes("@")
+  && emailInputElement.value.includes("."))) {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="잘못된 이메일 형식입니다."
+    errorMessage.style.display = 'block';
+  }else{
+    emailInputElement.classList.remove('error');
+    errorMessage.style.display = 'none';
+  }
+}
+
+function pwForm(e) {
+  if (pwInputElement.value === '') {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  } else if (pwInputElement.value.length < 8) {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 8자 이상 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  }else{
+    pwInputElement.classList.remove('error');
+    pwErrorMessage.style.display = 'none';
+  }
+}
+
+function removeMessage(e){
+  if(e.target.id === "email"){
+    errorMessage.style.display = 'none';  
+  }else{
+    pwErrorMessage.style.display = 'none';
+  }
+}
+
+
+emailInputElement.addEventListener('blur', emailForm)
+emailInputElement.addEventListener('focus', removeMessage)
+
+pwInputElement.addEventListener('blur', pwForm)
+pwInputElement.addEventListener('focus', removeMessage)
+
+// ----------------------------------------------------------
+
+const loginElement = document.querySelector("#login")
+
+function activateLogin(e){
+  if(emailInputElement.classList.contains('error') 
+    || pwInputElement.classList.contains('error')){
+      loginElement.style.backgroundColor = "#9CA3AF"
+
+  } else if(emailInputElement.value === '' || pwInputElement.value === ''){
+      loginElement.style.backgroundColor = "#9CA3AF"
+  }else{
+      loginElement.style.backgroundColor = "#3692FF"
+  }
+}
+
+pwInputElement.addEventListener('blur', activateLogin)
+emailInputElement.addEventListener('blur', activateLogin)
+
+
+

signup.html

@@ -28,21 +28,25 @@
     <main class="container">
       <form class="email-box">
         <label class="email-label">이메일</label>
-        <input class="input" placeholder="이메일을 입력해주세요">
+        <input class="input" id="email" placeholder="이메일을 입력해주세요">
+        <div class="error-message"></div>
       </form>
       <form class="nickname-box">
         <label class="nickname-label">닉네임</label>
-        <input class="input" placeholder="닉네임을 입력해주세요">
+        <input class="input" id="nickname" placeholder="닉네임을 입력해주세요">
+        <div class="error-message-nick"></div>
       </form>
       <form class="pw-box">
         <label class="pw-label">비밀번호</label>
-        <input class="input" placeholder="비밀번호를 입력해주세요"  type="password">
+        <input class="input" id="pw" placeholder="비밀번호를 입력해주세요"  type="password">
+        <div class="error-message-pw"></div>
       </form>
       <form class="pw-repeat-box">
         <label class="pw-repeat-label">비밀번호 확인</label>
-        <input class="input" placeholder="비밀번호를 다시 한 번 입력해주세요"  type="password">
+        <input class="input" id="pwcheck" placeholder="비밀번호를 다시 한 번 입력해주세요"  type="password">
+        <div class="error-message-pwcheck"></div>
       </form>
-      <button class="login-btn" onclick="location.href='/login'">회원가입</button>
+      <button class="login-btn">회원가입</button>
       <article class="easy-login-box">
         <div class="easy-content">
           <span>간편 로그인하기</span>
@@ -57,5 +61,6 @@
         <a href="login.html">로그인</a>
       </section>
     </main>
+  <script src="signup.js"></script>
   </body>
 </html>

signup.js

@@ -0,0 +1,131 @@
+let signupValid = false
+
+//ID 선택하기
+const emailInputElement = document.getElementById('email');
+const nickInputElement = document.getElementById('nickname');
+const pwInputElement = document.getElementById('pw');
+const pwCheckInputElement = document.getElementById('pwcheck');
+const errorMessage = document.querySelector('.error-message');
+const nickErrorMessage = document.querySelector('.error-message-nick');
+const pwErrorMessage = document.querySelector('.error-message-pw');
+const pwCheckErrorMessage = document.querySelector('.error-message-pwcheck');
+const signupElement = document.querySelector('.login-btn')
+
+
+
+
+
+function emailForm(e) {
+  if (emailInputElement.value === '') {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent = "이메일을 입력해주세요"
+    errorMessage.style.display = 'block';
+  } else if (!(emailInputElement.value.includes("@")
+  && emailInputElement.value.includes("."))) {
+    emailInputElement.classList.add('error');
+    errorMessage.textContent ="잘못된 이메일 형식입니다."
+    errorMessage.style.display = 'block';
+  }else{
+    emailInputElement.classList.remove('error');
+    errorMessage.style.display = 'none';
+  };
+};
+
+function nickForm(e) {
+  if (nickInputElement.value === '') {
+    nickInputElement.classList.add('error');
+    nickErrorMessage.textContent = "닉네임을 입력해주세요."
+    nickErrorMessage.style.display = "block";
+  } else {
+    nickInputElement.classList.remove('error');
+    nickErrorMessage.style.display = 'none';
+  };
+};
+
+function pwForm(e) {
+  if (pwInputElement.value === '') {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  } else if (pwInputElement.value.length < 8) {
+    pwInputElement.classList.add('error');
+    pwErrorMessage.textContent ="비밀번호를 8자 이상 입력해주세요."
+    pwErrorMessage.style.display = 'block';
+  }else{
+    pwInputElement.classList.remove('error');
+    pwErrorMessage.style.display = 'none';
+  };
+};
+
+function removeMessage(e){
+  if(e.target.id === "email"){
+    errorMessage.style.display = 'none';  
+  } else if(e.target.id === "nickname"){
+    nickErrorMessage.style.display = 'none';
+  } else if(e.target.id === "pw"){
+    pwErrorMessage.style.display = 'none';
+  } else{
+    pwCheckErrorMessage.style.display = 'none';
+  };
+};
+
+function pwValid(e) {
+  if (!(pwInputElement.value === pwCheckInputElement.value)) {
+    pwCheckInputElement.classList.add('error');
+    pwCheckErrorMessage.textContent = "비밀번호가 일치하지 않습니다.."
+    pwCheckErrorMessage.style.display = 'block';
+  }else{
+    pwCheckInputElement.classList.remove('error');
+    pwCheckErrorMessage.style.display = 'none';
+  };
+}
+
+function activateSignup(e){
+  if(
+    emailInputElement.classList.contains('error') 
+    || nickInputElement.classList.contains('error')
+    || pwInputElement.classList.contains('error')
+    || pwCheckInputElement.classList.contains('error')
+  ) {
+    signupElement.style.backgroundColor = "#9CA3AF"
+  } else if (
+    emailInputElement.value ==='' 
+    || nickInputElement.value ===''
+    || pwInputElement.value ===''
+    || pwCheckInputElement.value === ''
+  ) {
+    signupElement.style.backgroundColor = "#9CA3AF"
+  } else {
+    signupElement.style.backgroundColor = "#3692FF"
+    signupValid = true
+  }
+}
+
+
+
+emailInputElement.addEventListener('blur', emailForm);
+nickInputElement.addEventListener('blur', nickForm);
+pwInputElement.addEventListener('blur', pwForm);
+pwCheckInputElement.addEventListener('blur', pwValid);
+
+emailInputElement.addEventListener('focus',removeMessage)
+nickInputElement.addEventListener('focus',removeMessage)
+pwInputElement.addEventListener('focus',removeMessage)
+pwCheckInputElement.addEventListener('focus',removeMessage)
+
+
+emailInputElement.addEventListener('blur', activateSignup)
+nickInputElement.addEventListener('blur', activateSignup)
+pwInputElement.addEventListener('blur', activateSignup)
+pwCheckInputElement.addEventListener('blur', activateSignup)
+
+pwInputElement.addEventListener('change',pwValid);
+
+
+function signupButton(e){
+  if(signupValid){
+    window.location.href = "/login"
+  }
+}
+
+signupElement.addEventListener("click",signupButton)