diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..9b8d400f --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,9 @@ +## 개요⭐️ +내용을 적어주세요. + +## 작업사항⭐️ +- 내용을 적어주세요. + +## 확인⭐️ +- 워크북 키워드 정리 +- 실습 및 미션 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a4d6d9c6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vs/ \ No newline at end of file diff --git a/README.md b/README.md index 462bd006..17c1b0eb 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ SSUMC 6기 WEB 스터디 A조 │ └─yuyeong/1week ``` 1. `닉네임/main 브랜치`가 기본 브랜치로 pr 보낼 때 main 브랜치가 아닌 닉네임/main 브랜치로 올립니다. -2. 매주 실습, 미션은 각자의 닉네임/main 브랜치를 base 브랜치로 삼아 `닉네임/이슈번호 브랜치`를 생성하여 관련 파일을 업로드합니다. +2. 매주 실습, 미션은 각자의 닉네임/main 브랜치를 base 브랜치로 삼아 `닉네임/해당 주차 브랜치`를 생성하여 관련 파일을 업로드합니다. 3. 모든 팀원들의 approve를 받으면, pr을 머지합니다. approve와 merge는 스터디 진행 중에 이루어집니다. branch 명 : 닉네임 / 해당 주차 diff --git a/ease#1week/todo/todohtml.html b/ease#1week/todo/todohtml.html new file mode 100644 index 00000000..e4352387 --- /dev/null +++ b/ease#1week/todo/todohtml.html @@ -0,0 +1,31 @@ + + + + + + + + + +

UMC Study Plan


+
+
+ +
+ +
+ 해야 할 일 +
+ +
+
+ 해낸 일 +
+ +
+
+ + + \ No newline at end of file diff --git a/ease#1week/todo/todoscript.js b/ease#1week/todo/todoscript.js new file mode 100644 index 00000000..2a32c142 --- /dev/null +++ b/ease#1week/todo/todoscript.js @@ -0,0 +1,48 @@ +//JavaScript source code +const form = document.getElementById('form'); +const todoinput = document.getElementById('todoinput'); + +let listcnt = 0; + +form.addEventListener('submit', addtodo); + + +function addtodo(event){ + event.preventDefault(); + let todoul = document.getElementById('todoul'); + let newli = document.createElement('li'); + newli.id = 'li'+listcnt; + let newtext = document.createElement('span'); + newtext.id = 'span'+listcnt; + newtext.textContent = todoinput.value; + let newdonebutton = document.createElement('button'); + newdonebutton.id = 'done'+listcnt; + let line = document.createElement('hr'); + newdonebutton.textContent = "완료"; + newcontainer = document.createElement('div'); + newcontainer.className = 'content'; + + newdonebutton.addEventListener('click', move); + + newli.appendChild(newcontainer); + newcontainer.appendChild(newtext); + newcontainer.appendChild(newdonebutton); + newli.appendChild(line); + todoul.appendChild(newli); + + listcnt++; + todoinput.value = ''; +} + +function move(event){ + let doneul = document.getElementById('doneul'); + let donebutton = event.target; + donebutton.textContent = '삭제'; + doneul.appendChild(donebutton.parentNode.parentNode); + + donebutton.addEventListener('click', buttondelete); +} + +function buttondelete(event){ + event.target.parentNode.parentNode.remove(); +} \ No newline at end of file diff --git a/ease#1week/todo/todostyle.css b/ease#1week/todo/todostyle.css new file mode 100644 index 00000000..0f761748 --- /dev/null +++ b/ease#1week/todo/todostyle.css @@ -0,0 +1,58 @@ +body +{ + background-color: rgb(238, 229, 199, 0.63); + text-align: center; + font-weight:bold; +} + +hr { + background-color: yellow; + border: 0px; + height: 2px; + width: 100%; +} + +#todoinput{ + width: 50%; + height: 40px; + border-radius: 5px; + border: 0; + padding-left: 20px; + background-color: rgb(255, 255, 255, 0.52); +} + +#container{ + display: flex; + flex-direction: row; + justify-content: center; + margin: 20px; +} + +#todo, #done { + width: 300px; + margin-left: 50px; + margin-right: 50px; +} + +#todoul, #doneul { + width: 60%; + padding-left: 60px; + padding-right: 60px; +} + +.content{ + display: flex; + justify-content: space-between; + width: auto; +} + + +li::marker{ + color: yellow; +} + +button { + border: 0; + background-color: rgb(255, 255, 255, 0.52); + border-radius: 3px; +} \ No newline at end of file diff --git a/ease#1week/validation/.vs/ProjectSettings.json b/ease#1week/validation/.vs/ProjectSettings.json new file mode 100644 index 00000000..f8b48885 --- /dev/null +++ b/ease#1week/validation/.vs/ProjectSettings.json @@ -0,0 +1,3 @@ +{ + "CurrentProjectSetting": null +} \ No newline at end of file diff --git a/ease#1week/validation/.vs/slnx.sqlite b/ease#1week/validation/.vs/slnx.sqlite new file mode 100644 index 00000000..28fb8bb8 Binary files /dev/null and b/ease#1week/validation/.vs/slnx.sqlite differ diff --git a/ease#1week/validation/.vs/validation/Script1.js b/ease#1week/validation/.vs/validation/Script1.js new file mode 100644 index 00000000..2ad81a8c --- /dev/null +++ b/ease#1week/validation/.vs/validation/Script1.js @@ -0,0 +1,133 @@ +// JavaScript source code +const form = document.getElementById('form'); + + +const button = document.getElementById('button'); +let pop = document.getElementById('pop'); + +form.addEventListener('change', buttonable); +form.addEventListener('submit', openpop); +pop.addEventListener('click', closepop); + +function buttonable() { + let isValid = validate(); + if (isValid === false) { + button.disabled = true; + } + else { + button.disabled = false; + } +} + +function validate() { + + let nametrue = false; + const username = document.getElementById('username').value; + let nameerror = document.getElementById('nameerror'); + if (username === '') { + nametrue = false; + nameerror.innerHTML = '필수 입력 항목입니다'; + nameerror.style.color = 'red'; + } else { + nametrue = true; + nameerror.innerHTML = '확인되었습니다'; + nameerror.style.color = 'green'; + } + + let emailtrue = false; + const useremail = document.getElementById('useremail').value; + let emailerror = document.getElementById('emailerror'); + if (useremail === '') { + emailtrue = false; + emailerror.innerHTML = '필수 입력 항목입니다'; + emailerror.style.color = 'red'; + } else if (useremail.indexOf('@') === -1) { + emailtrue = false; + emailerror.innerHTML = '이메일 형식으로 입력해주세요'; + emailerror.style.color = 'red'; + } else { + emailtrue = true; + emailerror.innerHTML = '올바른 이메일 형식입니다!' + emailerror.style.color = 'green'; + } + + let agetrue = false; + const userage = document.getElementById('userage').value; + let ageerror = document.getElementById('ageerror'); + if (userage === '') { + agetrue = false; + ageerror.innerHTML = '나이를 입력해주세요'; + ageerror.style.color = 'red'; + } else if (isNaN(userage)) { + agetrue = false; + ageerror.innerHTML = '나이는 숫자 형식이어야 합니다'; + ageerror.style.color = 'red'; + } else if (userage < 0) { + agetrue = false; + ageerror.innerHTML = '나이는 음수를 입력할 수 없습니다'; + ageerror.style.color = 'red'; + } else if (!Number.isInteger(parseFloat(userage))) { + agetrue = false; + ageerror.innerHTML = '나이는 소수를 입력할 수 없습니다'; + ageerror.style.color = 'red'; + } else if (parseInt(userage, 10) < 19) { + agetrue = false; + ageerror.innerHTML = '미성년자는 가입할 수 없습니다'; + ageerror.style.color = 'red'; + } else { + agetrue = true; + ageerror.innerHTML = '올바른 나이 형식입니다!' + ageerror.style.color = 'green'; + } + + let pwdtrue = false; + const password = document.getElementById('password').value; + let pwderror = document.getElementById('pwderror'); + if (password.length < 4) { + pwdtrue = false; + pwderror.innerHTML = '비밀번호는 최소 4자리 이상이어야 합니다'; + pwderror.style.color = 'red'; + } else if (password.length > 12) { + pwdtrue = false; + pwderror.innerHTML = '비밀번호는 최대 12자리까지 가능합니다'; + pwderror.style.color = 'red'; + } else if (!/(?=.*[!@#$%^&*])(?=.*[a-zA-Z])(?=.*[0-9]).{4,12}/.test(password)) { + pwdtrue = false; + pwderror.innerHTML = '영어, 숫자, 특수문자를 모두 조합해서 비밀번호를 작성해야 합니다'; + pwderror.style.color = 'red'; + } else { + pwdtrue = true; + pwderror.innerHTML = '올바른 비밀번호입니다!' + pwderror.style.color = 'green'; + } + + let awdchktrue = false; + const pwdcheck = document.getElementById('pwdcheck').value; + let pwdchkerror = document.getElementById('pwdchkerror'); + if (pwdcheck === '') { + pwdchktrue = false; + pwdchkerror.innerHTML = ''; + } else if (pwdcheck !== password) { + pwdchktrue = false; + pwdchkerror.innerHTML = '비밀번호가 일치하지 않습니다'; + pwdchkerror.style.color = 'red'; + } else { + pwdchktrue = true; + pwdchkerror.innerHTML = '비밀번호와 일치합니다'; + pwdchkerror.style.color = 'green'; + } + + let alltrue = nametrue === true && emailtrue === true && agetrue === true && pwdtrue === true && pwdchktrue === true + return alltrue; +} + +function openpop(event) { + event.preventDefault(); + if (validate() === true) { + pop.style.display = 'block'; + } +} + +function closepop() { + pop.style.display = 'none'; +} \ No newline at end of file diff --git a/ease#1week/validation/.vs/validation/Style.css b/ease#1week/validation/.vs/validation/Style.css new file mode 100644 index 00000000..64add9a9 --- /dev/null +++ b/ease#1week/validation/.vs/validation/Style.css @@ -0,0 +1,52 @@ +body { + background-color: rgb(199, 160, 160); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: rgb(213, 206, 206, 0.49); + padding: 80px 200px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); +} + +.login-box { + text-align: center; +} + +form { + margin-top: 20px; +} + +label, input { + display: block; + width: 300px; + border-color: rgb(160, 124, 124); + background-color: transparent; +} + +#button { + width: 100px; + margin: 0 auto; + border-radius: 5px; +} + +#pop{ + position: fixed; + background-color: white; + border-radius: 5px; + text-align: center; + padding: 20px; + display: none; +} + + +#nameerror, #emailerror, #ageerror, #pwderror, #pwdchkerror { + color: red; + font-size: 12px; + text-align: left; +} \ No newline at end of file diff --git a/ease#1week/validation/.vs/validation/index.html b/ease#1week/validation/.vs/validation/index.html new file mode 100644 index 00000000..6f845458 --- /dev/null +++ b/ease#1week/validation/.vs/validation/index.html @@ -0,0 +1,45 @@ + + + + + 로그인 + + + +
+
+

회원가입

+
+
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ + +
+
+
+
+

가입 성공!

+

회원가입을 축하합니다

+ +
+ + + + \ No newline at end of file