Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[모수진] Sprint4 #69

Merged
merged 5 commits into from
Sep 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions desktop.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,65 +10,65 @@
<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>
</div>

<!-- 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>
</div>

<!-- 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>
Expand All @@ -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">
Expand Down
1 change: 0 additions & 1 deletion items.html

This file was deleted.

5 changes: 3 additions & 2 deletions login.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -52,5 +52,6 @@
<div class="signup">판다마켓이 처음이신가요? <a href="./signup.html">회원가입</a></div>
</div>
</main>
<script src="./login.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions login.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const emailForm = document.getElementById("email");
const pwdForm = document.getElementById("password");


Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

login, signup 둘 다 focus out 일때 로직을 잘 작성해주셨어요!

하지만 항상 우리 form 의 꽃은 submit 입니다! 다음번에는 submit event 를 핸들링하는 함수를 꼭 작성해봅시다 :)


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';
}
})
11 changes: 6 additions & 5 deletions signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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="비밀번호를 다시 한 번 입력해 주세요"
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validate 구현 2)
여기 input 하단에 display가 none 인 div,span 을 숨겨두는거죠.

Expand All @@ -77,5 +77,6 @@
<div class="login">이미 회원이신가요? <a href="./login.html">로그인</a></div>
</div>
</main>
<script src="./signup.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions signup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
const emailForm = document.getElementById("email");
const nickForm = document.getElementById("nickname");
const pwdForm = document.getElementById("password");
const pwdConfirmForm = document.getElementById("passwordConfirm");

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기에서 button 도 불러와서 button 의 disabled 속성을 validate 에 따라 변경해주면 button 도 금방 disable 처리 할 수 있겠죠?


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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validate 구현 1)

이렇게 validate 가 실패했을때 보통 하단에 보이지 않는 div 등을 추가해주었다가, error 가 생기면 그때 diaplay 를 보여지도록 변경하고 에러 메시지를 content 를 넣어주고! 그런형태로 해보시면 됩니다 :) 안되면 멘토링시간에 한 번 더 질문해주세요!

}
else {
event.target.style.border='0';
}
})
pwdConfirmForm.addEventListener("focusout",(event) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

focus out 보다는 blur 를 더 많이 사용하는것 같아요!

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';
}
})
28 changes: 14 additions & 14 deletions style/style_desktop.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ header {
height:70px;
padding:0;
}
.header-con {
.header-container {
float:left;
height:100%;
width:50%;
Expand Down Expand Up @@ -60,7 +60,7 @@ header {
display: flex;
justify-content: center;
}
.top-con{
.top-container {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

적절하게 네이밍을 잘 변경해주셨군요 :) 좋습니다.

width:1110px;
height:340px;
position: absolute;
Expand All @@ -83,7 +83,7 @@ header {
float:left;
width:746px;
}
#goitems {
#go-items {
width:357px;
padding:16px 124px;
border-radius: 40px;
Expand All @@ -100,7 +100,7 @@ header {
display:flex;
justify-content: center;
}
.show-con {
.show-container {
width:955px;
height:444px;
margin:0px auto;
Expand Down Expand Up @@ -134,7 +134,7 @@ header {
font-weight: 700;
line-height: 56px;
}
#show-des {
#show-descript {
font-size: 22px;
font-weight: 500;
line-height: 32px;
Expand All @@ -147,7 +147,7 @@ header {
display: flex;
justify-content: center;
}
.bottom-con{
.bottom-container {
width:1110px;
height:397px;
position: absolute;
Expand Down Expand Up @@ -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);
}

Expand All @@ -200,7 +200,7 @@ header {
#top-info {
text-align: center;
}
.footer-con {
.footer-container {
width:90%;
}
}
Expand Down Expand Up @@ -228,7 +228,7 @@ header {
display: flex;
justify-content: center;
}
.top-con {
.top-container {
width:400px;
height:100%;
justify-content: center;
Expand All @@ -240,7 +240,7 @@ header {
justify-content: center;
top:50px;
}
#goitems {
#go-items {
display: block;
margin:0 auto;
}
Expand All @@ -267,7 +267,7 @@ header {
display: flex;
justify-content: center;
}
.bottom-con {
.bottom-container {
width:400px;
height:100%;
justify-content: center;
Expand All @@ -284,7 +284,7 @@ header {
position:absolute;
bottom:0px;
}
.footer-con {
.footer-container {
width:90%;
}
}
2 changes: 1 addition & 1 deletion style/style_login.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ body {
padding:0px;
line-height: 26px;
}
.main-con {
.main-container {
margin:231px auto;
max-width:640px;
}
Expand Down
2 changes: 1 addition & 1 deletion style/style_signup.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ body {
padding:0px;
line-height: 26px;
}
.main-con {
.main-container {
margin:60px auto;
max-width:640px;
}
Expand Down
Loading