Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hyeongu/6week #32

Closed
wants to merge 13 commits into from
Closed

Hyeongu/6week #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
662d8a8
2week Assignment
cjfgus983 Apr 26, 2024
ee17243
2week Assignment_2
cjfgus983 Apr 26, 2024
91b13bc
Merge pull request #12 from SSUMC-6th/hyeongu/2week
cjfgus983 May 3, 2024
88e54fa
3week Assignment
cjfgus983 May 3, 2024
9d0b779
1week Assignment
cjfgus983 May 3, 2024
e11dfbc
Merge pull request #19 from SSUMC-6th/hyeongu/3week
cjfgus983 May 3, 2024
c45581c
Merge pull request #20 from SSUMC-6th/hyeongu/1week_1
cjfgus983 May 3, 2024
49ef623
4week Study
cjfgus983 May 10, 2024
c84abe1
5.19
cjfgus983 May 19, 2024
4a4ee63
Merge pull request #25 from SSUMC-6th/hyeongu/4week
cjfgus983 May 19, 2024
568dbe0
Merge branch 'hyeongu/main' of https://github.com/SSUMC-6th/WEB_B int…
cjfgus983 May 19, 2024
d764f95
5.24 error
cjfgus983 May 24, 2024
263650f
hyeongu/6week
cjfgus983 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
63 changes: 63 additions & 0 deletions week1/assignment1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>회원가입</h2>
<form id="signup-form" action="#">
<div class="form-group">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<div id="error-message-id" style="display: none; color: red;">필수 입력 항목입니다!</div>
<div id="error-message-id2" style="display: none; color: red;"> 문자를 입력해주세요!</div>
<div id="success-message-id" style="display: none; color: rgb(0, 130, 13);">멋진 이름이네요!</div>
</div>
<div class="form-group">
<label for="email">이메일:</label>
<input type="text" id="email" name="email">
<div id="error-message-email" style="display: none; color: red;">올바른 이메일 형식이 아닙니다!</div>
<div id="success-message-email" style="display: none; color: rgb(0, 130, 13);">올바른 이메일 형식입니다!</div>
</div>
<div class="form-group">
<label for="age">나이:</label>
<input type="text" id="age" name="age">
<div id="error-message-age" style="display: none; color: red;">나이를 입력해주세요!</div>
<div id="error-message-age2" style="display: none; color: red;">숫자를 입력해주세요!</div>
<div id="error-message-age3" style="display: none; color: red;">나이는 음수가 될 수 없습니다!</div>
<div id="error-message-age4" style="display: none; color: red;">나이는 소수가 될 수 없습니다!</div>
<div id="error-message-age5" style="display: none; color: red;">미성년자는 가입할 수 없습니다!</div>
<div id="success-message-age" style="display: none; color: rgb(0, 130, 13);">올바른 나이 형식입니다!</div>
</div>
<div class="form-group">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<div id="error-message-pw" style="display: none; color: red;">비밀번호는 최소 4자리 이상이어야 합니다.</div>
<div id="error-message-pw-2" style="display: none; color: red;">비밀번호는 최대 12자리까지 가능합니다.</div>
<div id="error-message-pw-3" style="display: none; color: red;">영어, 숫자, 특수문자를 조합해야 합니다.</div>
<div id="success-message-pw" style="display: none; color: rgb(0, 130, 13);">올바른 비밀번호입니다!</div>
</div>
<div class="form-group">
<label for="confirm-password">비밀번호 확인:</label>
<input type="password" id="confirm-password" name="confirm-password">
<div id="error-message-pc" style="display: none; color: red;">비밀번호가 일치하지 않습니다.</div>
<div id="success-message-pc" style="display: none; color: rgb(0, 130, 13);">비밀번호가 일치합니다!</div>
</div>
<button type="submit" id="submit-button">가입하기</button>
</form>
</div>
<!-- 모달 관리 -->
<div id="myModal" class="modal">
<div class="modal-content">
<button class="close">&times;</button>
<h2> 가입 성공! </h2>
<p class="modal-message">umc 챌린지 가입을 축하합니다!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
245 changes: 245 additions & 0 deletions week1/assignment1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
function initializeForm() {
const form = document.getElementById("signup-form"); // 전체 폼을 가져옴
const successMessage_id = document.getElementById("success-message-id"); // successMessage
const errorMessage_id= document.getElementById("error-message-id"); // errorMessage
const errorMessage_id2= document.getElementById("error-message-id2"); // errorMessage 2
const successMessage_email = document.getElementById("success-message-email"); // successMessage
const errorMessage_email= document.getElementById("error-message-email"); // errorMessage
const successMessage_age = document.getElementById("success-message-age"); // successMessage
const errorMessage_age= document.getElementById("error-message-age"); // errorMessage
const errorMessage_age2= document.getElementById("error-message-age2"); // errorMessage
const errorMessage_age3= document.getElementById("error-message-age3"); // errorMessage
const errorMessage_age4= document.getElementById("error-message-age4"); // errorMessage
const errorMessage_age5= document.getElementById("error-message-age5"); // errorMessage
const successMessage_pw = document.getElementById("success-message-pw"); // successMessage
const errorMessage_pw= document.getElementById("error-message-pw"); // errorMessage
const errorMessage_pw2= document.getElementById("error-message-pw-2"); // errorMessage
const errorMessage_pw3= document.getElementById("error-message-pw-3"); // errorMessage
const successMessage_pc = document.getElementById("success-message-pc"); // successMessage
const errorMessage_pc= document.getElementById("error-message-pc"); // errorMessage

const name = document.getElementById("name"); // 이름 input
const email = document.getElementById("email");
const age = document.getElementById("age");
const password = document.getElementById("password");
const password_confirm = document.getElementById("confirm-password");

form.addEventListener("submit", function(event) {
event.preventDefault(); // submit이 눌렸을 때 페이지가 다시 로드 되는게 아니라 자바스크립트에서 처리
// if (!/^[a-zA-Z\uAC00-\uD7A3]+$/.test(name.value.trim()))
var check = [false, false, false, false, false];


// 이름 처리
if(name.value === "") // 비어 있으면
{
errorMessage_id.style.display = "block";
successMessage_id.style.display = "none";
}
else if (!/^[a-zA-Z\uAC00-\uD7A3]+$/.test(name.value.trim())) // 문자열이 아니면
{
errorMessage_id2.style.display = "block";
errorMessage_id.style.display = "none";
successMessage_id.style.display = "none";
}
else // 제대로 된 입력
{
errorMessage_id.style.display = "none";
errorMessage_id2.style.display = "none";
successMessage_id.style.display = "block";
check[0] = true;
}
// 이메일 처리
if(email.value.trim() === "" || !isValidEmail(email)) //비어있거나 email형식이 아니면
{
errorMessage_email.style.display = "block";
successMessage_email.style.display = "none";
}
else
{
errorMessage_email.style.display = "none";
successMessage_email.style.display = "block";
check[1] = true;
}
// 나이 처리
if(age.value === "") // 비어 있으면
{
errorMessage_age.style.display = "block";
errorMessage_age2.style.display = "none";
successMessage_age.style.display = "none";
}
else if(!isNum(age)) // 값이 있는데 숫자가 아니라면
{
errorMessage_age2.style.display = "block";
errorMessage_age.style.display = "none";
errorMessage_age5.style.display = "none";
errorMessage_age3.style.display = "none";
errorMessage_age4.style.display = "none";
successMessage_age.style.display = "none";
}
else if(isnegative(age)) // 값이 음수라면
{
errorMessage_age3.style.display = "block";
errorMessage_age2.style.display = "none";
errorMessage_age.style.display = "none";
errorMessage_age5.style.display = "none";
errorMessage_age4.style.display = "none";
successMessage_age.style.display = "none";
}
else if(isFloat(age)) //값이 소수라면
{
errorMessage_age4.style.display = "block";
errorMessage_age3.style.display = "none";
errorMessage_age2.style.display = "none";
errorMessage_age.style.display = "none";
errorMessage_age5.style.display = "none";
successMessage_age.style.display = "none";
}
else if(!isAdult(age)) // 값이 19 미만이라면
{
errorMessage_age5.style.display = "block";
errorMessage_age4.style.display = "none";
errorMessage_age3.style.display = "none";
errorMessage_age2.style.display = "none";
errorMessage_age.style.display = "none";
successMessage_age.style.display = "none";
}
else
{
successMessage_age.style.display = "block";
errorMessage_age4.style.display = "none";
errorMessage_age5.style.display = "none";
errorMessage_age3.style.display = "none";
errorMessage_age.style.display = "none";
errorMessage_age2.style.display = "none";
check[2] = true;
}
// 비밀번호 처리
if(password.value.trim().length < 4) // 입력이 4보다 작다면
{
successMessage_pw.style.display = "none"
errorMessage_pw.style.display = "block"
errorMessage_pw2.style.display = "none"
errorMessage_pw3.style.display = "none"
}
else if(password.value.trim().length > 12) // 입력이 12보다 크다면
{
errorMessage_pw2.style.display = "block"
errorMessage_pw.style.display = "none"
successMessage_pw.style.display = "none"
errorMessage_pw3.style.display = "none"
}
else if(!hasAllTypes(password.value))
{
errorMessage_pw3.style.display = "block"
errorMessage_pw.style.display = "none"
successMessage_pw.style.display = "none"
errorMessage_pw2.style.display = "none"
}
else
{
successMessage_pw.style.display = "block"
errorMessage_pw2.style.display = "none"
errorMessage_pw.style.display = "none"
errorMessage_pw3.style.display = "none"
check[3] = true;
}
// 비밀번호 확인 처리
if(password_confirm.value != password.value) // 입력이 다르면
{
successMessage_pc.style.display = "none"
errorMessage_pc.style.display = "block"
}
else
{
successMessage_pc.style.display = "block"
errorMessage_pc.style.display = "none"
check[4] = true;
}


if (check.every(function(element) { return element === true; })) {
// 모든 입력이 정상적으로 이루어졌을 때 모달을 표시
showModal();
}
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", function() {
closeModal();
});
}

function isValidEmail(email) {
const emailValue = email.value.trim();
const atIndex = emailValue.indexOf("@");
const dotIndex = emailValue.lastIndexOf(".");

// "@"가 존재하고, "@" 뒤에 "."도 존재하는지 확인
if (atIndex > 0 && dotIndex > atIndex + 1 && dotIndex < emailValue.length - 1) {
return true; // 올바른 이메일 형식
} else {
return false; // 올바르지 않은 이메일 형식
}
}

function isNum(input) {
if(!isNaN(parseFloat(input.value)))//isNan 숫자면 false 리턴
return true;
else
return false;
}
function isnegative(input) { // 음수인지 판별
if(parseInt(input.value) < 0)
{
return true;
}
else
return false;
}
function isFloat(input) {
return input.value.includes('.');
}

function isAdult(input) {
if(parseInt(input.value) > 18)
return true;
else
return false;
}

function hasAllTypes(password) {
// 영어, 숫자, 특수문자 각각의 포함 여부를 확인
const hasLetter = /[a-zA-Z]/.test(password);
const hasNumber = /\d/.test(password);
const hasSpecial = /[!@#$%^&*()\-_=+[\]{};:'",.<>/?\\|~`]/.test(password);

// 모든 종류가 포함되어 있는지 확인
return hasLetter && hasNumber && hasSpecial;
}

// ================================= 모달 관련 =======================================

// 모달 표시 함수
function showModal() {
const modal = document.getElementById("myModal");
modal.style.display = "block";
}

// 모달 닫기 함수
function closeModal() {
const modal = document.getElementById("myModal");
modal.style.display = "none";
}

// 모달 창 닫기 버튼 클릭 이벤트 핸들러
const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", closeModal);

// 초기화
document.addEventListener("DOMContentLoaded", function() {
closeModal(); // 페이지 로드 시 모달을 숨김
});


document.addEventListener("DOMContentLoaded", initializeForm);
Loading