Toy Project 04 인스타그램 클론..!
마지막 바닐라자바스크립트 코딩이 될 것 같은 인스타 클론..!
✨ 로그인 페이지 만들기 ✨
✏️ 로그인 버튼 활성화하기
const loginForm = document.querySelector('.loginForm');
const inputLogin = document.querySelectorAll('input');
const inputID = document.querySelectorAll('input')[0];
const inputPW = document.querySelectorAll('input')[1];
const loginBtn = document.querySelector('.login.btn');
function active() {
if (inputID.value && inputPW.value) {
loginBtn.removeAttribute('disabled');
loginBtn.classList.add('active');
} else {
loginBtn.setAttribute('disabled', 'disabled');
loginBtn.classList.remove('active')
}
};
inputID.addEventListener('input', active);
inputPW.addEventListener('input', active);
-
removeAttribute
와setAttribute
를 사용하여 조건에 따라 disabled를 주었다.
-> 처음에toggleAttribute
를 사용했다가, input event에 걸어놓아서 값이 입력될때마다 활성화와 비활성화가 반복되었다. -
처음에는 로그인 버튼색상을 inline 스타일 속성으로 변경하였는데, 이는 html과 css를 분리하지 않는 방법이므로 class를 추가하는 방법으로 수정했다.
-
현재는 각각의 input요소에 addEventListner를 걸어 놓아서 두번 함수를 실행시켰으나, 반복문을 사용해서 중복을 줄일 수 있다. -> 후에 form에 event를 걸어서 더 간결하게 리펙토링되었다.
✏️ label 위치 옮기기
const descriptionID = document.querySelectorAll('.form-description')[0];
const descriptionPW = document.querySelectorAll('.form-description')[1];
function moveToUpside(inputType, descriptionType) {
if (inputType.value) {
descriptionType.classList.add('focused');
inputType.classList.add('entered');
} else {
descriptionType.classList.remove('focused');
inputType.classList.remove('entered');
}
};
inputID.addEventListener('input', () => {moveToUpside(inputID, descriptionID)});
- input마다 addEventListner를 따로 부여했다가 -> 같은 구조여서 따로 함수로 빼고싶어서 -> moveToUpside함수를 재정의해서 id 또는 pw를 인자를 다시 받아서 실행했다가..! 다시.. 바꿈.. 나는 무엇을 하는가..
Author And Source
이 문제에 관하여(Toy Project 04 인스타그램 클론..!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@celline1637/toy-인스타그램-클론저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)