TIL 7 | Westagram _ Login Page

지금까지는 단순하게 HTML, CSS, JavaScript 를 따로따로 생각하다가,
처음으로 다 합쳐서 소소하게 나마 인스타그램 클론을 해보았다.

기능구현

ID 나 Password 에 각각 최소 한글자 이상 입력해야 로그인 버튼기능 활성화
되기.

사실상 HTML 과 CSS 는 워낙 재미있어 하기도 해서 크게 어려움은 느끼지 못했지만,
아직은 낮선 JavaScript 로 기능을 구현해 보려니 !!!!😳
막막함이 먼저 찾아왔다.호호

ﾍ(=￣∇￣)ﾉ

JavaScript Code

const loginId = document.getElementsByClassName('login_id')[0];
const loginPassword = document.getElementsByClassName('login_password')[0];
const loginButton = document.getElementsByClassName('login_btn')[0];
const inputwrap = document.getElementsByClassName('inputwrap')[0];

function buttonChangeColor(){    
    if( loginId.value && loginPassword.value ){
        console.log(loginPassword.value)
        loginButton.setAttribute('disabled',false);
        loginButton.style.backgroundColor = '#0095F6';
    }else{
        loginButton.setAttribute('disabled',true);
        loginButton.style.backgroundColor = '#bfdffd';
    }
}
buttonChangeColor();

inputwrap.addEventListener('keyup',buttonChangeColor);

하,, 이렇게 코드를 치고 기능이 성공적으로 구현되는 것을 확인한뒤 나도 모르게 소리를 지르고 말았다 ㅠㅠㅠㅠㅠ😭😭😭😭❤️ 우와아아악!!! 된다!!!!! 라고 외친뒤 자랑스럽게 가방을 싸고 집으로 총총,, :)

어려운 기능은 하나도 없었지만, 자바스크립트 라는것을 접하고 공부하기 시작한지 일주일 밖에 되지 않은 나로서는 너무나 큰 기쁨와 성취감을 느끼는 순간 이었다 !!!
이맛에 코딩하지!! 너무너무 잘하고 싶고 욕심이 난다.

처음에 작성한 코드 !

const loginId = document.getElementsByClassName('login_id')[0];
const loginPassword = document.getElementsByClassName('login_password')[0];
const loginButton = document.getElementsByClassName('login_btn')[0];
const input = document.getElementsByClassName('input')[0];

function buttonChangeColor(){    
    if( loginId.value && loginPassword.value ){
        console.log(loginPassword.value)
        loginButton.removeAttribute('disabled');
        loginButton.style.backgroundColor = '#0095F6';
    }
}
buttonChangeColor();

input.addEventListener('keyup',buttonChangeColor);

위 코드에서의 문제점은 한글자씩 입력했을때, 로그인 버튼이 활성화는 되지만, 값을 지웠을 경우 다시 비활성화가 되지 않는다는 점이었다. 어떻게 해결할수 있을까 정말 한참을 앉아서 이렇게 저렇게 생각을 해 보다가 더 쉬운방법을 찾은게 맨 위의 완성된 코드 이다.

        loginButton.setAttribute('disabled',false);
        loginButton.setAttribute('disabled',true);

이렇게 ID, Password 두가지 값이 모두 들어왔을 경우에 한하여
button 요소에 disable 값을 true,false 로 통제하였다.

느낀점

자바스크립트는 처음에 어떻게 로직을 짜지, 하고 고민 하다보면 정말 탈모가 생길만큼 머리를 쮜어뜯게 되는데, 막상 완성하고 보면 "뭐야, 별거없네?!!" 하고 생각이 드는게 참 매력적인것 같다. 얼른 더 공부해서 더 많은 기능을 내 손으로 뚝딱뚝딱 구현해 보고 싶고,
사람들의 삶을 더 행복하고, 재미있고, 편리하고, 즐겁게 해주는 개발자가 되고싶다 :-) !😏