SSUMC-6th · sunny3631 · Apr 26, 2024 · Apr 6, 2024 · Apr 12, 2024
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ SSUMC 6기 WEB 스터디 B조
     │  └─yuyeong/1week
 ```
 1. `닉네임/main 브랜치`가 기본 브랜치로 pr 보낼 때 main 브랜치가 아닌 닉네임/main 브랜치로 올립니다.
-2. 매주 실습, 미션은 각자의 닉네임/main 브랜치를 base 브랜치로 삼아 `닉네임/이슈번호 브랜치`를 생성하여 관련 파일을 업로드합니다.
+2. 매주 실습, 미션은 각자의 닉네임/main 브랜치를 base 브랜치로 삼아 `닉네임/해당 주차 브랜치`를 생성하여 관련 파일을 업로드합니다.
 3. 모든 팀원들의 approve를 받으면, pr을 머지합니다. approve와 merge는 스터디 진행 중에 이루어집니다.
 branch 명 : 닉네임 / 해당 주차
 

diff --git a/week1/signup/index.html b/week1/signup/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>회원가입</title>
+    <link rel="stylesheet"  href="style.css">
+
+</head>
+<body>
+    <div class="container">
+        <div class="signup-box">
+            <h2>회원가입</h2>
+            <form id ="signup-form">
+                <label for="username">이름</label><br>
+                <input type="text" id="username" name="username"><br>
+                <div class="error" id="error-username"></div>
+
+                <label for="email">이메일</label><br>
+                <input type="email" id="email" name="email"><br>
+                <div class="error" id="error-email"></div>
+
+                <label for="username">나이</label><br>
+                <input type="text" id="age" name="age"><br>
+                <div class="error" id="error-age"></div>
+
+                <label for="password">비밀번호</label><br>
+                <input type="password" id="password" name="password"><br>
+                <div class="error" id="error-password"></div>
+
+                <label for="pwcheck">비밀번호 확인</label><br>
+                <input type="password" id="pwcheck" name="pwcheck"><br>
+                <div class="error" id="error-pwcheck"></div>
+
+                <input type="submit", id="submit", value="가입하기">
+            </form>
+            <div class="modal-container" style="display: none;">
+                <div class="modal">
+                    <div class="modal-title">가입 성공!</div>
+                    <p>umc 챌린저 가입을 축하합니다!!</p>
+                    <div class="close-container">
+                        <button id="close">닫기</button>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+        </div>
+        </div>
+    </div>
+    <script src = "signup.js"></script>
+</body>
+</html>
diff --git a/week1/signup/signup.js b/week1/signup/signup.js
@@ -0,0 +1,132 @@
+const form = document.getElementById('signup-form');
+const submitButton = document.querySelector('input[type="submit"]');
+const modal = document.querySelector('.modal-container');
+const close = document.getElementById('close');
+
+
+form.addEventListener('submit', function(event) {
+  event.preventDefault();
+  validateForm();
+});
+submitButton.addEventListener('click', () => {
+    validateForm();
+  });
+
+  close.addEventListener('click', () => {
+    modal.style.display = "none";
+  });
+
+function validateForm() {
+  const usernameInput = document.getElementById('username');
+  const emailInput = document.getElementById('email');
+  const ageInput = document.getElementById('age');
+  const passwordInput = document.getElementById('password');
+  const confirmPasswordInput = document.getElementById('pwcheck');
+
+  const usernameError = document.getElementById('error-username');
+  const emailError = document.getElementById('error-email');
+  const ageError = document.getElementById('error-age');
+  const passwordError = document.getElementById('error-password');
+  const pwcheckError = document.getElementById('error-pwcheck');
+
+
+
+  let isValid=true;
+
+
+  if (!usernameInput.value.trim()) {
+    usernameError.innerHTML = '필수 입력 항목입니다!';
+    usernameError.style.color = 'red';
+    isValid = false;
+  }
+  else {
+    usernameError.innerHTML = '멋진 이름이네요!';
+    usernameError.style.color = 'green';
+
+  }
+
+
+  if (!emailInput.value.trim()) {
+    emailError.innerHTML = '올바른 이메일 형식이 아닙니다!';
+    emailError.style.color = 'red';
+    isValid = false;
+  }else {
+    emailError.innerHTML = '올바른 이메일 형식입니다!';
+    emailError.style.color = 'green';
+
+  }
+
+
+  if (!ageInput.value.trim()) {
+    ageError.innerHTML = '나이를 입력해주세요.';
+    ageError.style.color = 'red';
+    isValid = false;
+  }else if (isNaN(ageInput.value.trim())) {
+    ageError.innerHTML = '나이는 숫자 형식이어야 합니다.';
+    ageError.style.color = 'red';
+    isValid = false;
+} else if (parseInt(ageInput.value.trim()) <= 0) {
+    ageError.innerHTML = '나이는 음수가 될 수 없습니다!';
+    ageError.style.color = 'red';
+    isValid = false;
+} else if (!Number.isInteger(parseFloat(ageInput.value.trim()))) {
+    ageError.innerHTML = '나이는 소수가 될 수 없습니다!';
+    ageError.style.color = 'red';
+    isValid = false;
+} else if (parseInt(ageInput.value.trim())<19) {
+    ageError.innerHTML = '미성년자는 가입할 수 없습니다!';
+    ageError.style.color = 'red';
+    isValid = false;
+} else {
+    ageError.innerHTML = '올바른 나이 형식입니다!';
+    ageError.style.color = 'green';
+
+  }
+
+
+  if (!passwordInput.value.trim()) {
+    passwordError.innerHTML = '비밀번호는 최소 4자리 이상이어야 합니다.';
+    passwordError.style.color = 'red';
+    isValid = false;
+  } else if (passwordInput.value.trim().length < 4) {
+    passwordError.innerHTML = '비밀번호는 최소 4자리 이상이어야 합니다.';
+    passwordError.style.color = 'red';
+    isValid = false;
+  } else if(passwordInput.value.trim().length > 12) {
+    passwordError.innerHTML = '비밀번호는 최대 12자리까지 가능합니다.';
+    passwordError.style.color = 'red';
+    isValid = false;
+  } else if (!(/[a-zA-Z]/.test(passwordInput.value.trim())) || !(/\d/.test(passwordInput.value.trim())) || !(/[!@#$%^&*()\-_=+{};:,<.>]/.test(passwordInput.value.trim()))) {
+    passwordError.innerHTML = '영어, 숫자, 특수문자를 모두 포함한 비밀번호를 사용하세요.';
+    passwordError.style.color = 'red';
+    isValid = false;
+  }  else {
+    passwordError.innerHTML = '올바른 비밀번호입니다!';
+    passwordError.style.color = 'green';
+
+  }
+
+
+  if (!confirmPasswordInput.value.trim()) {
+    pwcheckError.innerHTML = '비밀번호가 일치하지 않습니다.';
+    pwcheckError.style.color = 'red';
+    isValid = false;}
+  else if (passwordInput.value.trim() !== confirmPasswordInput.value.trim()) {
+    pwcheckError.innerHTML = '비밀번호가 일치하지 않습니다.';
+    pwcheckError.style.color = 'red';
+    isValid = false;
+  } else{
+    pwcheckError.innerHTML = '비밀번호가 일치합니다.';
+    pwcheckError.style.color = 'green';
+
+  }
+
+
+if(isValid){
+modal.style.display = "flex";
+    //form.submit(); // 폼 제출
+}
+else {return ; }
+
+} 
+
diff --git a/week1/signup/style.css b/week1/signup/style.css
@@ -0,0 +1,74 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin : 60px;
+    background-color: rgb(195, 227, 255);
+}
+
+.container {
+    background-color: rgba(255, 255, 255, 0.8);
+    width : 700px;
+    height : 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+
+
+}
+
+.signup-box {
+    text-align: center;
+
+
+}
+
+form {
+    text-align: center;
+
+
+
+
+
+}
+
+label, input {
+    display: block;
+    text-align: left;
+}
+
+.modal-container {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+
+}
+
+.modal {
+    background: white;
+    padding: 24px 16px;
+    border-radius: 4px;
+    width: 400px;
+    text-align: center;
+
+}
+
+.close-container {
+    text-align: right;
+}
+
+.error{
+    font-size : 12px;
+    position : fixed;
+    margin-top : -20px;
+
+
+}
diff --git a/week1/todo/todo.css b/week1/todo/todo.css
@@ -0,0 +1,66 @@
+body {
+    background-color: rgb(246, 251, 255);
+    text-align: center;
+
+}
+
+
+h1{
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    margin-top : 100px;
+    width : 100%;
+    margin-bottom : 100px;
+
+}
+
+hr{
+    width : 100%;
+
+}
+form{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    margin-top : 20px;
+
+}
+#todoinput{
+    display:flex;
+    justify-content: center;
+    text-align: left;
+    align-items: center;
+    width : 500px;
+    height : 30px;
+}
+#list{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+}
+
+#plan, #done{
+    width : 300px;
+    margin-top : 20px;
+    margin-left : 50px;
+
+}
+
+.button{
+    margin-left : 10px;
+    right : 0;
+
+    text-align : right;
+}
+
+ul{
+    list-style: none;
+    text-align: center;  
+}
+li{
+    margin-bottom : 10px;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/week1/todo/todo.html b/week1/todo/todo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>todo-list</title>
+    <link rel="stylesheet"  href="todo.css">
+
+</head>
+<body>
+    <h1>UMC Study Plan</h1>
+    <hr/>
+    <form id = "input">
+        <input id="todoinput" type="text" placeholder = "스터디 계획을 작성해보세요!" />
+    </form>
+    <div id = "list">
+        <div id ="plan">
+        해야 할 일
+        <hr />
+        <ul id="planul"></ul>
+        </div>
+        <div id ="done">
+        해낸 일
+        <hr />
+        <ul id="doneul"></ul>
+        </div>
+    </div>
+    <script src = "todo.js"></script>
+</body>
+
+</html>