반응형
요즘 너무 이런저런 핑계로 점점 프로젝트를 못하고 있다가, 드디어 오늘 아~~~~~주 조금 진행을 했습니다. 저번에 로그인 부분을 디자인했었는데, 오늘은 회원가입 쪽을 디자인해봤습니다.
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/007.gif)
먼저 결과 물입니다. 대부분은 로그인과 비슷하게 작성을 했습니다. 이제 join의 div태그에 hidden 속성을 반영해서 지워 주겠습니다.
짠! 다시 로그인만 나왔습니다. 이제 join 버튼을 눌렀을 때 login 창이 없어지고 join만 나오게 해야겠습니다. 먼저 join의 html태그 부분입니다.
<div class="join-wrapper" id="hidden">
<h2>join</h2>
<form class="join-form">
<input type="text" placeholder="your Id">
<input type="password" placeholder="your password">
<input type="password" placeholder="chack your password">
<input class="join-submit" type="submit" value="submit">
</div>
</form>
</div>
거의 login과 비슷합니다. 하지만 일단 보이지 않게 hidden 속성을 넣어 놨습니다. hidden의 CSS속성에는 단순히 display: none 하나만 지정을 해줬습니다. 이제 join버튼을 누르면 login인 태그에 hidden 속성을 넣고, join태그에 hidden 속성만 없애주면 끝!
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/031.gif)
const joinButton = document.querySelector(".join");
const loginWrapper = document.querySelector(".login-wrapper");
const joinWrapper = document.querySelector(".join-wrapper");
const hiddenIdName = "hidden";
function onJoin(){
console.log("clickEvent");
joinWrapper.removeAttribute("id");
loginWrapper.setAttribute("id", hiddenIdName);
}
joinButton.addEventListener("click", onJoin);
일단 join의 자바스크립트 부분입니다. 처음에 removeAttribute를 잘 활용을 못해서 20분 정도 헤맸는데, 생각보다 간단한 게 진행이 되었습니다. 이제 유효성을 활용하고 데이터를 로컬 스토리지에 넣는 것을 진행해 보겠습니다!
반응형
'프론트엔드 > 개인프로젝트' 카테고리의 다른 글
[개인프로젝트] 메인화면 레이아웃 잡기(6) (1) | 2023.12.08 |
---|---|
[개인프로젝트] 회원가입 자바스크립트 작성하기(5) (2) | 2023.12.07 |
[개인프로젝트] html에서 자바스크립트로 데이터 가져오기 (2) (1) | 2023.12.01 |
[개인프로젝트] 로그인 박스만들기(html, css) (0) | 2023.11.30 |