[precamp] 회원가입 폼 파이널 과제

1. html 구조 파악하기

위의 그림을 기준으로 더 세분화하였다. container 안에 wrapper를 넣어서 조정하는게 훨씬 flex를 다루기에 편리하다.

2. html 코드 

위의 그림 기준으로 html 코드를 생성하였다.

3. css 코드

위에서부터 아래로, 큰 부분부터 작은 부분으로 css 코드를 생성하였다.

4. javascript 코드

 

추가해야 하는 기능

기능	구현 여부
휴대전화 3 - 4 - 4로 구현하기. 앞 칸이 모두 채워지면 다음 칸으로 커서가 이동하도록 하기.	O
휴대전화 모두 입력하면 인증번호 전송 버튼이 활성화되고, 버튼 누르면 인증번호 보여주기. 3분 타이머도 실행하기.	O 휴대전화 모두 입력 시 인증번호 전송 버튼 활성화 제외
인증확인 버튼 활성화하기. 3분 이내에 버튼 누르면 인증이 완료되었다는 알림창이 표시되어야 하고, 3분이 지나면 인증번호, 타이머, 버튼 모두 초기화하기.	O
가입하기 버튼을 누르면 각 입력칸에 대하여 검증하고, 빈칸 아래에는 경고를 띄우기.	O
검증이 완료되면 가입을 축하한다는 알림창을 표시해주기.	O

원하는 기능을 생각하고 과정을 생각하며 코드를 생성하였다.

1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. 
2. 인증번호 전송 가능해지기.
3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다.
4. 3분이 지나면 인증 완료 버튼이 비활성화된다.

4가지 과정으로 생각했고, 코드를 생성하였다.

- setAttribute(name, value) ↔ removeAttribute(name)

5. 완성된 파이널 과제

 

6. 수료증 발급

😘 첫 수료증 😘