[191226] mission003

[eastjun-dev]

🔥 자바스크립트로 Form 과 Modal 에 대한 UI 만들기

웹 사이트에서 자바스크립트가 가장 많이 사용 되는 것 중 하나가 Form 이라고 합니다.
HTML이 기본적으로 갖고 있는 폼의 기능도 강력하지만, 그 한계도 명확하다고 합니다.
한 입력 항목이 변화함에 따라 다른 항목을 제한 혹은 확장하는 기능 등이 그렇다고 하네요.

예를 들면,
사용자의 성별에 따라 보여줄 항목을 다르게 한다던가,
전화번호를 입력하면 숫자 사이에 - 를 입력해준다거나 하는 일 등

🏴 Missions

폼을 기본으로 모달 UI 개발을 Javascript 로 해보기

Requirement

1. 이름, 전화번호, 이메일, 비밀번호, 자기소개를 입력 받을 수 있는 폼을 만든다.
2. 전화번호 혹은 이메일이 입력되면, 체크박스로 개인정보보호방침에 동의합니다 라는 항목이 나타나게 한다.
3. 버튼을 클릭하면 폼이 제출되도록 한다. (HTML native form submit 을 의미함)
4. 이 폼이 모달 UI의 형태로 화면에 나타나도록 만든다.
5. 항목이 모두 입력되면 다음 버튼이 나타나고 이를 클릭하면 가족 구성원을 입력할 수 있도록 한다.

• 추가 를 누르면 이름과 관계를 입력할 수 있는 입력 폼을 만들고, 입력을 받도록 한다.
• 단, 1. 항목에 저장된 내용은 메모리 혹은 어떤 방식으로든 써먹을 수 있게 한다.
• 또한 1. 항목에 표시되는 input 혹은 기타 html 태그들은 화면에 보여서는 안된다.
• 즉 모든 항목을 즉시에 입력하는 방식이 아닌 단계별로 입력하는 일종의 Wizard 형태를 개발하는 것

6. 가족 구성원을 입력하고 (0명이어도 무방), 회원가입 을 누르면 폼에 입력된 내용들을 확인하고 가입 완료 표시를 보여준다.

• 수정하고 싶은 내용이 있을 경우 수정할 수 있도록 한다.

7. 폼을 닫고 회원가입이 완료되었음을 알리는 모달 창을 만든다.

👨‍💻 Reviewer Match 👩‍💻

@eastjun

@YongHoonJJo @StellaKim1230 @ganeodolu

@YongHoonJJo

@StellaKim1230 @ganeodolu @s280493

@StellaKim1230

@ganeodolu @s280493 @eastjun

@ganeodolu

@s280493 @eastjun @YongHoonJJo

@s280493

@eastjun @YongHoonJJo @StellaKim1230