Skip to content

Commit

Permalink
project3 first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@eomsung
eomsung committed Nov 10, 2024
1 parent 8b289c6 commit 4abfb32
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 21 deletions.
4 changes: 2 additions & 2 deletions project/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<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">
Expand Down
90 changes: 89 additions & 1 deletion project/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ icons.forEach(icon => {

// 버튼 색깔 활성화
let button = document.querySelector('#section1_button');
let inputbox = document.querySelectorAll('#section1 input')
let inputbox = document.querySelectorAll('#section1 input');


function checkinput(){
let check =true;
inputbox.forEach(input => {
Expand All @@ -37,6 +39,92 @@ function checkinput(){
button.style.backgroundColor ='#9CA3AF';
}
}

inputbox.forEach(input=>{
input.addEventListener('input',checkinput);
});
//
let email_check =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
let pw_check=/^.{8,}/;
//로그인 버튼 checkout 됬을때
inputbox.forEach(input=>{
input.addEventListener('focus',()=>{
input.style.border = '0.125rem solid #3692FF';
});
input.addEventListener('blur',function(){
console.log(input.id);
if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
if(input.value===''){ // 아무것도 입력 안하면
if(!input.nextElementSibling){
input.style.border = '0.125rem solid red';
let alret_msg = document.createElement('div');
alret_msg.textContent = '이메일을 입력해주세요.';
alret_msg.className = 'alert';
input.parentElement.append(alret_msg);
}
else{
input.style.border = '0.125rem solid red';
input.nextElementSibling.textContent='이메일을 입력해주세요.';
}
}
else if(!email_check.test(input.value)){
if(!input.nextElementSibling) {
input.style.border = '0.125rem solid red';
let alret_msg = document.createElement('div');
alret_msg.textContent = '잘못된 이메일 형식입니다.';
alret_msg.className = 'alert';
input.parentElement.append(alret_msg);
}
else{
input.style.border = '0.125rem solid red';
input.nextElementSibling.textContent='잘못된 이메일 형식입니다.';
}
}
else if(email_check.test(input.value)){
if(input.nextElementSibling) {
input.nextElementSibling.remove();
input.style.border = 'none';
}
}
}

else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
if(input.value===''){ // 아무것도 입력 안하면
console.log(input.nextElementSibling);
if(!input.nextElementSibling){
input.style.border = '0.125rem solid red';
let alret_msg = document.createElement('div');
alret_msg.textContent = '비밀번호를 입력해주세요.';
alret_msg.className = 'alert';
input.parentElement.append(alret_msg);
}
else{
input.style.border = '0.125rem solid red';
input.nextElementSibling.textContent='비밀번호를 입력해주세요.';
}
}
else if(!pw_check.test(input.value)){
// if(!input.nextElementSibling) {
input.style.border = '0.125rem solid red';
let alret_msg = document.createElement('div');
alret_msg.textContent = '비밀번호를 8자 이상 입력해주세요.';
alret_msg.className = 'alert';
console.log(input.parentElement.parentElement);
input.parentElement.parentElement.append(alret_msg);
// }
// else{
// input.style.border = '0.125rem solid red';
// input.nextElementSibling.textContent='비밀번호를 8자 이상 입력해주세요.';
// }
}
else if(pw_check.test(input.value)){
if(input.nextElementSibling) {
input.nextElementSibling.remove();
input.style.border = 'none';
}
}
}


})
})
12 changes: 6 additions & 6 deletions project/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@
<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>
Expand Down
30 changes: 18 additions & 12 deletions project/style_login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@ body {
font-size: 1.125rem; /* 18px */
font-weight: 700;
width: 100%;
height: 6.125rem; /* 98px */
/* height: 6.125rem; 98px */
color: var(--text-color-dark);
display: flex;
flex-direction: column;
justify-content: space-between;
}

#section1_emailbox {
#section1_emailbox , #section1_nicknamebox {
background-color: var(--box-background-color);
width: 40rem; /* 640px */
height: 3.5rem; /* 56px */
Expand All @@ -63,6 +63,7 @@ body {
box-sizing: border-box;
}


.password-container {
position: relative;
display: flex;
Expand All @@ -79,12 +80,8 @@ input[type="password"]::-ms-clear {
display: none;
}

#section1_emailbox:focus {
border: 0.125rem solid var(--input-focus-color); /* 2px */
outline: none;
}

#section1_pwbox {
#section1_pwbox , #section1_pwcheckbox {
background-color: var(--box-background-color);
width: 40rem; /* 640px */
height: 3.5rem; /* 56px */
Expand All @@ -98,11 +95,6 @@ input[type="password"]::-ms-clear {
box-sizing: border-box;
}

#section1_pwbox:focus {
border: 0.125rem solid var(--input-focus-color); /* 2px */
outline: none;
}

#section1_button {
width: 100%;
height: 3.5rem; /* 56px */
Expand Down Expand Up @@ -157,3 +149,17 @@ input[type="password"]::-ms-clear {
.login_text{
color: var(--button-active-color);
}


.box_name{
margin-bottom: 1rem;
}

.alert{
color: #F74747;
font-size: 0.9375rem;
line-height: 1.11875rem;
font-weight: 600;
margin-top: 0.5rem;
margin-left: 1rem;
}

0 comments on commit 4abfb32

Please sign in to comment.