[vanilla project] NIKE 클론 코딩하기 2일차

1일차에 이어 하자면, 페이지를 구현하다 저 눈 표시가 고생을 많이 한 것 같았다. 

저  버튼을 누르면 비밀번호가 보이고, 그리고 다시 눈 표시를 누르면 비밀번호가 보이지 않는다. 

처음 인풋안에 아이콘을 넣는 것 또한 고민이 많이 되었다. 

일단 처음에 어떻게 넣어야 하지, 그리고 어떻게 구현을 해야할까 구글링을 해보았다. 

구글링을 보니 토글 형식으로, 누르면 작용을 하게 해놨다.

일단 CSS 경우는 DIv로 저 input과 icon을 감싸고 감싸는 div를 relative로 만든 후, 아이콘을 absolute로 만든 후

.close,
.open {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 20px;
  height: 20px;
}

위와 같이 배치를 했다. input를 기준으로 움직일수 있도록 absolute로 한 것이다. 그래서 이렇게 만들었다. 

그리고 처음에는 if문으로 해보려고 하다가, 클릭 시에 if문으로 한다면 생각보다 하드코딩이 될 거 같아. 좀 찾아보니 , 토글로 하는 것 같았다. 아니 이렇게 쉬운 방법이 있었느데.... 너무 ... 역시 실력과 많은 경험이 필요한 것 같다..

toggleClose.addEventListener('click', function () {
  passwordInput.type = 'text';
  toggleClose.style.display = 'none';
  toggleOpen.style.display = 'block';
});

toggleOpen.addEventListener('click', function () {
  passwordInput.type = 'password';
  toggleClose.style.display = 'block';
  toggleOpen.style.display = 'none';
});

prevBtn.addEventListener('click', function (e) {
  e.preventDefault();
  window.location.href = 'login.html';
})

코드는 이런 식으로 토글로 해서, 클릭하면 style로 조절을 하여 none, block으로 하는 것이다. 한번 해두면 다음에 할 때 또 사용할 수 있을 것 같다.