Ease/2week (#13)

* todo 완료 * movie 완료 * 반응형 크기 조정 수정 * 줄바꿈 수정 * 커서 모양 수정
SSUMC-6th · Apr 18, 2024 · 1e4f486 · 1e4f486
1 parent 358c254
commit 1e4f486
Show file tree

Hide file tree

Showing 51 changed files with 9,872 additions and 0 deletions.
diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\README.md",
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/WEB_A/FileContentIndex/0a7c74f8-19ea-44db-a2b2-1c7e1ec237bb.vsidx b/.vs/WEB_A/FileContentIndex/0a7c74f8-19ea-44db-a2b2-1c7e1ec237bb.vsidx
diff --git a/.vs/WEB_A/FileContentIndex/ae877a79-9f1d-4d26-8264-c6471f011d96.vsidx b/.vs/WEB_A/FileContentIndex/ae877a79-9f1d-4d26-8264-c6471f011d96.vsidx
diff --git a/.vs/WEB_A/v17/.wsuo b/.vs/WEB_A/v17/.wsuo
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/ease-1week/todo/.vs/ProjectSettings.json b/ease-1week/todo/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
diff --git a/ease-1week/todo/.vs/VSWorkspaceState.json b/ease-1week/todo/.vs/VSWorkspaceState.json
@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}
diff --git a/ease-1week/todo/.vs/slnx.sqlite b/ease-1week/todo/.vs/slnx.sqlite
diff --git a/ease-1week/todo/.vs/todo/FileContentIndex/8f942dab-f11c-4f0b-adf5-db4e8e8038aa.vsidx b/ease-1week/todo/.vs/todo/FileContentIndex/8f942dab-f11c-4f0b-adf5-db4e8e8038aa.vsidx
diff --git a/ease-1week/todo/.vs/todo/FileContentIndex/951d5d52-0e9f-4ea1-ab2c-3576e32231d7.vsidx b/ease-1week/todo/.vs/todo/FileContentIndex/951d5d52-0e9f-4ea1-ab2c-3576e32231d7.vsidx
diff --git a/ease-1week/todo/.vs/todo/FileContentIndex/d66890eb-f880-4ace-a9e7-77a71b7f49be.vsidx b/ease-1week/todo/.vs/todo/FileContentIndex/d66890eb-f880-4ace-a9e7-77a71b7f49be.vsidx
diff --git a/ease-1week/todo/.vs/todo/v17/.wsuo b/ease-1week/todo/.vs/todo/v17/.wsuo
diff --git a/ease-1week/todo/todohtml.html b/ease-1week/todo/todohtml.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <link rel="stylesheet" href="./todostyle.css" />
+</head>
+<body>
+    <h1>UMC Study Plan</h1><br />
+    <hr />
+    <form id="form">
+        <input id="todoinput" type="text" placeholder = "스터디 계획을 작성해보세요!" autofocus/>
+    </form>
+    <span id="container">
+        <div id="todo">
+            해야 할 일
+            <hr />
+            <ul id="todoul">
+            </ul>
+        </div>
+        <div id="done">
+            해낸 일
+            <hr />
+            <ul id="doneul">
+            </ul>
+        </div>
+    </span>
+    <script src="todoscript.js"></script>
+</body>
+</html>
diff --git a/ease-1week/todo/todoscript.js 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();
+}
diff --git a/ease-1week/todo/todostyle.css 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;
+}
diff --git a/ease-1week/validation/Script1.js b/ease-1week/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';
+}
diff --git a/ease-1week/validation/Style.css b/ease-1week/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;
+}