[김혜선] Sprint4 #124
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| // const inputs = document.querySelector('input'); | ||
| // const errorMessage = document.createElement('p'); | ||
| // errorMessage.classList.add('error'); | ||
| // const inputEmail = document.querySelector('#login-email'); | ||
| // const inputPw = document.querySelector('#login-password'); | ||
| //const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; | ||
|
|
||
| // function noContent() { | ||
| // if(this.value === '') { | ||
| // this.classList.add('error-border'); | ||
| // this.after(errorMessage); | ||
| // errorMessage.append(this.placeholder); | ||
| // } else { | ||
| // this.classList.remove('error-border'); | ||
| // errorMessage.remove(); | ||
| // } | ||
| // }; | ||
|
|
||
| // function validateEmail(email) { | ||
| // const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| // if (regex.test(inputEmail)) { | ||
| // alert("The email address is valid."); | ||
| // } else { | ||
| // alert("The email address is invalid."); | ||
| // } | ||
| // } | ||
|
|
||
| // inputEmail.addEventListener('focusout', function() { | ||
| // if(this.value === '') { | ||
| // this.classList.add('error-border'); | ||
| // this.after(errorMessage); | ||
| // errorMessage.append(this.placeholder); | ||
| // } else if(validEmailCheck(this) == false) { | ||
| // this.classList.remove('error-border'); | ||
| // errorMessage.remove(); | ||
| // }; | ||
| // }); | ||
|
|
||
| // function validEmailCheck(obj) { | ||
| // const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; | ||
| // return (obj.value.match(pattern) != null); | ||
| // } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // password show, hide | ||
|
|
||
| const pwToggle = document.querySelector('#viewToggle'); | ||
| const toggleImg = document.querySelector('.toggle-img'); | ||
|
|
||
|
|
||
| pwToggle.addEventListener('click', () => { | ||
| if(pwToggle.className === 'hide') { | ||
| pwToggle.className = 'show'; | ||
| toggleImg.src = 'images/btn_visibility_on.svg'; | ||
| toggleImg.alt = '비밀번호 보이기'; | ||
| inputPw.type = 'text'; | ||
| } else { | ||
| pwToggle.className = 'hide'; | ||
| toggleImg.src = 'images/btn_visibility_off.svg'; | ||
| inputPw.type = 'password'; | ||
| toggleImg.alt = '비밀번호 가리기'; | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| const submitBtn = document.getElementsByClassName('submit-btn'); | ||
|
|
||
|
|
||
|
|
||
|
|
||
| function validateForm() { | ||
| if (email == '' || password == '') { | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| if (!emailRegex.test(email)) { | ||
| alert('올바른 ㅌㅌㅌ'); | ||
| return false; | ||
| } else { | ||
|
|
||
| } | ||
|
|
||
| submitBtn.classList.remove('disabled'); | ||
| return true; | ||
| }; | ||
|
|
||
|
|
||
|
|
||
| // const form = document.getElementById('login-form'); | ||
|
|
||
| // form.addEventListener('focusout', (event) => { | ||
| // const targetInput = event.target; | ||
| // if (targetInput.value == '') { | ||
| // targetInput.classList.add('error-border'); | ||
| // const errorTxtbox = document.createElement('p'); | ||
| // errorTxtbox.classList.add('error-txt'); | ||
| // const errorTxt = targetInput.placeholder; | ||
| // targetInput.after(errorTxtbox); | ||
| // errorTxtbox.append(errorTxt); | ||
| // } else { | ||
| // targetInput.classList.remove('error-border'); | ||
| // targetInput.nextSibling.remove(); | ||
| // } | ||
| // }); | ||
|
|
||
|
|
||
|
|
||
| // inputEmail.addEventListener('focusout', () => { | ||
| // if(email == '') { | ||
| // inputEmail.classList.add('error-border'); | ||
| // } else { | ||
| // inputEmail.classList.remove('error-border'); | ||
| // } | ||
|
|
||
| // }); | ||
|
|
||
| // inputEmail.addEventListener('focusin', function() { | ||
| // const errorTxt = inputEmail.nextSibling.remove(); | ||
| // }) | ||
|
|
||
| // const errorBox = document.createElement('p'); | ||
| // inputEmail.after(errorBox); | ||
| // errorBox.append(inputEmail.placeholder); | ||
|
|
||
|
|
||
|
|
||
| const pwToggle = document.querySelector('#viewToggle'); | ||
| const toggleImg = document.querySelector('.toggle-img'); | ||
|
|
||
|
|
||
| pwToggle.addEventListener('click', () => { | ||
| if(pwToggle.className === 'hide') { | ||
| pwToggle.className = 'show'; | ||
| toggleImg.src = 'images/btn_visibility_on.svg'; | ||
| toggleImg.alt = '비밀번호 보이기'; | ||
| inputPw.type = 'text'; | ||
| } else { | ||
| pwToggle.className = 'hide'; | ||
| toggleImg.src = 'images/btn_visibility_off.svg'; | ||
| inputPw.type = 'password'; | ||
| toggleImg.alt = '비밀번호 가리기'; | ||
| } | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| //errMsg | ||
| const errMsg = { | ||
|
Contributor
There was a problem hiding this comment. 상수의 경우 ERR_MSG로 표현해주면 좋아요. |
||
| email: { | ||
| none: "이메일을 입력해주세요.", | ||
| invalid: "잘못된 이메일 형식입니다." | ||
| }, | ||
| pw: { | ||
| none: "비밀번호를 입력해주세요.", | ||
| invalid: "비밀번호를 8자 이상 입력해주세요." | ||
| } | ||
| }; | ||
|
|
||
| // email validChk | ||
| function emailValidChk(email) { | ||
|
Contributor
There was a problem hiding this comment. validateEmail 같은 함수 이름이 좋을 것 같아요. |
||
| const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; | ||
| if(pattern.test(email) === false) { | ||
| return false; | ||
| } else { | ||
| return true; | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| // email error | ||
| const inputEmail = document.getElementById('login-email'); | ||
| inputEmail.addEventListener('focusout', () => { | ||
| const errorTxtbox = document.createElement('p'); | ||
| errorTxtbox.classList.add('error-txt'); | ||
| if (inputEmail.value == '') { | ||
| inputEmail.classList.add('error-border'); | ||
| inputEmail.after(errorTxtbox); | ||
| errorTxtbox.textContent = errMsg.email.none; | ||
| } else if (emailValidChk(inputEmail.value) === false) { | ||
| inputEmail.classList.add('error-border'); | ||
| inputEmail.after(errorTxtbox); | ||
| errorTxtbox.textContent = errMsg.email.invalid; | ||
| } else { | ||
| inputEmail.classList.remove('error-border'); | ||
| inputEmail.nextSibling.remove(); | ||
| } | ||
| }); | ||
|
|
||
| inputEmail.addEventListener('focusin',() => { | ||
| inputEmail.nextSibling.remove(); | ||
| }); | ||
|
|
||
|
|
||
| // pw error | ||
| const inputPw = document.getElementById('login-password'); | ||
| inputPw.addEventListener('focusout', () => { | ||
| const errorTxtbox = document.createElement('p'); | ||
| errorTxtbox.classList.add('error-txt'); | ||
| if (inputPw.value == '') { | ||
| inputPw.classList.add('error-border'); | ||
| inputPw.parentElement.after(errorTxtbox); | ||
| errorTxtbox.textContent = errMsg.pw.none; | ||
| } else if (inputPw.value.length < 8) { | ||
| inputPw.classList.add('error-border'); | ||
| inputPw.parentElement.after(errorTxtbox); | ||
| errorTxtbox.textContent = errMsg.pw.invalid; | ||
| } else { | ||
| inputPw.classList.remove('error-border'); | ||
| inputPw.parentElement.nextSibling.remove(); | ||
| } | ||
| }); | ||
|
|
||
| inputPw.addEventListener('focusin',() => { | ||
| inputPw.parentElement.nextSibling.remove(); | ||
| }); | ||
|
|
||
|
|
||
| // submit-btn disable, able | ||
| const submitBtn = document.querySelector('.submit-btn'); | ||
| function btnAble() { | ||
|
Contributor
There was a problem hiding this comment. 동사로 시작하는 함수 이름이 좋아요. |
||
| const email = inputEmail.value; | ||
| const pw = inputPw.value; | ||
| if(email && pw != '' && emailValidChk(email) === true && pw.length > 7) { | ||
| submitBtn.disabled = false; | ||
| submitBtn.classList.add('abled'); | ||
| } else { | ||
| submitBtn.disabled = true; | ||
| submitBtn.classList.remove('abled'); | ||
| } | ||
| }; | ||
|
|
||
| const form = document.getElementsByTagName('form'); | ||
| const inputs = document.getElementsByTagName('input'); | ||
| for ( let i = 0; i < inputs.length; i++ ) { | ||
| inputs[i].addEventListener('focusout', btnAble); | ||
| }; | ||
|
|
||
|
|
||
| // password show, hide | ||
| const pwToggle = document.querySelectorAll('#viewToggle'); | ||
| const toggleImg = document.getElementsByClassName('toggle-img'); | ||
| const inputPwtoggle = document.getElementsByClassName('password'); | ||
|
|
||
| for (let i = 0; i < pwToggle.length; i++) { | ||
| pwToggle[i].addEventListener('click', (e) => { | ||
| if(pwToggle[i].className === 'hide') { | ||
| pwToggle[i].className = 'show'; | ||
| toggleImg[i].src = 'images/btn_visibility_on.svg'; | ||
| toggleImg[i].alt = '비밀번호 보이기'; | ||
| inputPwtoggle[i].type = "text"; | ||
| } else { | ||
| pwToggle[i].className = 'hide'; | ||
| toggleImg[i].src = 'images/btn_visibility_off.svg'; | ||
| inputPwtoggle[i].type = 'password'; | ||
| toggleImg[i].alt = '비밀번호 가리기'; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| // move | ||
| function goItems() { | ||
| let link = '../items.html'; | ||
| location.href = link; | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
필요하다고 생각하는 값 css 변수로 만들어 관리하는 것 좋아요~👍