코드캠프 - 베이스캠프 5일차

베이스캠프 5일차

오늘은 베이스캠프 한주를 마무리 하는 날이다.
그리고 지금까지 5일간 배웠던 것을 바탕으로 1주차 파이널 과제를 진행한다.

이렇게 똑같이 만들어야하고 거기에 자바스크립트로 기능까지 추가해야 한다.

아래 코드는 과제를 진행하면서 구현한 기능이 담긴 코드입니다.

function phon__mode1 () {
    let phon1 = document.getElementById("phon1").value;
    if(phon1.length === 3) {
        document.getElementById("phon2").focus()
    }

} //이 함수는 폰넘버를 적을때 첫번째 칸에서 3자리를 입력하면 다음칸으로 이동시켜준다.  
 //+추가설명 만약 폰1의 길이가 3자리면 이 윈도우에서 폰2로 이동시킨다.

function phon__mode2 () {
    let phon2 = document.getElementById("phon2").value;
    if(phon2.length === 4) {
        document.getElementById("phon3").focus()
    }

} // 이 함수도 위에와 같다.

function phon__mode3 () {
    let phon3 = document.getElementById("phon3").value;
    if(phon3.length === 4) {
        document.getElementById("button1").disabled = false;
    }
} 
// 이 함수는 폰3의 길이가 4이면 버튼1을 활성화 시켜준다.
// 버튼에 disabled = true 으로 설정해주면 비활성 된다.


// 인증번호 전송버튼 함수이다.
    function auth () {
       
        let token =  String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); // token 변수에 문자열 랜덤 숫자6자리를 할당시켜준다. 
        document.querySelector(".number").innerHTML = token; // 그리고 넘버의 텍스트를 token 숫자로 바꿔준다.
        document.getElementById("button2").disabled = false;  // 이 함수를 실행시 버튼2을 활성화 시켜준다.

        let timer = 180; // 타이머에 180을 할당시킨다.
     
        setInterval(function() { 
// setInterval 메소드를 이용하여 1초마다 이 함수를 실행 시킨다. 
                timer = timer - 1; 
// 타이머는 1초마다 타이머 -1를 해준다.
                if( timer >=0 ) { 
// 만약 타이머가 0보다 크거나 같을때 이 명령문을 실행시킨다.
                    let min = Math.floor(timer / 60); 
// 분이라는 변수에 타이머 나누기 60을 하여 분을 구하고 
// 분에 있는 소수점을 제거하기 위해 math.floor 메소드를 이용한다.
                    let sec = String(timer % 60).padStart(2, "0"); 
// 초라는 변수에 타이머 % 60 이라는 연산자를 이용하여 나머지를 구한다. 
// 나머지는 '초' 이다. 그리고 x:00 이라는 00 두개를 만들기 위해 
// padStart 메소드를 이용하여 2자리 미만일 경우 0을 붙여준다 라는 뜻이다.
                    document.getElementById("time").innerHTML = min + " : " + sec;  
 // 그리고 이 윈도우에서 time이라는 아이디에 분과 초를 넣어 준다.
                    document.getElementById("button2").addEventListener('click', function() {
                        alert("인증이 완료되었습니다.")
// 버튼2을 클릭할 때  인증이 완료되었습니다 라는 문구가 나오게한다.
                        document.getElementById("button2").innerHTML = "인증 완료"
// 버튼2를 인증 확인에서 인증 완료로 텍스트를 변경한다.
                        document.getElementById("button3").disabled = false; // 그리고 버튼3을 활성화 시킨다.

                    })
                }

                else { 
// 만약 타이머가 0보다 작다면
                    document.getElementById("button2").disabled = true;
//  버튼2를 다시 비활성 시킨다.
                  document.getElementById("time").innerHTML = "3 : 00"
// 그리고 타임을 다시 3 : 00으로 초기화 시켜준다.                  
                }
                

        }, 1000)

    }

   function hello () {
    let email = document.getElementById("email").value;
    let name = document.getElementById("name").value;
    let pw1 = document.getElementById("pw1").value;
    let pw2 = document.getElementById("pw2").value;
    let sel = document.getElementById("pw2").value;
    let rad = document.getElementById("pw2").value;
    
    if( email !== "" && name !== "" && pw1 !== "" && pw2 !== "" && sel !== "" && rad !== "") {
        alert("코드캠프 가입을 축하드립니다.")
       
 // 만약 모든 개인정보가 공백일 때 '코드캠프 가입을 축하드립니다' 문구를 띄운다.    
    }
    
    else { 
 // 그게 아니라면 '에러메세지'라는 문구를 띄운다.
        document.getElementById("happy1").innerHTML = "에러메세지";
        document.getElementById("happy2").innerHTML = "에러메세지";
        document.getElementById("happy3").innerHTML = "에러메세지";
        document.getElementById("happy4").innerHTML = "에러메세지";
        document.getElementById("happy5").innerHTML = "에러메세지";
        document.getElementById("happy6").innerHTML = "에러메세지";
    }
    
    }

}

구현한 기능들을 자세히 정리하자면

1. 첫번째 폰넘버 칸에 번호를 다 적으면 자동으로 다음 번호칸으로 넘어갑니다.

2. 그리고 마지막 번호칸을 다 적었으면 '인증번호 전송' 버튼이 활성화 됩니다

3. '인증번호 전송' 버튼을 누르면 인증 '확인 버튼'이 활성화 됩니다.

4. 동시에 인증번호가 생성이 됩니다.

5. 동시에 타이머가 작동합니다.

6. 그리고 인증 확인 버튼을 누르면 버튼 문구가 '인증 완료'로 수정됩니다.

7. 동시에 '인증 완료되었습니다'라는 문구가 뜹니다.

8. 그리고 '가입하기' 버튼이 활성화 됩니다.

9. 만약 3분이 지나도 '인증 확인' 버튼을 누르지 않으면 '인증 확인' 버튼이 다시 비활성화 됩니다.

10. 또 0:00라는 문구가 3:00으로 수정됩니다.

11. 이메일, 이름, 비밀번호, 비밀번호 확인을 빈칸인 상태로 가입하기 누르면 에러메세지가 뜹니다

12. 반대로 빈칸없이 작성하였다면 '코드캠프 가입을 축하드립니다.'라는 문구가 뜹니다.

이렇게 기능을 정리하였습니다.

아직 구현 못한 기능들도 있고, 많이 부족하지만 더 노력해서 성장하는 개발자가 되겠습니다.