🌿 FINAL 과제

⭐️ Reference 아래는 레퍼런스 코드입니다. 과제를 완료하기 전 미리 확인하지 마세요!

final.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>코드캠프 회원가입</title>
    <link href="final.css" rel="stylesheet" />
    <script src="final.js" ></script>
</head>
<body>
    <div class="wrapper">
        <h3>코드캠프 회원가입</h3>
        <input class="inputbox" id="email" type="text" placeholder="이메일을 입력해 주세요."/>
        <div class="error" id="error__email"></div>
        <input class="inputbox" id="writer" type="text" placeholder="이름을 입력해 주세요."/>
        <div class="error" id="error__writer"></div>
        <input class="inputbox" id="password1" type="password" placeholder="비밀번호를 입력해 주세요."/>
        <div class="error" id="error__password1"></div>
        <input class="inputbox" id="password2" type="password" placeholder="비밀번호를 다시 입력해 주세요."/>
        <div class="error" id="error__password2"></div>
        <div class="phone__wrapper">
            <input id="phone1" class="phoneNum" type="text" onchange="changePhone1()" onkeyup="onchange()" /> -
            <input id="phone2" class="phoneNum" onchange="changePhone2()" onkeyup="onchange()" /> -
            <input id="phone3" class="phoneNum" onchange="changePhone3()" onkeyup="onchange()" />
        </div>
        <div class="token__wrapper">
            <div class="token" id="token">000000</div>
            <button id="token__button" onclick="getToken()" disabled>인증번호 전송</button>
        </div>
        <div class="token__wrapper">
            <div class="token__timer" id="token__timer">3:00</div>
            <button id="token__timer__confirm__button" onclick="getTokenTimerConfirm()" disabled>인증 완료</button>
        </div>
        <div class="location__wrapper">
            <select class="location" id="location">
                <option disabled selected>지역을 선택하세요.</option>
                <option>서울</option>
                <option>경기</option>
                <option>인천</option>
            </select>
        </div>
        <div class="error" id="error__location"></div>
        <div class="gender__wrapper">
            <div class="gender">
                <input type="radio" name="gender" id="gender__woman" class="gender__radio"> 여성
            </div>
            <div class="gender">
                <input type="radio" name="gender" id="gender__man" class="gender__radio"/> 남성
            </div>
        </div>
        <div class="error" id="error__gender"></div>
        <hr />
        <div class="footer">
            <button id="signup__button" onclick="signup()" disabled>가입하기</button>
        </div>
    </div>
</body>
</html>

final.css

* {
    box-sizing: border-box;
    margin: 0px;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 540px;
    height: 900px;
    border: 1px solid #AACDFF;
    box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.error {
    color: red;
    height: 10px;
    font-size: 11px;
}

h3 {
    font-size: 32px;
    color: #0068FF;
    font-weight: bold;
    width: 380px;
    margin-bottom: 40px;
}

.inputbox {
    width: 380px;
    height: 60px;
    background-color: white;
    border-radius: 7px;
    border: 1px solid #D2D2D2;
    padding: 18px;
    margin-top: 20px;
}

.inputbox::placeholder {
    color: #797979;
    font-size: 16px;
}

.phone__wrapper {
    width: 380px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.phoneNum {
    width: 100px;
    height: 40px;
    border: 1px solid #D2D2D2;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
}

.token__wrapper {
    width: 380px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.token, .token__timer {
    color: #0068FF;
    font-size: 18px;
}

#token__button, #token__timer__confirm__button {
    width: 120px;
    height: 40px;
    border-radius: 7px;
    margin-left: 20px;
    border: 1px solid #D2D2D2;
    font-size: 16px;
}

.location {
    margin-top: 20px;
    width: 380px;
    height: 60px;
    border: 1px solid #D2D2D2;
    border-radius: 7px;
    font-size: 16px;
    padding: 18px;
    color: #797979;
}

.gender__wrapper {
    width: 380px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.gender {
    width: 70px;
    text-align: center;
}

hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 1px solid #e6e6e6;
    width: 380px;
}

#signup__button {
    width: 380px;
    height: 75px;
    border: 1px solid #D2D2D2;
    border-radius: 10px;
    font-size: 18px;
}

final.js

function changePhone1(){
    const phone1 = document.getElementById("phone1").value
    if(phone1.length === 3) {
        document.getElementById("phone2").focus()
    }
}

function changePhone2(){
    const phone2 = document.getElementById("phone2").value
    if(phone2.length === 4) {
        document.getElementById("phone3").focus()
    }
}

function changePhone3(){
    const phone1 = document.getElementById("phone1").value
    const phone2 = document.getElementById("phone2").value
    const phone3 = document.getElementById("phone3").value
    if(phone1.length === 3 && phone2.length === 4 && phone3.length === 4){
        document.getElementById("token__button").style = "background-color: #FFFFFF; color: #0068FF; cursor: pointer;"
        document.getElementById("token__button").removeAttribute("disabled")
    }

}

function getToken(){
    const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
    document.getElementById("token").innerText = token

    document.getElementById("token__button").style = "background-color: #FFFFFF; cursor: default;"
    document.getElementById("token__button").setAttribute("disabled", "true")
    document.getElementById("token__timer__confirm__button").style="background-color: #0068FF; color: #FFFFFF; cursor: pointer;"
    document.getElementById("token__timer__confirm__button").removeAttribute("disabled")
    getTokenTimer()
}

let interval;
function getTokenTimer(){
    let timer = 10
    interval = setInterval(() => {
        if(timer >= 0){
            const minutes = Math.floor(timer / 60)
            const seconds = timer % 60

            document.getElementById("token__timer").innerText = minutes + ":" + String(seconds).padStart(2, "0")
            timer -= 1
        } else {
            document.getElementById("token").innerText = "000000"
            document.getElementById("token__button").style = ""
            document.getElementById("token__button").setAttribute("disabled", "true")

            document.getElementById("token__timer").innerText = "3:00"
            document.getElementById("token__timer__confirm__button").style = ""
            document.getElementById("token__timer__confirm__button").setAttribute("disabled", "true")

            clearInterval(interval)
        }
    }, 1000)
}

function getTokenTimerConfirm(){
    clearInterval(interval)
    document.getElementById("token__timer__confirm__button").style = "background-color: #FFFFFF; cursor: default;"
    document.getElementById("token__timer__confirm__button").setAttribute("disabled", "true")
    document.getElementById("token__timer__confirm__button").innerText = "인증완료"
    alert("인증이 완료되었습니다.")

    document.getElementById("signup__button").style = "background-color: #FFFFFF; color: #0068FF; border: 1px solid #0068FF ;cursor: pointer;"
    document.getElementById("signup__button").removeAttribute("disabled")
}

function signup(){
    const email = document.getElementById("email").value
    const writer = document.getElementById("writer").value
    const password1 = document.getElementById("password1").value
    const password2 = document.getElementById("password2").value
    const location = document.getElementById("location").value
    const genderWoman = document.getElementById("gender__woman").checked
    const genderMan = document.getElementById("gender__man").checked

    let isValid = true
    if(email.includes("@") === false) {
        document.getElementById("error__email").innerText = "이메일이 올바르지 않습니다."
        isValid = false
    } else {
        document.getElementById("error__email").innerText = ""
    }

    if(writer === "") {
        document.getElementById("error__writer").innerText = "이름이 올바르지 않습니다."
        isValid = false
    } else {
        document.getElementById("error__writer").innerText = ""
    }

    if(password1 === ""){
        document.getElementById("error__password1").innerText = "비밀번호를 입력해 주세요."
        isValid = false
    } else {
        document.getElementById("error__password1").innerText = ""
    }

    if(password2 === ""){
        document.getElementById("error__password2").innerText = "비밀번호를 입력해 주세요."
        isValid = false
    } else {
        document.getElementById("error__password2").innerText = ""
    }

    if(password1 !== password2) {
        document.getElementById("error__password1").innerText = "비밀번호가 일치하지 않습니다."
        document.getElementById("error__password2").innerText = "비밀번호가 일치하지 않습니다."
        isValid = false
    }

    if(location !== "서울" && location !== "경기" && location !== "인천"){
        document.getElementById("error__location").innerText = "지역을 선택해 주세요."
        isValid = false
    } else {
        document.getElementById("error__location").innerText = ""
    }

    if(genderWoman === false && genderMan === false){
        document.getElementById("error__gender").innerText = "성별을 선택해 주세요."
        isValid = false
    } else {
        document.getElementById("error__gender").innerText = ""
    }

    if(isValid === true){
        alert("코드캠프 가입을 축하합니다.")
    }
}