From 9ea682f3fa59fdb83b3cea97d9f1e72ce5fa04f9 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sat, 14 Oct 2023 17:39:24 +0900 Subject: [PATCH] =?UTF-8?q?2=EC=A3=BC=EC=B0=A8=EC=8B=A4=EC=8A=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2\354\243\274\354\260\250/index.css" | 27 ++++++++++++++++++ .../2\354\243\274\354\260\250/index.html" | 21 ++++++++++++++ .../2\354\243\274\354\260\250/index.js" | 28 +++++++++++++++++++ 3 files changed, 76 insertions(+) create mode 100644 "\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css" create mode 100644 "\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html" create mode 100644 "\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js" diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css" new file mode 100644 index 0000000..2c4d5c7 --- /dev/null +++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/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; + } \ No newline at end of file diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html" new file mode 100644 index 0000000..012706c --- /dev/null +++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html" @@ -0,0 +1,21 @@ + + + + + + + 2차 세미나 실습 + + +

my favorite fruit list

+ + + + + \ No newline at end of file diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js" new file mode 100644 index 0000000..ae2b12c --- /dev/null +++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/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); +