인스타그램 로그인 페이지 클론 (자바스크립트 )

const loginID = document.getElementsByClassName("loginId")[0];
const loginPW = document.getElementsByClassName("loginPw")[0];
const loginButtoN = document.getElementsByClassName("loginbutton")[0];
const iDpWinfo = document.getElementsByClassName("login")[0];

iDpWinfo.addEventListener("keyup", function () {
  let idValue = loginID.value;
  let pwValue = loginPW.value;
  if (idValue !== "" && pwValue !== "") {
    loginButtoN.classList.add("loginbutton-blue");
    // loginButtoN.style.backgroundColor = "#0095F6";
  } else {
    loginButtoN.classList.remove("loginbutton-blue"); //리무브
  }
});

아이디 비밀번호 입력시 클릭창에 색상 들어오게 하기

---

한줄씩 보기.

const loginID = document.getElementsByClassName("loginId")[0];
//겟엘리먼트클래스네임을 사용할때는 뒤에 인덱스를 적어준다.
const loginPW = document.getElementsByClassName("loginPw")[0];
const loginButtoN = document.getElementsByClassName("loginbutton")[0];
const iDpWinfo = document.getElementsByClassName("login")[0];
>//로그인 기능들을 가져왔다.

iDpWinfo.addEventListener("keyup", function () {
//addEventListener ("원하는 이벤트기능(keyup=
"키에서 손을 땟을 때 발생") ,"함수이름" )

let idValue = loginID.value; //< id입력창에 벨류
let pwValue = loginPW.value; //< pw입력창에 벨류

if (idValue !== "" && pwValue !== "") {
loginButtoN.classList.add("loginbutton-blue");

//만약에 아이디창에 벨류가 있고 그리고 피밀번호창에도 벨류가 있으면
// loginbutton-blue <<css 를 add한다.

//loginButtoN.style.backgroundColor = "#0095F6";
//이렇게 자바스크립트안에 css 속성을 넣어주는 기능은 지양하는것이 좋다..비추

.loginbutton-blue {
background-color: rgba(0, 149, 246);
} //아이디,비밀번호를 입력하면 이창이 실행되고 없으면 지워진다.

} else {
loginButtoN.classList.remove("loginbutton-blue");
} // 아이디 비밀번호창에 아무것도 없으면 css효과가 리무브(제거)된다.
});

const loginEvent = document.getElementsByClassName("loginbutton")[0];
loginEvent.addEventListener("click", function () {
  const id = document.getElementsByClassName("loginId")[0].value;
  const password = document.getElementsByClassName("loginPw")[0].value;

  if (!id) {
    alert("아이디를 입력해주세요!");
    return;
  }
 if (!password) {
    alert("비밀번호를 입력해주세요!");
    return;
  }
  alert("로그인 성공!!");
});

아이디 비밀번호 입력 안하면 알람창 뜨게하기

const loginEvent = document.getElementsByClassName("loginbutton")[0];

loginEvent.addEventListener("click", function () {
//클릭시 함수 실행 여기서 loginEvent는 버튼이다.
>
const id = document.getElementsByClassName("loginId")[0].value;
//로그인창 가져오기
const password = document.getElementsByClassName("loginPw")[0].value;
//비밀번호창 가져오기

if (!id) {
alert("아이디를 입력해주세요!");
return; //만약에 아이디가 없다면(입력하지않으면 없다는 것)
}

if (!password) {
alert("비밀번호를 입력해주세요!");
return;
}
alert("로그인 성공!!");
});

---

자바스크립트를 적용하는법에 익숙해지자..!