DevelopSoo · loveytheb · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/1번/1.md b/1번/1.md
@@ -1,3 +1,8 @@
 ### console.log와 return의 차이가 무엇인가요?
 
 (여기에 작성)
+console.logs
+- 값을 결과로 정의(저장)하지 않고 단순 결과 값을 콘솔에 단순 표시하는 것
+
+return
+- 다음의 결과로 함수의 값을 정의(저장)하고 함수를 종료하겠다는 의미
diff --git a/2번/2.html b/2번/2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2주차 숙제 2번</title>
+</head>
+<body>
+    <script src="2.js"></script>
+</body>
+</html>
diff --git a/2번/2.js b/2번/2.js
@@ -7,5 +7,7 @@ function 콘솔함수() {
 }
 
 const 리턴의결과 = 리턴함수(); // 리턴의결과에는 무슨 값이 들어가있을까요? 아래 주석처리 후 작성해보세요
+// 리턴함수하이
 
 const 콘솔의결과 = 콘솔함수(); // 콘솔의결과에는 무슨 값이 들어가있을까요? 아래 주석처리 후 작성해보세요
+// undefined
diff --git a/3번/3.html b/3번/3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2주차 숙제 3번</title>
+</head>
+<body>
+    <script src="3.js"></script>
+</body>
+</html>
diff --git a/3번/3.js b/3번/3.js
@@ -7,4 +7,4 @@ function 나이말해주는함수(나이) {
 }
 
 // 콘솔로그에 어떻게 작성해야 할까요?
-console.log(); // "안녕 철수야~ 반가워. 내 나이는 20살이야"
+console.log(`${인사하는함수("철수")} 반가워. ${나이말해주는함수(20)}`); // "안녕 철수야~ 반가워. 내 나이는 20살이야"
diff --git a/4번/4.html b/4번/4.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2주차 숙제 4번</title>
+</head>
+<body>
+    <script src="4.js"></script>
+</body>
+</html>
diff --git a/4번/4.js b/4번/4.js
@@ -1,7 +1,8 @@
 let 총합 = 0;
 
 // for문을 이용하여 숫자리스트의 숫자를 모두 더한 값을 총합 변수에 할당 후 console.log로 출력합니다.
-for () {
+for (let i = 0; i <= 10; i++) {
+    총합 += i;
 }
 
 console.log(총합) // 결과: 55
diff --git a/5번/5.html b/5번/5.html
@@ -4,14 +4,14 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
+	<title>2주차 숙제 5번</title>
 </head>
 
 <body>
 	<div class="number">1</div>
 	<div class="number">2</div>
 	<div class="number">3</div>
-	<script src="index.js"></script>
+	<script src="5.js"></script>
 </body>
 
 </html>
diff --git a/5번/5.js b/5번/5.js
@@ -0,0 +1,12 @@
+const num = document.querySelectorAll(".number")
+
+for (let i = 0; i <= num.length; i++) {
+    // 1. 현재 숫자 값 가져오기
+    const currentNum = parseInt(num[i].textContent, 10);
+
+    // 2. 10을 더한 새로운 숫자 계산하기
+    const newNum = currentNum + 10;
+
+    // 3. 새로운 숫자로 텍스트 내용 업데이트하기
+    num[i].textContent = newNum;
+}
diff --git a/6번/6.html b/6번/6.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
+	<title>2주차 숙제 6번</title>
 </head>
 
 <body>

diff --git a/7번/7.html b/7번/7.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2주차 숙제 7번</title>
+</head>
+<body>
+    <div class="timeBox">
+        <p class="timer"></p>
+    </div>
+    <script src="7.js"></script>
+</body>
+</html> 
diff --git a/7번/7.js b/7번/7.js
@@ -0,0 +1,14 @@
+const timeBox = document.querySelector(".timeBox");
+const timer = document.querySelector(".timer");
+
+let count = Number(timer.textContent);
+
+const intervalId = setInterval(() => {
+    if (count < 10) {
+        count += 1;
+        timer.innerHTML = count;
+    } else {
+        timeBox.style.display = "none";
+        clearInterval(intervalId);
+    }
+}, 1000);
diff --git a/8번/8.css b/8번/8.css
@@ -0,0 +1,12 @@
+body {
+    height: 200vh;
+    background-color: bisque;
+  }
+
+.upbtn {
+    position: fixed;
+    height: 40px;
+    width: 60px;
+    right: 10px;
+    bottom: 10px;
+}
diff --git a/8번/8.html b/8번/8.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="8.css">
+    <title>2주차 숙제 8번</title>
+</head>
+<body>
+    <h1>2주차 숙제 8번 스크롤 이벤트 구현하기</h1>
+    <button class="upbtn">UP!</button>
+    <script src="8.js"></script>
+</body>
+</html>
diff --git a/8번/8.js b/8번/8.js
@@ -0,0 +1,19 @@
+const upbtn = document.querySelector(".upbtn");
+
+window.addEventListener("scroll", () => {
+    if (scrollY > 100) {
+        upbtn.style.display = "block";
+        upbtn.classList.add("show");
+    } else {
+        upbtn.style.display = "none";
+        upbtn.classList.remove("show");
+    }
+})
+
+upbtn.addEventListener("click", () => {
+    window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+    });
+});
diff --git a/9번/9.md b/9번/9.md
@@ -1,3 +1,7 @@
 ### 애니메이션 이벤트 구현하는 법을 4단계로 글로 작성해보세요.
 
 (여기에 작성)
+1. 애니메이션 발생 전 모습 구현하기
+2. 애니메이션 발생 후 모습 구현하기
+3. css transition 적용하기
+4. 이벤트 등록하기