- html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입 페이지</title>
<link href="signup.css" rel="stylesheet" />
<script src="signup.js"></script>
</head>
<body>
<div class="wrapper">
<div class="title"><h1 style="font-size: 21px;">회원가입</h1></div>
<div class="email">
<h3>
<label for="id">이메일</label>
</h3>
<input id="email" type="text" placeholder="이메일을 입력하세요.">
<div id="emailError" class="error"></div>
</div>
<div class="password">
<h3>
<label for="id">비밀번호</label>
</h3>
<input id="password" type="password" placeholder="비밀번호를 입력해 주세요.">
<div id="passwordError" class="error"></div>
</div>
<div class="passwordCheck">
<h3>
<label for="id">비밀번호 재확인</label>
</h3>
<input id="passwordCheck" type="password" placeholder="비밀번호를 다시 입력하세요.">
<div id="passwordCheckError" class="error"></div>
</div>
<div class="name">
<h3>
<label for="id">이름</label>
</h3>
<input id="name" type="name" placeholder="이름을 입력하세요.">
<div id="nameError" class="error"></div>
</div>
<div class="age">
<h3>
<label for="id">나이</label>
</h3>
<input id="age" type="number" placeholder="나이를 입력하세요.">
<div id="ageCheck" class="error"></div>
</div>
<div class="signup">
<button id="sighUpButton" disabled onclick="signUpCheck()">가입하기</button>
</div>
</div>
</body>
</html>- css 파일
* {
margin: 0px;
box-sizing: border-box;
font-size: 11px;
}
html {
width: 100%;
display: flex;
justify-content: center;
padding-top: 20px;
padding-bottom: 20px;
}
body {
width: 45%;
border: 1px solid black;
}
input{
border: 1px solid black;
border-radius: 3px;
line-height: 35px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
}
.wrapper {
padding: 10px;
}
div {
padding-top: 3px;
padding-bottom: 8px;
}
.title {
text-align: center;
font-weight: 700;
}
.email input {
width: 100%;
}
.password input {
width: 100%;
}
.passwordCheck input {
width: 100%;
}
.name input {
width: 100%;
}
.age input {
width: 100%;
}
.signUp button {
width: 100%;
cursor:pointer;
}
button{
cursor: pointer;
height: 30px;
color: blue;
font-size: 10px;
}
.error{
font-size: 1px;
height: 20px;
color:red;
font-weight: 700;
}- js 파일
// 가입부분 체크
function signUpCheck(){
let email = document.getElementById("email").value
let password = document.getElementById("password").value
let passwordCheck = document.getElementById("passwordCheck").value
let name = document.getElementById("name").value
let check = true;
// 이메일확인
if(email.includes('@')){
let emailId = email.split('@')[0]
let emailServer = email.split('@')[1]
if(emailId === "" || emailServer === ""){
document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
check = false
}
else{
document.getElementById("emailError").innerHTML=""
}
}else{
document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
check = false
}
// 비밀번호 확인
if(password !== passwordCheck){
document.getElementById("passwordError").innerHTML=""
document.getElementById("passwordCheckError").innerHTML="비밀번호가 동일하지 않습니다."
check = false
}else{
document.getElementById("passwordError").innerHTML=""
document.getElementById("passwordCheckError").innerHTML=""
}
if(password===""){
document.getElementById("passwordError").innerHTML="비밀번호를 입력해주세요."
check = false
}else{
//document.getElementById("passwordError").innerHTML=""
}
if(passwordCheck===""){
document.getElementById("passwordCheckError").innerHTML="비밀번호를 다시 입력해주세요."
check = false
}else{
//document.getElementById("passwordCheckError").innerHTML=""
}
//이름 확인
if(name===""){
document.getElementById("nameError").innerHTML="이름이 올바르지 않습니다."
check = false
}else{
document.getElementById("nameError").innerHTML=""
}
if(check){
document.getElementById("emailError").innerHTML=""
document.getElementById("passwordError").innerHTML=""
document.getElementById("passwordCheckError").innerHTML=""
document.getElementById("nameError").innerHTML=""
//비동기 처리이벤트
setTimeout(function() {
alert("가입이 완료되었습니다.")
},0);
}
}실행화면
후기 : react를 사용해본적도 없고, html과 css를 너무 예전에 배웠어서 오늘의 미션도 구글링을 많이 참고하면서 공부했다.
덕분에 현재의 내가 많이 부족하다는 것을 느낄 수 있었으며, 다음 스터디 시간 전까지 기초적인 부분을 공부하고 와야겠다는 다짐을 했다.
어제보다 더 나은 오늘을 위해 오늘도 한걸음!