work_board_js 폴더 생성
vscode 실행
디자인 시안 확인
sing-up.html 파일임
sign-up.html
더보기
sign-up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 by JS</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/header.css">
</head>
<body>
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<!-- 회원가입 제목 영역-->
<section class="form-title">
<h1>회원가입 by JS</h1>
</section>
<!-- 회원가입 폼 영역 -->
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를 입력하세요" value="tenco1">
<button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
</td>
</tr>
<tr>
<th>닉네임</th>
<td>
<input type="text" class="inputs" placeholder="닉네임을 입력하세요" value="둘리1">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호를 입력하세요" value="1234">
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호를 입력하세요" value="1234">
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" id="singUpBtn" class="btn">회원가입</button>
</div>
</form>
</section>
</main>
<!--
JS 파일은 하단에 두는 것이 일반적이다.
모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
페이지 로드 속도를 최적화 하는데 도움이 된다.
-->
<script src="../js/header.js"></script>
<script src="../js/singUp.js"></script>
</body>
</html>
header.css
더보기
header
header {
width: 100%;
background-color: gray;
padding: 10px;
box-sizing: border-box;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-link {
color: white;
padding: 5px 10px;
font-size: 18px;
text-align: center;
}
.menu-link:hover {
background-color: darkgray;
}
common.css
더보기
common
/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 을 적용 */
*,
*::before
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.content-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*
align-content: center;
flex wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다.
align-items: center;
flex wrap 속성을 사용하여 한 줄로 구성된 경우 사용한다.
*/
.form-title h1 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/*
border-collapse: collapse; 속성
collapse
CSS 에서 테이블에 셀 간 테두리를 어떻게 처리할 지 결정하는 속성
테두리가 중복되는 것을 방지하거나 각 셀의 테두리를 따로 유지할지 설정 할 수 있습니다.
*/
table {
width: 100%;
margin: 0;
}
th,
td {
text-align: left;
padding: 10px;
}
section {
width: 100%;
max-width: 800px;
padding: 20px;
}
/* 인풋 스타일 설정 */
.inputs {
width: calc(100% - 22px);
height: 40px;
border: none;
padding: 5px 10px;
}
.btn {
font-size: 14px;
padding: 12px;
border-radius: 8px;
color: white;
background-color: brown;
border: none;
cursor: pointer;
}
.btn-small {
font-size: 10px;
padding: 8px;
border-radius: 4px;
color: white;
background-color: green;
border: none;
cursor: pointer;
margin-top: 10px;
}
.btn-area {
display: flex;
justify-content: right;
margin: 20px 0;
}
이벤트 등록 기능 추가 - 중복확인
singUp.js
더보기
singUp
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
console.log("inputs", inputs); // 콘솔에서 input 의 리스트를 확인할 수 있다.
const checkIdBtn = document.getElementById("checkIdBtn"); // 중복확인 버튼
const singUpBtn = document.getElementById("singUpBtn"); // 회원가입 버튼
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬 스토리지에 접근해서 사용자의 정보를 가져오는 함수를 만들어 보자
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString == null) {
return [];
alert("저장된 정보가 없습니다.");
} else {
// 문자열(JSON 형식) JS에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString); // JSON 파싱
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
console.log("inputUsername", inputUsername);
if(inputUsername === "") {
// inputUsername 이 공백이라면
alert('아이디를 입력하세요');
inputs[0].focus();
return;
}
// 로컬스토리지에서 가져온 사용자리스트 목록에서 반복문을 돌면서 inputUsername 에 담긴
// 같은 값이 있는지 확인해야 한다.
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break; // 값은 값이 있는지 찾으면 break 문으로 빠져나온다.
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디 입니다.');
inputs[0].focus();
} else {
alert("사용가능한 아이디 입니다.");
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
}
// 이벤트 리스너 함수 실행 (호출)
addEventListener();
signUp.js
더보기
signUp
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
console.log("inputs", inputs); // 콘솔에서 input 의 리스트를 확인할 수 있다.
const checkIdBtn = document.getElementById("checkIdBtn"); // 중복확인 버튼
const singUpBtn = document.getElementById("singUpBtn"); // 회원가입 버튼
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬 스토리지에 접근해서 사용자의 정보를 가져오는 함수를 만들어 보자
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString == null) {
return [];
alert("저장된 정보가 없습니다.");
} else {
// 문자열(JSON 형식) JS에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString); // JSON 파싱
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
console.log("inputUsername", inputUsername);
if(inputUsername === "") {
// inputUsername 이 공백이라면
alert('아이디를 입력하세요');
inputs[0].focus();
return;
}
// 로컬스토리지에서 가져온 사용자리스트 목록에서 반복문을 돌면서 inputUsername 에 담긴
// 같은 값이 있는지 확인해야 한다.
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break; // 값은 값이 있는지 찾으면 break 문으로 빠져나온다.
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디 입니다.');
inputs[0].focus();
} else {
alert("사용가능한 아이디 입니다.");
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 회원가입 처리 함수
function registerUser() {
// alert('회원가입 버튼 동작 테스트');
const username = inputs[0];
const nickname = inputs[1];
const password = inputs[2];
const confirmPassword = inputs[3];
console.log("username.readOnly : " + username.readOnly);
// 유효성 검사
if(username.readOnly == false) {
alert("아이디 중복 확인을 해 주세요.");
username.focus();
return;
}
if(nickname.value.trim() === "") {
alert("닉네임을 입력하세요.");
nickname.focus();
return;
}
if(password.value.trim() === "") {
alert("비밀번호를 입력하세요");
password.focus();
return;
}
if(password.value !== confirmPassword.value) {
alert("비밀번호가 일치하지 않습니다.");
password.focus();
return;
}
// 새로운 사용자 정보를 객체 리터럴로 생성
const newUser = {
username: username.value,
nickname: nickname.value,
password: password.value,
createdAt: toDay.getFullYear() + "." + (toDay.getMonth() + 1 ) +"." +toDay.getDate()
};
// console.log("newUser : " + newUser);
// console.log("newUser : " + JSON.stringify(newUser));
// [ {}, {}, {} ]
userInfo.push(newUser); // 자바
// 로컬 스토리지에 자료구조 통으로 덮어쓰기 저장
localStorage.setItem("userList", JSON.stringify(userInfo));
// window.location.href = "sign-in.html";
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
singUpBtn.addEventListener('click', registerUser);
}
// 이벤트 리스너 함수 실행 (호출)
addEventListener();
'JS' 카테고리의 다른 글
| 2024.08.26 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 (0) | 2024.08.26 |
|---|---|
| 2024.08.22 JavaScript 게시판 만들기 JavaScript 로그인 기능 만들기 (0) | 2024.08.22 |
| 2024.08.21 JavaScript 게시판 만들기 프로젝트 뼈대 만들기 (0) | 2024.08.21 |
| 2024.08.21 JavaScript 게시판 만들기 실행환경 구축 (VS CODE) (0) | 2024.08.21 |
| 2024.08.21 JavaScript 게시판 만들기 로컬스토리지(localStorage)란? (0) | 2024.08.21 |