PW visibility : hidden 기능 추가 / input 필드 채워질 경우 버튼 색 변경 추가

codeit-bootcamp-frontend · Aug 17, 2024 · 52f55b3 · 52f55b3
1 parent 6c75923
commit 52f55b3
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 4 deletions.
diff --git a/index.js b/index.js
@@ -0,0 +1,31 @@
+document.addEventListener("click", function(event) {
+  if (event.target.closest(".toggle-password")) {
+    const toggle = event.target.closest(".toggle-password");
+    const passwordField = toggle.previousElementSibling;
+    const icon = toggle.querySelector("i");
+
+    const isPassword = passwordField.type === "password";
+    passwordField.type = isPassword ? "text" : "password";
+
+    icon.classList.toggle("fa-eye");
+    icon.classList.toggle("fa-eye-slash");
+  }
+});
+
+
+document.querySelectorAll("form").forEach(function(form) {
+  form.addEventListener("input", function() {
+    const inputs = form.querySelectorAll("input");
+    const submitButton = form.querySelector("button");
+
+    const allFilled = Array.from(inputs).every(input => input.value.trim() !== "");
+
+    if (allFilled) {
+      submitButton.classList.add("button-on");
+      submitButton.classList.remove("button-off");
+    } else {
+      submitButton.classList.add("button-off");
+      submitButton.classList.remove("button-on");
+    }
+  });
+});
diff --git a/login.html b/login.html
@@ -12,6 +12,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
     />
     <link rel="stylesheet" href="styles/login-signup.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   </head>
   <body>
     <div class="login-background">
@@ -31,13 +32,20 @@
             placeholder="이메일을 입력해주세요"
           />
           <label>비밀번호</label>
+          <div class="password-container">
           <input
+            class="password-input"
+            autocomplete="off"
             name="password"
             type="password"
             placeholder="비밀번호를 입력해주세요"
           />
+          <span class="toggle-password">
+            <i class="fas fa-eye-slash"></i>
+          </span>
+          </div>
+          <button class="button-off">로그인</button>
       </div>
-      <button>로그인</button>
       <div class="social-login-box">
         <p class="social-login-p">간편 로그인하기</p>
         <div class="social-login-link">

diff --git a/signup.html b/signup.html
@@ -12,6 +12,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
     />
     <link rel="stylesheet" href="styles/login-signup.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   </head>
   <body>
     <div class="login-background">
@@ -37,19 +38,33 @@
             placeholder="닉네임을 입력해주세요"
           />
           <label>비밀번호</label>
+          <div class="password-container">
           <input
+            class="password-input"
+            autocomplete="off"
             name="password"
             type="password"
             placeholder="비밀번호를 입력해주세요"
           />
+          <span id="togglePassword" class="toggle-password">
+            <i class="fas fa-eye-slash"></i>
+          </span>
+          </div>
           <label>비밀번호 확인</label>
+          <div class="password-container">
           <input
+            class="password-input"
+            autocomplete="off"
             name="password-repeat"
             type="password"
             placeholder="비밀번호를 다시 한 번 입력해주세요"
           />
+          <span class="toggle-password">
+            <i class="fas fa-eye-slash"></i>
+          </span>
+          </div>
+          <button class="button-off">회원가입</button>
       </div>
-      <button>회원가입</button>
       <div class="social-login-box">
         <p class="social-login-p">간편 로그인하기</p>
         <div class="social-login-link">

diff --git a/styles/login-signup.css b/styles/login-signup.css
@@ -103,21 +103,45 @@ input {
   padding: 15px 24px 15px 24px ;
 }
 
+.password-container {
+  position: relative;
+  width: 100%;
+}
+
+.toggle-password {
+  position: absolute;
+  top: 40%;
+  right: 15px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.toggle-password i {
+  font-size: 18px;
+}
+
 button {
   font-size: 20px;
   font-weight: 600;
   line-height: 32px;
+  color: var(--secondary-color-gray100);
   align-items: center;
   justify-content: center;
   width:100%;
-  color: var(--secondary-color-gray100);
-  background-color: var(--secondary-color-gray400);
   border-radius: 40px;
   outline: none;
   border: none;
   padding: 16px 124px 16px 124px;
 }
 
+.button-off {
+  background-color: var(--secondary-color-gray400);
+}
+
+.button-on {
+  background-color: var(--primary-color100);
+}
+
 button.active {
   background-color: var(--primary-color100); 
   cursor: pointer;