강수정 스프린트 과제3

codeit-sprint-fullstack · Oct 6, 2024 · 2756b03 · 2756b03
1 parent 94e965e
commit 2756b03
Show file tree

Hide file tree

Showing 16 changed files with 803 additions and 147 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/판다마켓/.DS_Store b/판다마켓/.DS_Store
diff --git a/판다마켓/img/btn_visibility_on_24px.png → 판다마켓/img/btn_hidden.png b/판다마켓/img/btn_visibility_on_24px.png → 판다마켓/img/btn_hidden.png
diff --git a/판다마켓/img/visible.png b/판다마켓/img/visible.png
diff --git a/판다마켓/sub/.DS_Store b/판다마켓/sub/.DS_Store
diff --git a/판다마켓/sub/login/.DS_Store b/판다마켓/sub/login/.DS_Store
diff --git a/판다마켓/sub/login/index.html b/판다마켓/sub/login/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>로그인</title>
+    <link rel="stylesheet" href="loginstyle.css">
+</head>
+<body>
+    <!-- 파이팅~~! -->
+    <div class="modal_bg">
+        <div class="modal">
+            <span>비밀번호가 일치하지 않습니다.</span>
+            <button>확인</button>
+        </div>
+    </div>
+    <div class="inner">
+        <div class="logo">
+            <a href="../../index.html" class="logo">
+                <img src="../../img/Group 19.png" alt="판다마켓 로고">
+            </a>
+        </div>
+        <div class="login_inner">
+            <div class="e_mail">
+                <p>이메일</p>
+                <div class="box">
+                    <input id="Email" type="txt" placeholder="이메일을 입력해주세요" class="box">
+                </div>
+            </div>
+            <div class="password">
+                <p>비밀번호</p>
+                <div class="box">
+                    <input id ='password' type="password" placeholder="비밀번호를 입력해주세요" class="box">
+                    <button class="btnVisibility"><img src="/판다마켓/img/btn_hidden.png"></button>
+                </div>
+
+            </div>
+            <button class="login_bt">
+                <a href="">로그인</a>
+            </button>
+            <div class="simple_login">
+                <span>간편 로그인하기</span>
+                <div class="bts">
+                    <a href="https://www.google.co.kr/" target="_blank" class="gmail">
+                        <img src="/판다마켓/img/Component 2.png" alt="google">
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/service/service/KakaoTalk" target="_blank" class="kakaotalk">
+                        <img src="/판다마켓/img/Component 3.png" alt="kakao">
+                    </a>
+                </div>
+            </div>
+            <div class="txt">
+                <p>판다마켓이 처음이면 나가</p>
+                <a href="../signup/index.html">회원가입</a>
+            </div>
+        </div>   
+    </div>
+</div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/판다마켓/sub/login/index.js b/판다마켓/sub/login/index.js
@@ -0,0 +1,200 @@
+
+let emailInput = document.querySelector("#Email");
+let passwordInput = document.querySelector('#password');
+let loginbtn = document.querySelector('.login_bt');
+let nickName = document.querySelector('#name');
+let btnVisibility = document.querySelectorAll('.btnVisibility img')
+
+const createElement = (content, className, appendDomClass) => {
+  let newSpan = document.createElement("span");
+  newSpan.classList.add(className);
+  newSpan.textContent = content;
+  newSpan.style.color = "red";
+  document.querySelector(appendDomClass).appendChild(newSpan);
+};
+
+const hideElement = (name) => {
+  let element = document.querySelector(`.${name}`);
+  if (element) {
+    element.remove();
+  }
+};
+
+function validateEmail(email) {
+  const regExp =
+    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+  return regExp.test(email);
+}
+
+
+emailInput.addEventListener("blur", checkTargetValue);
+function checkTargetValue(e) {
+  let email = e.target.value;
+  if (e.target.value.length >= 1) {
+    e.target.style.border = "none";
+    hideElement("assd");
+  }
+  if (e.target.value.length === 0) {
+    hideElement("assd");
+    e.target.style.border = "1px solid red";
+    createElement("이메일을 입력해주세요.", "assd", ".e_mail");
+  } else {
+    if (!validateEmail(email)) {
+      hideElement("assd");
+      e.target.style.border = "1px solid red";
+      createElement("잘못된 이메일 형식입니다.", "assd", ".e_mail");
+    } else {
+      hideElement("assd");
+    }
+  }
+}
+
+
+
+
+  passwordInput.addEventListener("blur", passwordRetype);
+  function passwordRetype(e) {
+    console.log(e);
+    if (e.target.value.length === 0) {
+      hideElement("passwordTxt");
+      e.target.parentElement.style.border = "1px solid red";
+      createElement("비밀번호를 입력하세요", "passwordTxt", ".password");
+    } else{
+      if(e.target.value.length >=1 && e.target.value.length < 8){
+        e.target.style.border = '1px solid red'
+        hideElement("passwordTxt");
+        createElement("비밀번호를 8자 이상 입력하세요", "passwordTxt", ".password");
+      }else{
+        e.target.parentElement.style.border = 'none'
+        hideElement("passwordTxt");
+      };
+    }
+  } 
+
+
+//FIX
+for(let i=0; i<btnVisibility.length; i++) {
+  btnVisibility[i].addEventListener('click',showPassword);
+  function showPassword(e){
+    e.preventDefault()
+    const input =e.target.parentElement.parentElement.children[0]
+    if (input.type ==='password') {
+      input.type ='text';
+      e.target.src="/판다마켓/img/visible.png"
+    } 
+    else  {
+      input.type='password'
+      e.target.src="/판다마켓/img/btn_hidden.png"
+    }
+
+    return;
+  }
+}
+
+let eamilError = document.querySelector('.assd');
+let pwError= document.querySelector('.passwordTxt')
+
+loginbtn.addEventListener('mouseenter',() => {
+  if(eamilError === null && pwError === null && 
+    emailInput.value.length !== 0 && passwordInput.value.length !== 0){
+      loginbtn.classList.add('login_bt_change')
+    }
+
+  if(eamilError !== null || pwError !== null
+    || !validateEmail(emailInput.value) || passwordInput.value.length < 8
+  ){
+    loginbtn.classList.remove('login_bt_change')
+  }
+
+})
+
+
+const USER_DATA = [
+  { email: '[email protected]', password: "codeit101!" },
+  { email: '[email protected]', password: "codeit202!" },
+  { email: '[email protected]', password: "codeit303!" },
+  { email: '[email protected]', password: "codeit404!" },
+  { email: '[email protected]', password: "codeit505!" },
+  { email: '[email protected]', password: "codeit606!" },
+]
+
+let correctEmail = function(){
+  return USER_DATA.map(callback)
+  function callback (user) {
+    if (user.email === emailInput.value) {
+      return true
+    } else {
+      return false
+    }
+  }
+};
+
+let correctPassword = function(){
+  return USER_DATA.map(callback)
+  function callback (user) {
+    if (user.password === passwordInput.value){
+      return true
+    } else {
+      return false
+    }
+  }
+};
+
+console.log('123',correctEmail());
+console.log('ddd',correctPassword());
+
+// let modal = document.createElement('div');
+let modalAll = document.querySelector('.modal_bg');
+let modalClose = document.querySelector('.modal button');
+modalAll.classList.add('hidden');
+
+modalClose.addEventListener('click',closeModal);
+
+function modalShow(){
+  modalAll.classList.remove('hidden');
+  modalAll.classList.add('visible');
+}
+function closeModal(){
+  modalAll.classList.add('hidden');
+  modalAll.classList.remove('visible');
+}
+
+loginbtn.addEventListener('click',nobtn);
+function nobtn(e){
+  e.preventDefault();
+
+  function a(){
+    if (correctEmail().filter((arr)=> arr)[0]) {
+      // console.log('아이디가 있어요')
+      return true;
+    } else {
+      // console.log('아이디가 없어요')
+    } 
+    return;
+  }
+  function b(){
+    if(correctPassword().filter((arr) => arr)[0]){
+      // console.log('비밀번호가 있')
+      return true;
+    } else{
+      // console.log('비밀번호 없')
+    }
+    return;
+  }
+
+  if(a(), b()){
+    window.location.href = '../items.html'
+  } else if(emailInput.value.length === 0){
+    alert('이메일을 입력하세요');
+  } else if(passwordInput.value.length === 0){
+    alert('비밀번호를 입력하세요')
+  }
+  else{
+    modalAll.classList.add('visible');
+  }
+
+}
+
+
+
+
diff --git a/판다마켓/sub/login/login.html b/판다마켓/sub/login/login.html