[개인프로젝트] 회원가입 html 디자인 하기(3)

요즘 너무 이런저런 핑계로 점점 프로젝트를 못하고 있다가, 드디어 오늘 아~~~~~주 조금 진행을 했습니다. 저번에 로그인 부분을 디자인했었는데, 오늘은 회원가입 쪽을 디자인해봤습니다.

먼저 결과 물입니다. 대부분은 로그인과 비슷하게 작성을 했습니다. 이제 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 속성만 없애주면 끝!

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분 정도 헤맸는데, 생각보다 간단한 게 진행이 되었습니다. 이제 유효성을 활용하고 데이터를 로컬 스토리지에 넣는 것을 진행해 보겠습니다!