- 일주일간
인스타그램 메인페이지
그리고로그인 페이지
를 만들어 보았다. 기억에 남는 코드들이 있어 리뷰해 보겠다.
인스타그램의 로그인 페이지를 HTML,CSS 클론코딩을 진행하였고 그 외에 요소에는 자바스크립트로 구현을 하였다.
ID,Password
의 인풋에 일정 길이의 값
이 들어온다면 버튼을 활성화
할 수 있도록 만들었다. 그리고 두번째로는 ID,Password placeholder 값을 span태그
로 구성하였는데 그 이유는 인풋에 일정 값이 들어오면 placeholder 값이 크기와 위치가 조정이 될 수 있도록 만들었다.
로그인 창 옆에는 사진들이 일정 시간이 되면 자연스럽게 움직이고 일정 사진들이 무한 반복 할 수 있도록 만들었다.
ID
창과 PW
인풋에 value 값이 들어오면 placeholder의 크기와 위치가 조정
하게 만들었다. 처음에는 input에 속성인 placeholder 값을 그냥 쓰면 안되는지에 대한 의문이 들었지만 태그을 써야 클릭시 placeholder 값이 안 없어지고 유지되면 글자 크기도 조절 할 수 있었다.
또한 일정 글자 수
가 들어오면 버튼도 활성화
될 수 있도록 만들었다. csId.addEventListener("keyup", ()=>{
if(csId.value){
callNumber.style.fontSize = "5px";
callNumber.style.top = "0px";
csId.style.paddingTop = "10px";
}else if(!csId.value){
callNumber.style.fontSize = "12px";
callNumber.style.top = "10px";
csId .style.paddingTop = "0px"
if(csPw.value.length === 0 && csId.value.length===0){
buttonEvent.style.backgroundColor = "rgb(191,223,252)";
}
}
})
csPw.addEventListener("keyup", ()=>{
if(csPw.value){
placeHold.style.fontSize = "5px";
placeHold.style.top = "0px";
csPw .style.paddingTop = "10px";
pwLook.style.display = "block";
if(csPw.value.length > 5 && csId.value.length>3){
buttonEvent.style.backgroundColor = "rgb(0,150,252)";
}
}else if(!csPw.value){
placeHold.style.fontSize = "12px";
placeHold.style.top = "10px";
csPw.style.paddingTop = "0px"
pwLook.style.display = "none"
if(csPw.value.length === 0 && csId.value.length===0){
buttonEvent.style.backgroundColor = "rgb(191,223,252)";
}
}
})
setInterval
을 통해 1초에 한번씩 사진변경을 무한 반복하게 만들었다. let imageArray = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
let imageIndex=0;
function changeImage(){
img1.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
imageIndex=0;
}
}
setInterval(changeImage,1000);
- 인스타그램 로그인 페이지 항상 간단하게 만들었다고 생각하였는데 생각보다 기능이 많이 들어가 있었다. 한 페이지 한 페이지 만드는게 쉽지않다는 것을 다시 한번 느낀다.
이러한 로그인 페이지를 만들기 위해 로직또한 엄청나게 길죠!!