• 일주일간 인스타그램 메인페이지 그리고 로그인 페이지를 만들어 보았다. 기억에 남는 코드들이 있어 리뷰해 보겠다.

인스타그램의 로그인 페이지를 HTML,CSS 클론코딩을 진행하였고 그 외에 요소에는 자바스크립트로 구현을 하였다.

로그인 페이지

• HTML코드와 CSS 코드는 생략 하겠다. 만약 보고싶다면 git을 방문해 주기 바랍니다. 일단 자바스크립트 구현에서는 ID,Password의 인풋에 일정 길이의 값이 들어온다면 버튼을 활성화 할 수 있도록 만들었다. 그리고 두번째로는 ID,Password placeholder 값을 span태그로 구성하였는데 그 이유는 인풋에 일정 값이 들어오면 placeholder 값이 크기와 위치가 조정이 될 수 있도록 만들었다. 로그인 창 옆에는 사진들이 일정 시간이 되면 자연스럽게 움직이고 일정 사진들이 무한 반복 할 수 있도록 만들었다.

• https://github.com/tmdckszm

자바스크립트 기억에 남는 나의 코드

• 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)";
        }
        
    }
})

• 일정 이미지 무한반복을 하기 위해 배열에 사진들을 넣었다. 그 후에 chageImage라는 함수를 만들어 src 값을 바꾸어 주었고 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);

• 인스타그램 로그인 페이지 항상 간단하게 만들었다고 생각하였는데 생각보다 기능이 많이 들어가 있었다. 한 페이지 한 페이지 만드는게 쉽지않다는 것을 다시 한번 느낀다.