오늘은 2주차 주말이다. 오늘도 어김없이 헬스장을 갔다왔다.
이번주에는 인스타그램 클론 코딩이 있었다.
1주차에 배웠던 html과 css를 이용해 전체적인 레이아웃을 구성했고 아이디나 패스워드를 찍을때마다 로그인 버튼 색깔이 바뀌거나 댓글 달기 기능은 자바스크립트를 이용했다.
로그인 창
전체적인 레이아웃을 짤 때도 꽤 많은 시간이 걸렸다. html과 css도 쉽게 볼 만한 것이 아닌 페이지를 구성하는 기본 뼈대인만큼 처음부터 설계 구조를 알아보기 쉽고 간단하게 짜는 것이 중요하다는 것을 한 번 더 느끼게 됐다. 특히 flex를 많이 사용하다는 것을 알고 한 번 더 숙달하는 기회를 가지게 됐다.
document.addEventListener('keyup', () => {
const buttonId = document.querySelector('.id').value;
const buttonPw = document.querySelector('.pw').value;
const button = document.querySelector('.login-btn');
if(buttonId.includes('@') && (buttonPw.length > 4)) {
button.style.backgroundColor="blue"
}
if(!buttonId || !buttonPw) {
button.style.backgroundColor="lightskyblue"
}
})addEventListener을 이용해 'keyup' 버튼을 눌렀다 땠을 때, 함수가 실행되는 것으로 아이디와 패스워드 값을 입력할 경우만 로그인 창을 파란색으로 바뀌게 둘 중에 하나라도 없을 때는 하늘색으로 유지되게 했다.
추가 구현 사항으로는 아이디에 @가 없고, 패스워드도 5글자 이상일 때만 활성화 시키게 하는 것도 간단히 해결했다. includes를 이용해 @ 포함이 안될때와 length를 이용해 4글자 이상일때만 활성화를 가능하게 했다.
메인 페이지
메인 페이지 역시 flex를 많이 사용했다. 하지만 화면이 작아질 때는 깨지는 현상이 일어나는 것으로 보아 그럴 때는 flex를 쓰기보다 margin과 padding을 이용해 위치를 고정하는 것이 더 보기 좋게 될 것 같았다. 추후에 시간이 날 때 다시 조정할 예정이다.
구현 사항으로는 댓글을 구현하게 하는 것이 있었다.
addEventListener('keydown', function(){
if(event.keyCode == 13){
const input = document.querySelector('.string');
const adidas = document.querySelector(".adidas");
const p = document.createElement('p');
p.innerHTML = `adidas: ${input.value}`;
adidas.append(p);
};
})또한 addEventListener를 사용해 'keydown' 버튼이 눌리면 함수가 실행되게 했다. 13은 엔터키를 뜻하며 엔터가 눌렸을 때, 댓글 밑에 p태그가 들어가게 설정했고 그 안에 내가 쓴 댓글이 들어가게 만들었다. 댓글 삭제 기능과 좋아요 기능도 더 구현할 예정이다.
