2주차실습

DO-SOPT-WEB · Oct 14, 2023 · 9ea682f · 9ea682f
1 parent 43c2a31
commit 9ea682f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/실습/2주차/index.css b/실습/2주차/index.css
@@ -0,0 +1,27 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: beige;
+  }
+
+  h1 {
+    text-align: center;
+  }
+
+  ul {
+    font-size: 20px;
+  }
+
+  .count {
+    cursor: pointer;
+  }
+
+  .red {
+    color: red;
+  }
+
+  .blue {
+    color: blue;
+  }
diff --git a/실습/2주차/index.html b/실습/2주차/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+    <title>2차 세미나 실습</title>
+  </head>
+  <body>
+    <h1>my favorite fruit list</h1>
+    <ul>
+      <li class="red">apple</li>
+      <li class="red">orange</li>
+      <li>banana</li>
+      <li>grape</li>
+      <li>strawberry</li>
+    </ul>
+    <button class="count">과일 개수를 알려줘!</button>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/실습/2주차/index.js b/실습/2주차/index.js
@@ -0,0 +1,28 @@
+// strawberry 아래에 mango 추가하기
+const mango = document.createElement("li");
+const mangoText = document.createTextNode("mango");
+
+mango.appendChild(mangoText);
+
+const fruitList = document.querySelector("ul");
+fruitList.appendChild(mango);
+
+// class가 red인 애들만 삭제하기
+const redFruit = document.querySelectorAll(".red");
+redFruit.forEach((fruit) => {
+    fruit.remove();
+})
+
+// 세번째 과일 파란색 만들기
+const thirdFruit = document.querySelector("li:nth-child(3)");
+thirdFruit.classList.add("blue");
+
+// 버튼 누르면 과일 개수 알려주기
+const lengthButton = document.querySelector("button.count");
+
+function showLength() {
+    const allList= document.querySelectorAll("li");
+    alert(`과일개수는 ${allList.length}입니다`);
+}
+lengthButton.addEventListener("click",showLength);
+