Skip to content

Commit

Permalink
Merge pull request #28 from eomsung/basic-엄성민-sprint3
Browse files Browse the repository at this point in the history 
Basic 엄성민 sprint3
  • Loading branch information
@seobew
seobew authored Nov 17, 2024
2 parents 64523de + db47e36 commit 6d750ec
Show file tree
Hide file tree
Showing 5 changed files with 394 additions and 34 deletions.
14 changes: 11 additions & 3 deletions project/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,28 @@
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
</head>
<body>
<div class="modal hidden">
<div class="error_msg">
<p>비밀번호가 일치하지 않습니다.</p>
<button type="button" id="error_msg_button">확인</button>
</div>
</div>


<div id="box">
<a id="section0" href="index.html"></a>

<form id="section1">
<label class="section1_box">이메일
<label class="section1_box"><span class="box_name">이메일</span>
<input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
</label>
<label class="section1_box">비밀번호
<label class="section1_box"><span class="box_name">비밀번호</span>
<div class="password-container">
<input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
<img src="img/btn_visibility_off.png" class="icon_eyes">
</div>
</label>
<button id="section1_button">로그인</button>
<button type="button" id="section1_button" disabled>로그인</button>

<div id="section1_social">
<div id="section1_socialinner">
Expand Down
136 changes: 125 additions & 11 deletions project/login.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@

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!" },
]


// 비밀번호 암호화 해제/설정 버튼
Expand All @@ -20,23 +27,130 @@ icons.forEach(icon => {
});


// 버튼 색깔 활성화
// 변수들
let button = document.querySelector('#section1_button');
let inputbox = document.querySelectorAll('#section1 input')
function checkinput(){
let check =true;
inputbox.forEach(input => {
if(input.value === ''){
check=false
let inputbox = document.querySelectorAll('#section1 input');
const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
const pw_pattern=/^.{8,}/;
let email_check =false;//형식이 올바른지 확인
let pw_check =false;//형식이 올바른지 확인
let modal =document.querySelector('.modal');
let error_button = document.querySelector('#error_msg_button');





const make_alret_msg = (input,text)=>{
let box = input.closest('.section1_box')
if(!box.querySelector('.alert')){
input.style.border = '0.125rem solid red';
let alert_msg = document.createElement('div');
alert_msg.textContent = text;
alert_msg.className = 'alert';
box.append(alert_msg);

}
else{
input.style.border = '0.125rem solid red';
box.querySelector('.alert').textContent = text;
}
}


//입력 값이 올바른지 체크
inputbox.forEach(input=>{
input.addEventListener('blur',function(){
if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
if(input.value===''){ // 아무것도 입력 안하면
make_alret_msg(input,'이메일을 입력해주세요.');
}
else if(!email_pattern.test(input.value)){
make_alret_msg(input,'잘못된 이메일 형식입니다.');
}
else if(email_pattern.test(input.value)){
if(input.parentElement.querySelector('.alert')) {
input.parentElement.querySelector('.alert').remove();
}
input.style.border = 'none';
}
}
});
if(check === true){

else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
if(input.value===''){ // 아무것도 입력 안하면
make_alret_msg(input,'비밀번호를 입력해주세요.');

}
else if(!pw_pattern.test(input.value)){
make_alret_msg(input,'비밀번호를 8자 이상 입력해주세요.');
}
else if(pw_pattern.test(input.value)){
if(input.closest('.section1_box').querySelector('.alert')) {
input.closest('.section1_box').querySelector('.alert').remove();
}
input.style.border = 'none';
}
}
})
})

const check_input= () =>{

if(pw_check === true && email_check === true){
button.style.backgroundColor ='#3692FF';
button.disabled = false;
}
else{
button.style.backgroundColor ='#9CA3AF';
button.disabled = true;
}
}

inputbox.forEach(input=>{
input.addEventListener('input',checkinput);
input.addEventListener('input',()=>{
console.log(input.value);
if(input.id === "section1_emailbox"){
if(email_pattern.test(input.value)){
email_check=true;
// if(input.value)
}
else{
email_check=false;
}
}

else if(input.id === "section1_pwbox"){
if(pw_pattern.test(input.value)){
pw_check = true;
}
else{
pw_check = false;
}
}
})
input.addEventListener('focus',()=>{
input.style.border = '0.125rem solid #3692FF';
});

input.addEventListener('input',check_input);

});

button.addEventListener('click',()=>{
const email_input = document.querySelector('#section1_emailbox').value;
const pw_input = document.querySelector('#section1_pwbox').value;
const user_exist = USER_DATA.some(user => user.email === email_input && user.password === pw_input);
if(pw_check === true && email_check === true ){
if(!user_exist){
modal.classList.remove('hidden');
}
else{
location.href = 'items.html';
}
}
});


error_button.addEventListener('click',()=>{
modal.classList.add('hidden');
})
23 changes: 15 additions & 8 deletions project/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,36 @@
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
</head>
<body>
<div class="modal hidden">
<div class="error_msg">
<p>사용 중인 이메일입니다.</p>
<button type="button" id="error_msg_button">확인</button>
</div>
</div>

<div id="box">
<a id="section0" href="index.html"></a>

<form id="section1">
<label class="section1_box">이메일
<label class="section1_box"><span class="box_name">이메일</span>
<input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
</label>
<label class="section1_box">닉네임
<input name="nickname" placeholder="닉네임을 입력해주세요" id="section1_emailbox" required>
<label class="section1_box"><span class="box_name">닉네임</span>
<input name="nickname" placeholder="닉네임을 입력해주세요" id="section1_nicknamebox" required>
</label>
<label class="section1_box">비밀번호
<label class="section1_box"><span class="box_name">비밀번호</span>
<div class="password-container">
<input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
<img src="img/btn_visibility_off.png" class="icon_eyes">
</div>
</label>
<label class="section1_box">비밀번호 확인
<label class="section1_box"><span class="box_name">비밀번호 확인</span>
<div class="password-container">
<input type="password" name="password" placeholder="비밀번호를 다시 한 번 입력해주세요" id="section1_pwbox" required>
<input type="password" name="password" placeholder="비밀번호를 다시 한 번 입력해주세요" id="section1_pwcheckbox" required>
<img src="img/btn_visibility_off.png" class="icon_eyes">
</div>
</label>
<button id="section1_button">회원가입</button>
<button type="button" id="section1_button">회원가입</button>

<div id="section1_social">
<div id="section1_socialinner">
Expand All @@ -50,6 +57,6 @@
</div>
</form>
</div>
<script src="login.js"></script>
<script src="signup.js"></script>
</body>
</html>
Loading

0 comments on commit 6d750ec

Please sign in to comment.