From 027a5f577deec2280a1adfe1224efb2455f5e426 Mon Sep 17 00:00:00 2001
From: April-37 <mm37april@gmail.com>
Date: Sat, 31 Aug 2024 16:30:11 +0900
Subject: [PATCH 1/5] change classname con to container

---
 desktop.html            | 24 ++++++++++++------------
 items.html              |  1 -
 login.html              |  4 ++--
 signup.html             |  4 ++--
 style/style_desktop.css | 28 ++++++++++++++--------------
 style/style_login.css   |  2 +-
 style/style_signup.css  |  2 +-
 7 files changed, 32 insertions(+), 33 deletions(-)
 delete mode 100644 items.html

diff --git a/desktop.html b/desktop.html
index 2ca9dcae..329d4c43 100644
--- a/desktop.html
+++ b/desktop.html
@@ -10,21 +10,21 @@
     <div id="wrapper">
       <header>
         <div class="header">
-          <div class="header-con"><a href="/"><img src="./image/md.png" class="header-logo" alt="판다마켓"></a></div>
-          <div class="header-con"><input type="button" value="로그인" class="login" onClick="location.href='login.html'"></div>
+          <div class="header-container"><a href="/"><img src="./image/md.png" class="header-logo" alt="판다마켓"></a></div>
+          <div class="header-container"><input type="button" value="로그인" class="login" onClick="location.href='login.html'"></div>
         </div>
       </header>
   
       <main>
         <!-- main_top -->
         <div class="home-top">
-          <div class="top-con">
+          <div class="top-container">
             <div id="top-left">
               <div id="top-info">
                 일상의 모든 물건을<br>
                 거래해 보세요<br>
               </div>
-              <br><input id="goitems" type="button" value="구경하러 가기" onclick="location.href='items.html'">
+              <br><input id="go-items" type="button" value="구경하러 가기" onclick="location.href='items.html'">
             </div>
             <div id="top-img"><img src="./image/Img_home_top.png"></div>
           </div>
@@ -32,23 +32,23 @@
   
         <!-- main_show1 -->
         <div class="show">
-          <div class="show-con" id="show1">
+          <div class="show-container" id="show1">
             <div class="show-img"><img src="./image/Img_home_01.png"></div>
             <div class="show-info">
               <p id="show-title">Hot item</p>
               <p id="show-main">인기 상품을<br>확인해 보세요</p>
-              <p id="show-des">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+              <p id="show-descript">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
             </div>
           </div>
         </div>
   
         <!-- main_show2 -->
         <div class="show">
-          <div class="show-con" id="show2">
+          <div class="show-container" id="show2">
             <div class="show-info">
               <p id="show-title">Search</p>
               <p id="show-main">구매를 원하는<br>상품을 검색하세요</p>
-              <p id="show-des">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+              <p id="show-descript">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
             </div>
             <div class="show-img"><img src="./image/Img_home_02.png"></div>
           </div>
@@ -56,19 +56,19 @@
   
         <!-- main_show3 -->
         <div class="show">
-          <div class="show-con" id="show3">
+          <div class="show-container" id="show3">
             <div class="show-img"><img src="./image/Img_home_03.png"></div>
             <div class="show-info">
               <p id="show-title">Register</p>
               <p id="show-main">판매를 원하는<br>상품을 등록하세요</p>
-              <p id="show-des">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+              <p id="show-descript">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
             </div>
           </div>
         </div>
   
         <!-- main_bottom -->
         <div class="home-bottom">
-          <div class="bottom-con">
+          <div class="bottom-container">
             <div id="bottom-left">
               <div id="bottom-info">
                 믿을 수 있는<br>
@@ -82,7 +82,7 @@
   
       <footer>
         <div class="footer">
-          <div class="footer-con">
+          <div class="footer-container">
             <div class="footer-text">@codeit - 2024</div>
             <div class="footer-text"><a href="./privacy.html">Privacy Policy</a> &emsp; <a href="./faq.html">FAQ</a></div>
             <div class="footer-text">
diff --git a/items.html b/items.html
deleted file mode 100644
index 0021f0b2..00000000
--- a/items.html
+++ /dev/null
@@ -1 +0,0 @@
-Item page.
\ No newline at end of file
diff --git a/login.html b/login.html
index c0a5e82e..207b2227 100644
--- a/login.html
+++ b/login.html
@@ -8,12 +8,12 @@
   </head>
   <body>
     <main>
-      <div class="main-con">
+      <div class="main-container">
         <div class="logo">
           <img src="./image/lg.png">
         </div>
         <form method="post">
-          <div class="input-con">
+          <div class="input-container">
             <div class="input-item">
               <label for="email">이메일</label>
               <input
diff --git a/signup.html b/signup.html
index 8445077f..1451695f 100644
--- a/signup.html
+++ b/signup.html
@@ -8,12 +8,12 @@
   </head>
   <body>
     <main>
-      <div class="main-con">
+      <div class="main-container">
         <div class="logo">
           <img src="./image/lg.png">
         </div>
         <form method="post">
-          <div class="input-con">
+          <div class="input-container">
             <div class="input-item">
               <label for="email">이메일</label>
               <input
diff --git a/style/style_desktop.css b/style/style_desktop.css
index 74c36852..d5b69509 100644
--- a/style/style_desktop.css
+++ b/style/style_desktop.css
@@ -26,7 +26,7 @@ header {
   height:70px;
   padding:0;
 }
-.header-con {
+.header-container {
   float:left;
   height:100%;
   width:50%;
@@ -60,7 +60,7 @@ header {
   display: flex;
   justify-content: center;
 }
-.top-con{
+.top-container {
   width:1110px;
   height:340px;
   position: absolute;
@@ -83,7 +83,7 @@ header {
   float:left;
   width:746px;
 }
-#goitems {
+#go-items {
   width:357px;
   padding:16px 124px;
   border-radius: 40px;
@@ -100,7 +100,7 @@ header {
   display:flex;
   justify-content: center;
 }
-.show-con {
+.show-container {
   width:955px;
   height:444px;
   margin:0px auto;
@@ -134,7 +134,7 @@ header {
   font-weight: 700;
   line-height: 56px;
 }
-#show-des {
+#show-descript {
   font-size: 22px;
   font-weight: 500;
   line-height: 32px;
@@ -147,7 +147,7 @@ header {
   display: flex;
   justify-content: center;
 }
-.bottom-con{
+.bottom-container {
   width:1110px;
   height:397px;
   position: absolute;
@@ -176,16 +176,16 @@ header {
   background-color: var(--gray900);
   padding-top: 32px;
 }
-.footer-con {
+.footer-container {
   width:1120px;
   margin:0px auto;
   display:flex;
   justify-content: space-between;
 }
-.footer-con .footer-text {
+.footer-container .footer-text {
   color:var(--gray400);
 }
-.footer-con .footer-text a {
+.footer-container .footer-text a {
   color:var(--gray200);
 }
 
@@ -200,7 +200,7 @@ header {
   #top-info {
     text-align: center;
   }
-  .footer-con {
+  .footer-container {
     width:90%;
   }
 }
@@ -228,7 +228,7 @@ header {
     display: flex;
     justify-content: center;
   }
-  .top-con {
+  .top-container {
     width:400px;
     height:100%;
     justify-content: center;
@@ -240,7 +240,7 @@ header {
     justify-content: center;
     top:50px;
   }
-  #goitems {
+  #go-items {
     display: block;
     margin:0 auto;
   }
@@ -267,7 +267,7 @@ header {
     display: flex;
     justify-content: center;
   }
-  .bottom-con {
+  .bottom-container {
     width:400px;
     height:100%;
     justify-content: center;
@@ -284,7 +284,7 @@ header {
     position:absolute;
     bottom:0px;
   }
-  .footer-con {
+  .footer-container {
     width:90%;
   }
 }
\ No newline at end of file
diff --git a/style/style_login.css b/style/style_login.css
index 1cec147f..1508624b 100644
--- a/style/style_login.css
+++ b/style/style_login.css
@@ -5,7 +5,7 @@ body {
   padding:0px;
   line-height: 26px;
 }
-.main-con {
+.main-container {
   margin:231px auto;
   max-width:640px;
 }
diff --git a/style/style_signup.css b/style/style_signup.css
index dd74be1b..2af212eb 100644
--- a/style/style_signup.css
+++ b/style/style_signup.css
@@ -5,7 +5,7 @@ body {
   padding:0px;
   line-height: 26px;
 }
-.main-con {
+.main-container {
   margin:60px auto;
   max-width:640px;
 }

From f25a587f00f7e6e29f5dd7462ee1306559e392fe Mon Sep 17 00:00:00 2001
From: April-37 <mm37april@gmail.com>
Date: Sat, 31 Aug 2024 22:41:02 +0900
Subject: [PATCH 2/5] add login.js

---
 login.html | 1 +
 login.js   | 0
 2 files changed, 1 insertion(+)
 create mode 100644 login.js

diff --git a/login.html b/login.html
index 207b2227..e47ccea3 100644
--- a/login.html
+++ b/login.html
@@ -5,6 +5,7 @@
     <title>로그인</title>
     <link rel="stylesheet" href="./style/style_color.css">
     <link rel="stylesheet" href="./style/style_login.css">
+    <script src="./login.js"></script>
   </head>
   <body>
     <main>
diff --git a/login.js b/login.js
new file mode 100644
index 00000000..e69de29b

From 0e9b0fce814f37a7ffef75327e6dcdc5ba23945f Mon Sep 17 00:00:00 2001
From: April-37 <mm37april@gmail.com>
Date: Sat, 31 Aug 2024 23:38:49 +0900
Subject: [PATCH 3/5] add input eventListener

---
 login.html |  2 +-
 login.js   | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/login.html b/login.html
index e47ccea3..cc6041ed 100644
--- a/login.html
+++ b/login.html
@@ -5,7 +5,6 @@
     <title>로그인</title>
     <link rel="stylesheet" href="./style/style_color.css">
     <link rel="stylesheet" href="./style/style_login.css">
-    <script src="./login.js"></script>
   </head>
   <body>
     <main>
@@ -53,5 +52,6 @@
         <div class="signup">판다마켓이 처음이신가요? <a href="./signup.html">회원가입</a></div>
       </div>
     </main>
+    <script src="./login.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/login.js b/login.js
index e69de29b..c7f7b238 100644
--- a/login.js
+++ b/login.js
@@ -0,0 +1,28 @@
+const emailForm = document.getElementById("email");
+const pwdForm = document.getElementById("password");
+
+
+
+emailForm.addEventListener("focusout", (event) => {
+  var emailValue=emailForm.value;
+  if(emailValue == '') {
+    event.target.style.border='1px solid var(--red)';
+    //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
+pwdForm.addEventListener("focusout",(event) => {
+  var pwdValue=pwdForm.value;
+  if(pwdValue == '') {
+    event.target.style.border='1px solid var(--red)';
+    // todo: print error message
+  }
+  else if(pwdValue.length < 8 ) {
+    event.target.style.border='1px solid var(--red)'; //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
\ No newline at end of file

From 643a434668d11a48a5dd9713b5b8e6575de733e7 Mon Sep 17 00:00:00 2001
From: April-37 <mm37april@gmail.com>
Date: Sat, 31 Aug 2024 23:39:12 +0900
Subject: [PATCH 4/5] add signup.js

---
 signup.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 signup.js

diff --git a/signup.js b/signup.js
new file mode 100644
index 00000000..e2dfb6e1
--- /dev/null
+++ b/signup.js
@@ -0,0 +1,50 @@
+const emailForm = document.getElementById("email");
+const nickForm = document.getElementById("nickname");
+const pwdForm = document.getElementById("password");
+const pwdConfirmForm = document.getElementById("passwordConfirm");
+
+
+emailForm.addEventListener("focusout", (event) => {
+  var emailValue=emailForm.value;
+  if(emailValue == '') {
+    event.target.style.border='1px solid var(--red)';
+    //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
+nickForm.addEventListener("focusout",(event) => {
+  var nickValue=nickForm.value;
+  if(nickValue == '') {
+    event.target.style.border='1px solid var(--red)';
+    //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
+pwdForm.addEventListener("focusout",(event) => {
+  var pwdValue=pwdForm.value;
+  if(pwdValue == '') {
+    event.target.style.border='1px solid var(--red)';
+    // todo: print error message
+  }
+  else if(pwdValue.length < 8 ) {
+    event.target.style.border='1px solid var(--red)'; //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
+pwdConfirmForm.addEventListener("focusout",(event) => {
+  var pwdValue=pwdForm.value;
+  var pwdConfirmValue=pwdConfirmForm.value;
+  if(pwdValue!=pwdConfirmValue) {
+    event.target.style.border='1px solid var(--red)';
+    //todo: print error message
+  }
+  else {
+    event.target.style.border='0';
+  }
+})
\ No newline at end of file

From 6afba4b1d67387f7d87dca3bb74434a27035eed8 Mon Sep 17 00:00:00 2001
From: April-37 <mm37april@gmail.com>
Date: Sat, 31 Aug 2024 23:40:04 +0900
Subject: [PATCH 5/5] connet javascript

---
 signup.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/signup.html b/signup.html
index 1451695f..2736b40f 100644
--- a/signup.html
+++ b/signup.html
@@ -49,11 +49,11 @@
               </div>
             </div>
             <div class="input-item">
-              <label for="passwordConfirmation">비밀번호 확인</label>
+              <label for="passwordConfirm">비밀번호 확인</label>
               <div class="input-wrapper">
                 <input
-                  id="passwordConfirmation"
-                  name="passwordConfirmation"
+                  id="passwordConfirm"
+                  name="passwordConfirm"
                   type="password"
                   placeholder="비밀번호를 다시 한 번 입력해 주세요"
                 />
@@ -77,5 +77,6 @@
         <div class="login">이미 회원이신가요? <a href="./login.html">로그인</a></div>
       </div>
     </main>
+    <script src="./signup.js"></script>
   </body>
 </html>
\ No newline at end of file