UMC-CAU-6th · jungwho · May 16, 2024 · May 23, 2024 · May 23, 2024
diff --git a/hoo/week01/counter/index.html b/hoo/week01/counter/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+    <title>Counter</title>
+</head>
+<body>
+    <h2 id="number">0</h2>
+    <button id="increase">+1</button>
+    <button id="decrease">-1</button>
+    <script src = "index.js"></script>
+</body>
+</html>
diff --git a/hoo/week01/counter/index.js b/hoo/week01/counter/index.js
@@ -0,0 +1,13 @@
+const number = document.getElementById("number");
+const increase = document.getElementById("increase");
+const decrease = document.getElementById("decrease");
+
+increase.onclick = () => {
+  console.log("increase 가 클릭됨");
+  number.innerText = parseInt(number.innerText) + 1;
+};
+
+decrease.onclick = () => {
+  console.log("decrease 가 클릭됨");
+  number.innerText = parseInt(number.innerText) - 1;
+};
diff --git a/hoo/week01/modal/index.html b/hoo/week01/modal/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+    <title>Modal</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>안녕하세요!</h1>
+    <p>내용내용내용</p>
+    <button id = "modalOpen">열기</button>
+    <div id="modal-wrapper" style="display: none;">
+        <div id="modal">
+            <h1>안녕하세요!</h1>
+            <p>모달 내용은 어쩌고 저쩌고</p>
+            <button id="modalClose">닫기</button>
+        </div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/hoo/week01/modal/index.js b/hoo/week01/modal/index.js
@@ -0,0 +1,11 @@
+const open = document.getElementById("modalOpen");
+const close = document.getElementById("modalClose");
+const modalWrapper = document.getElementById("modal-wrapper");
+
+open.onclick = () => {
+  modalWrapper.style.display = "flex";
+};
+
+close.onclick = () => {
+  modalWrapper.style.display = "none";
+};
diff --git a/hoo/week01/modal/style.css b/hoo/week01/modal/style.css
@@ -0,0 +1,18 @@
+#modal-wrapper{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color : rgb(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#modal{
+    background-color: white;
+    width: 30%;
+    height: 30%;
+    padding: 1%;
+}
diff --git a/hoo/week01/validation/index.html b/hoo/week01/validation/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+    <title>Validation</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <div id="join-wrapper">
+        <p id="join-title">회원가입</p>
+        <br>
+        <div id="input-wrapper">
+            <p class="input-title">이름</p>
+            <input class="join-input" id="input-name" onchange="changeName()" type="text" />
+            <p class="input-check" id="name-message" style="color: aliceblue">이름을 입력하시오.</p>
+
+            <p class="input-title">이메일</p>
+            <input class="join-input" id="input-email" onchange="changeEmail()" type="text" />
+            <p class="input-check" id="email-message" style="color: aliceblue">올바른 이메일이 아닙니다.</p>
+
+            <p class="input-title">나이</p>
+            <input class="join-input" id="input-age" onchange="changeAge()" type="text" />
+            <p class="input-check" id="age-message" style="color: aliceblue">나이를 입력하시오</p>
+
+            <p class="input-title">비밀번호</p>
+            <input class="join-input" id="input-pw" onchange="changePw()" type="password" />
+            <p class="input-check" id="pw-message" style="color: aliceblue">비밀번호를 입력하시오</p>
+
+            <p class="input-title">비밀번호 확인</p>
+            <input class="join-input" id="input-pw-check" onchange="changePwCheck()" type="password" />
+            <p class="input-check" id="pw-check-message" style="color: aliceblue">비밀번호가 일치하지 않습니다.</p>
+        </div>
+        <button id="join-button" disabled>가입하기</button>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/hoo/week01/validation/index.js b/hoo/week01/validation/index.js
@@ -0,0 +1,108 @@
+const name = document.getElementById("input-name");
+const email = document.getElementById("input-email");
+const age = document.getElementById("input-age");
+const pw = document.getElementById("input-pw");
+const pwCheck = document.getElementById("input-pw-check");
+
+const nameMs = document.getElementById("name-message");
+const emailMs = document.getElementById("email-message");
+const ageMs = document.getElementById("age-message");
+const pwMs = document.getElementById("pw-message");
+const pwCheckMs = document.getElementById("pw-check-message");
+
+const btn = document.getElementById('join-button');
+let ck1 =  false;
+let ck2 = false;
+let ck3 = false;
+let ck4 = false;
+let ck5 = false;
+
+const ck = () =>{
+  if(ck1 && ck2 && ck3 && ck4 && ck5){
+    btn.disabled = false;
+  }
+}
+
+const changeName = () =>{
+  if (name.value !== "") {
+    nameMs.innerText = "멋진 이름이군요!";
+    nameMs.style.color = "green";
+    ck1 = true;
+    ck();
+  }
+  else{
+    nameMs.innerText = "이름을 입력하시오";
+    nameMs.style.color = "red";
+
+  }
+}
+const changeEmail = () =>{
+  if (email.value.includes("@")){
+    emailMs.innerText = "올바른 이메일 형식입니다"
+    emailMs.style.color = "green";
+    ck2 = true;
+    ck();
+  }
+  else{
+    emailMs.innerText = "올바른 이메일을 입력하시오"
+    emailMs.style.color = "red";
+
+  }
+}
+const changeAge = () =>{
+  const numAge = Number(age.value);
+  if (isNaN(age.value)){
+    ageMs.innerText = "숫자로 입력하세요";
+    ageMs.style.color = 'red';
+  }
+  else{
+    if (Number(numAge < 0 || !Number.isInteger(numAge))){
+      ageMs.innerText = "올바른 나이를 입력하세요";
+      ageMs.style.color = 'red';
+    }
+    else if(numAge < 19){
+      ageMs.innerText = "19세 미만은 가입할 수 없습니다";
+      ageMs.style.color = 'red';    
+    }
+    else{
+      ageMs.innerText = "올바른 나이 형식입니다"
+      ageMs.style.color = 'green';
+      ck3 = true;
+      ck();
+    }
+  }
+}
+const changePw = () =>{
+  var pattern1 = /[0-9]/;				
+	var pattern2 = /[a-zA-Z]/;			
+	var pattern3 = /[~!@#$%^&*()_+|<>?:{}]/;	
+
+  if(pw.value.length < 5 || pw.value.length > 12){
+    pwMs.innerText = "비밀번호는 5~12자리로 입력하시오";
+		pwMs.style.color = "red";
+  }
+
+  else if(!pattern1.test(pw.value) || !pattern2.test(pw.value) || !pattern3.test(pw.value)) {
+		pwMs.innerText = "문자, 숫자, 특수문자로 구성하여야 합니다";
+		pwMs.style.color = "red";
+	} 
+
+  else{
+  	pwMs.innerText = "올바른 비밀번호 형식입니다";
+		pwMs.style.color = "green"; 
+    ck4 = true;
+    ck();
+  }
+}
+const changePwCheck = () =>{
+  if (pw.value == pwCheck.value){
+    pwCheckMs.innerText = "비밀번호가 일치합니다";
+		pwCheckMs.style.color = "green";	  
+    ck5 = true;  
+    ck();
+  }
+  else{
+    pwCheckMs.innerText = "비밀번호가 일치하지 않습니다";
+		pwCheckMs.style.color = "red";	    
+  }
+}
diff --git a/hoo/week01/validation/style.css b/hoo/week01/validation/style.css
@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+}
+
+body{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#join-wrapper{
+    background-color: aliceblue;
+    width: 40%;
+    height: 75%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#join-button{
+    margin-top: 2.5vh;
+    padding: 2.5px 10px;
+}
+
+.input-title{
+    margin-top: 1vh;
+    font-size: 13px;
+}
+
+.input-check{
+    font-size: 10px;
+    color: red;
+}
diff --git a/hoo/week02/counter/index.js b/hoo/week02/counter/index.js
@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+export default function counterPage() {
+  const [num, setNum] = useState(0);
+  const onClickPlus = () => {
+    setNum(num + 1);
+  };
+  const onClickMinus = () => {
+    setNum(num - 1);
+  };
+
+  return (
+    <>
+      <p>{num}</p>
+      <button onClick={onClickPlus}>PLUS</button>
+      <button onClick={onClickMinus}>Minus</button>
+    </>
+  );
+}
diff --git a/hoo/week02/modal/index.js b/hoo/week02/modal/index.js
diff --git a/hoo/week02/modal/modal.js b/hoo/week02/modal/modal.js
diff --git a/hoo/week02/moviePoster/index.js b/hoo/week02/moviePoster/index.js
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { movies } from "./movieData";
+import { Container, Container2, Container3 } from "./style";
+
+export default function moviePosterPage() {
+  return (
+    <>
+      <Container>
+        {movies.results.slice(0, 5).map((el, index) => (
+          <div>
+            <Container3>
+              <p>{el.title}</p>
+              <p>{el.overview}</p>
+            </Container3>
+            <img
+              key={index}
+              src={`https://image.tmdb.org/t/p/w500/${el.poster_path}`}
+              style={{ width: "18vw", height: "30vw;" }}
+            />
+            <Container2>
+              <p>{el.title}</p>
+              <p>{el.vote_average}</p>
+            </Container2>
+          </div>
+        ))}
+      </Container>
+
+      <Container>
+        {movies.results.slice(5, 10).map((el, index) => (
+          <div>
+            <Container3>
+              <p>{el.title}</p>
+              <p>{el.overview}</p>
+            </Container3>
+            <img
+              key={index}
+              src={`https://image.tmdb.org/t/p/w500/${el.poster_path}`}
+              style={{ width: "18vw", height: "30vw;" }}
+            />
+            <Container2>
+              <p>{el.title}</p>
+              <p>{el.vote_average}</p>
+            </Container2>
+          </div>
+        ))}
+      </Container>
+
+      <Container>
+        {movies.results.slice(10, 15).map((el, index) => (
+          <div>
+            <Container3>
+              <p>{el.title}</p>
+              <p>{el.overview}</p>
+            </Container3>
+            <img
+              key={index}
+              src={`https://image.tmdb.org/t/p/w500/${el.poster_path}`}
+              style={{ width: "18vw", height: "30vw;" }}
+            />
+            <Container2>
+              <p>{el.title}</p>
+              <p>{el.vote_average}</p>
+            </Container2>
+          </div>
+        ))}
+      </Container>
+
+      <Container>
+        {movies.results.slice(15, 20).map((el, index) => (
+          <div>
+            <Container3>
+              <p>{el.title}</p>
+              <p>{el.overview}</p>
+            </Container3>
+            <img
+              key={index}
+              src={`https://image.tmdb.org/t/p/w500/${el.poster_path}`}
+              style={{ width: "18vw", height: "30vw;" }}
+            />
+            <Container2>
+              <p>{el.title}</p>
+              <p>{el.vote_average}</p>
+            </Container2>
+          </div>
+        ))}
+      </Container>
+    </>
+  );
+}