From dce3223e13d483b6db8e064eb29a0fad0b3dfcc3 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Tue, 17 Oct 2023 22:51:38 +0900 Subject: [PATCH 01/51] =?UTF-8?q?=F0=9F=8E=A8=20=EC=8B=A4=EC=8A=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\354\213\244\354\212\265/index.html" | 22 ++++++++++++++++++++++ "\354\213\244\354\212\265/index.js" | 26 ++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 "\354\213\244\354\212\265/index.html" create mode 100644 "\354\213\244\354\212\265/index.js" diff --git "a/\354\213\244\354\212\265/index.html" "b/\354\213\244\354\212\265/index.html" new file mode 100644 index 0000000..cb1c0ef --- /dev/null +++ "b/\354\213\244\354\212\265/index.html" @@ -0,0 +1,22 @@ + + + + + + + 2차 세미나 실습 + + +

my favorite fruit list

+ + + + + + diff --git "a/\354\213\244\354\212\265/index.js" "b/\354\213\244\354\212\265/index.js" new file mode 100644 index 0000000..1a9fb78 --- /dev/null +++ "b/\354\213\244\354\212\265/index.js" @@ -0,0 +1,26 @@ +//망고추가 +const mango = document.createElement("li"); +const mangoText = document.createTextNode("mango"); +mango.appendChild(mangoText); +//mango.innerText = 'mango'; +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); From c1c28ccbc5d0a6baa60baa94b4e7f28eb89b6690 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:43:24 +0900 Subject: [PATCH 02/51] =?UTF-8?q?=F0=9F=8D=B1=20data.js=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/DATA.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 assign1/DATA.js diff --git a/assign1/DATA.js b/assign1/DATA.js new file mode 100644 index 0000000..3feb894 --- /dev/null +++ b/assign1/DATA.js @@ -0,0 +1,14 @@ +const DATA = [ + { title: "꽃속의 웰코", summary: "이뿌지!!" }, + { title: "멀보니웰코", summary: "날씨 조타!" }, + { title: "눈웃음웰코", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, + { title: "", summary: "" }, +]; + +export default DATA; From 5f4973faac9b55399c0136fd569a4869704cfe48 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:43:42 +0900 Subject: [PATCH 03/51] =?UTF-8?q?=F0=9F=8E=A8=20index.js=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/index.html | 87 +++++++++++++++++++++++++++++----------------- 1 file changed, 55 insertions(+), 32 deletions(-) diff --git a/assign1/index.html b/assign1/index.html index a5985c3..78989df 100644 --- a/assign1/index.html +++ b/assign1/index.html @@ -5,6 +5,8 @@ 📷먀먀먀먀먀 혠찡의 사진관티비 꺅📷 + +
먀먀먀먀먀 혠찡의 사진관티비 꺅
@@ -50,38 +52,58 @@

클릭하면 이동해요!

🐶아기멈무🐶

- 꽃속에서웰코 - - 웃고있는웰코 - 꽃속에서웰코 - 어디바 - 기염댕 - 만세링 - 두마리지롱 - 어디가 - 사과먹구싶다 +
+ 꽃속에서웰코 +
+
+ 멀보니웰코 +
+
+ 웃고있는웰코 +
+
+ 잠든 말티쥬 +
+
+ 어디바 +
+
+ 기염댕 +
+
+ 만세링 +
+
+ 두마리지롱 +
+
+ 어디가 +
+
+ 사과먹구싶다 +
@@ -160,5 +182,6 @@

🐣다른아가들🐣

귀여워찌??

+ From fe862b1b6dee86f92f5b1c9f83a8895415b09f89 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:44:06 +0900 Subject: [PATCH 04/51] =?UTF-8?q?=E2=9C=A8=201.a=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=ED=98=B8=EB=B2=84=EC=8B=9C=20=EC=96=B4=EB=91=A1?= =?UTF-8?q?=EA=B2=8C=20=EC=B2=98=EB=A6=AC=EB=90=98=EB=A9=B0=20=EC=A0=9C?= =?UTF-8?q?=EB=AA=A9=20=EC=82=AC=EC=A7=84=20=EB=82=98=ED=83=80=EB=82=A8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/index.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 assign1/index.js diff --git a/assign1/index.js b/assign1/index.js new file mode 100644 index 0000000..b7039f0 --- /dev/null +++ b/assign1/index.js @@ -0,0 +1,30 @@ +import DATA from "./DATA.js"; + +const $ = (selector) => document.querySelector(selector); +const $$ = (selector) => document.querySelectorAll(selector); + +// 1.a +// const firstImages = $(".first_pic_wrapper img"); +const firstImages = document.querySelectorAll(".first_section_pic"); + +firstImages.forEach((pic, index) => { + const h2 = document.createElement("h2"); + h2.classList.add("title"); + const p = document.createElement("p"); + p.classList.add("summary"); + const { title, summary } = DATA[index]; + pic.addEventListener("mouseover", function () { + pic.childNodes[1].classList.add("addTitle"); + pic.classList.add("addTitle"); + h2.innerText = title; + pic.appendChild(h2); + p.innerText = summary; + pic.appendChild(p); + }); + + pic.addEventListener("mouseleave", function () { + pic.classList.remove("addTitle"); + h2.innerText = ""; + p.innerText = ""; + }); +}); From 7a89d46db81cdf0c239f0572f6d23852ef8b1b00 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:44:20 +0900 Subject: [PATCH 05/51] =?UTF-8?q?=F0=9F=92=84=20title,=20summary=20?= =?UTF-8?q?=EA=BE=B8=EB=AF=B8=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/style.css | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/assign1/style.css b/assign1/style.css index 7b5c0c7..07d9918 100644 --- a/assign1/style.css +++ b/assign1/style.css @@ -159,7 +159,6 @@ nav article a:hover { flex-wrap: wrap; - gap: 0.2rem; width: 80rem; } @@ -168,6 +167,38 @@ nav article a:hover { height: 15rem; } +.first_pic_wrapper { + display: flex; + flex-wrap: wrap; + + gap: 0.2rem; +} + +.first_section_pic { + cursor: pointer; + position: relative; +} + +.addTitle { + cursor: pointer; + filter: brightness(80%); +} + +.title { + position: absolute; + top: 50%; + left: 40%; + color: white; + z-index: 999; +} + +.summary { + position: absolute; + top: 60%; + left: 50%; + color: white; +} + @media screen and (max-width: 1024px) { body { display: flex; From c90b73f1639bcfef05c70165dc002b55de51492b Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:55:50 +0900 Subject: [PATCH 06/51] =?UTF-8?q?=E2=9C=A8=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=88=AC=EB=AA=85=EB=8F=84=20?= =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/index.js | 13 ++++++++++++- assign1/style.css | 3 +++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/assign1/index.js b/assign1/index.js index b7039f0..80c9078 100644 --- a/assign1/index.js +++ b/assign1/index.js @@ -3,7 +3,7 @@ import DATA from "./DATA.js"; const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); -// 1.a +// 1.a /b // const firstImages = $(".first_pic_wrapper img"); const firstImages = document.querySelectorAll(".first_section_pic"); @@ -28,3 +28,14 @@ firstImages.forEach((pic, index) => { p.innerText = ""; }); }); + +//2.a +const gotopBtn = document.getElementById("gotop_btn"); +window.addEventListener("scroll", () => { + const scrollY = window.scrollY; + const maxScroll = document.body.clientHeight - window.innerHeight; // 최대 스크롤 위치 + + // 스크롤 위치에 따라 투명도 조절 + const opacity = scrollY / maxScroll; + gotopBtn.style.opacity = opacity; +}); diff --git a/assign1/style.css b/assign1/style.css index 07d9918..da16d1a 100644 --- a/assign1/style.css +++ b/assign1/style.css @@ -382,4 +382,7 @@ nav article a:hover { background-color: var(--subcolor02); font-family: Dovemayo_gothic; + + opacity: 0; + transition: opacity 0.3s; } From 84b6da44365cf76d7f041a116919dad6833e14d9 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Wed, 18 Oct 2023 00:56:32 +0900 Subject: [PATCH 07/51] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=EA=B9=94=EB=81=94=ED=95=98=EA=B2=8C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assign1/index.js b/assign1/index.js index 80c9078..75c8bc6 100644 --- a/assign1/index.js +++ b/assign1/index.js @@ -33,9 +33,7 @@ firstImages.forEach((pic, index) => { const gotopBtn = document.getElementById("gotop_btn"); window.addEventListener("scroll", () => { const scrollY = window.scrollY; - const maxScroll = document.body.clientHeight - window.innerHeight; // 최대 스크롤 위치 - - // 스크롤 위치에 따라 투명도 조절 + const maxScroll = document.body.clientHeight - window.innerHeight; const opacity = scrollY / maxScroll; gotopBtn.style.opacity = opacity; }); From 5d223cea796a02a70fe4f53cf7c189f049e78905 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 00:22:53 +0900 Subject: [PATCH 08/51] =?UTF-8?q?=F0=9F=8D=B1=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/DATA.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 assign2/DATA.js diff --git a/assign2/DATA.js b/assign2/DATA.js new file mode 100644 index 0000000..06dc526 --- /dev/null +++ b/assign2/DATA.js @@ -0,0 +1,29 @@ +//1.a +export const INIT_BALANCE = 0; + +export const HISTORY_LIST = [ + { + title: "용돈", + summary: ["아빠가 용돈을 주었음"], + money: 150000, + inout: income, + }, + { + title: "과외비", + summary: ["과외비"], + money: 700000, + inout: income, + }, + { + title: "의류", + summary: ["지그재그"], + money: 20000, + inout: outcome, + }, + { + title: "식비", + summary: ["핵밥 천호점"], + money: 36900, + inout: outcome, + }, +]; From 22646cae2a855506891ac1d788701260fdc3e631 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 00:23:05 +0900 Subject: [PATCH 09/51] =?UTF-8?q?=F0=9F=8E=A8=20index.js=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assign2/index.html b/assign2/index.html index 2b97a82..77df1e6 100644 --- a/assign2/index.html +++ b/assign2/index.html @@ -5,6 +5,7 @@ 혠아 돈좀 애껴라 +
@@ -124,5 +125,6 @@

-200000

+ From 971f2359712c35363021155005b54355a7bfe873 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 00:23:39 +0900 Subject: [PATCH 10/51] =?UTF-8?q?=F0=9F=93=9D=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign1/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assign1/index.js b/assign1/index.js index 75c8bc6..52c393b 100644 --- a/assign1/index.js +++ b/assign1/index.js @@ -3,7 +3,7 @@ import DATA from "./DATA.js"; const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); -// 1.a /b +// 1.a , b // const firstImages = $(".first_pic_wrapper img"); const firstImages = document.querySelectorAll(".first_section_pic"); From 778df50a52c8f0e3cc93302a6b0ce276389082e3 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 01:19:30 +0900 Subject: [PATCH 11/51] =?UTF-8?q?=F0=9F=94=A5=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/DATA.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/assign2/DATA.js b/assign2/DATA.js index 06dc526..03daff9 100644 --- a/assign2/DATA.js +++ b/assign2/DATA.js @@ -1,29 +1,27 @@ //1.a -export const INIT_BALANCE = 0; - export const HISTORY_LIST = [ { title: "용돈", - summary: ["아빠가 용돈을 주었음"], + summary: "아빠가 용돈을 주었음", money: 150000, - inout: income, + getto: true, }, { title: "과외비", - summary: ["과외비"], + summary: "과외비", money: 700000, - inout: income, + getto: true, }, { title: "의류", - summary: ["지그재그"], + summary: "지그재그", money: 20000, - inout: outcome, + getto: false, }, { title: "식비", - summary: ["핵밥 천호점"], + summary: "핵밥 천호점", money: 36900, - inout: outcome, + getto: false, }, ]; From b91b555dea89c840ef6741eae76cf9be2c2b0be0 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 01:19:41 +0900 Subject: [PATCH 12/51] =?UTF-8?q?=F0=9F=94=A5=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.html | 75 ++++------------------------------------------ 1 file changed, 5 insertions(+), 70 deletions(-) diff --git a/assign2/index.html b/assign2/index.html index 77df1e6..527f3c2 100644 --- a/assign2/index.html +++ b/assign2/index.html @@ -14,15 +14,15 @@

혠니의 가계뷰

나의 자산

-

5000000

+

+ - 300000 +
- - 50300 +
@@ -54,76 +54,11 @@

내역 리스트

-
-
-
식비
-

에베레스트 하남스타필드점

- -
- -

-39000

-
-
-
-
카페
-

젤라띠 젤라또

- -
- -

-5500

-
-
-
-
알바비
-

이번달 과외비

- -
- - -

+6000000

-
-
-
-
쇼핑
-

러쉬 하남스타필드점

- -
- -

-35000

-
-
-
-
식비
-

등촌샤브칼국수 회기역점

- -
- -

-24000

-
-
-
-
수입
-

10월 용돈

- -
- -

800000

-
-
-
-
기타
-

삼천리자전거 둔촌동점

- -
- -

-200000

-
-
-
+
- +
From e3b8eabe4f20575a9af8e78aad1ba08373552fb3 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 01:19:58 +0900 Subject: [PATCH 13/51] =?UTF-8?q?=E2=9C=A8=20=EA=B3=BC=EC=A0=9C=202=201,?= =?UTF-8?q?=202=20=EB=B2=88=20=EB=A7=88=EB=AC=B4=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 assign2/index.js diff --git a/assign2/index.js b/assign2/index.js new file mode 100644 index 0000000..28a4cbb --- /dev/null +++ b/assign2/index.js @@ -0,0 +1,50 @@ +import { HISTORY_LIST } from "./DATA.js"; + +// 1.b +let INIT_BALANCE = 0; +const list = document.querySelector("#list"); +const h1 = document.querySelector("#my_money > h1"); + +HISTORY_LIST.forEach((data) => { + const { title, summary, money, getto } = data; + + const listWrapper = document.createElement("article"); + listWrapper.classList.add("list_wrapper"); + + const h5 = document.createElement("h5"); + h5.innerText = title; + + const h4 = document.createElement("h4"); + h4.innerText = summary; + + const h3 = document.createElement("h3"); + h3.textContent = getto ? money : "-" + money; + h3.classList.add(getto ? "plus" : "minus"); + + const div = document.createElement("div"); + div.classList.add("money_and_btn"); + const button = document.createElement("button"); + button.innerText = "x"; + div.appendChild(button); + div.appendChild(h3); + + listWrapper.append(h5, h4, div); + list.appendChild(listWrapper); + + //총합 + INIT_BALANCE += getto ? money : -money; + h1.innerText = INIT_BALANCE; +}); + +//2 +let IN_MONEY = 0; +let OUT_MONEY = 0; +const plusMoney = document.getElementById("plus_money"); +const minusMoney = document.getElementById("minus_money"); + +HISTORY_LIST.forEach((element) => { + const { money, getto } = element; + getto ? (IN_MONEY += money) : (OUT_MONEY += money); + plusMoney.innerText = IN_MONEY; + minusMoney.innerText = OUT_MONEY; +}); From df26c1ea629b40269faeadd87179e924b4d0e37d Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 16:47:30 +0900 Subject: [PATCH 14/51] =?UTF-8?q?=F0=9F=8E=A8=20chckbox=20checked=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=A7=80=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/assign2/index.html b/assign2/index.html index 527f3c2..18b0275 100644 --- a/assign2/index.html +++ b/assign2/index.html @@ -41,13 +41,15 @@

내역 리스트

+ class="input_checkbox" /> + class="input_checkbox" /> From 19e601237843771498060249d597f8eaa743b849 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 16:47:48 +0900 Subject: [PATCH 15/51] =?UTF-8?q?=F0=9F=8E=A8=203,4=EB=B2=88=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.js | 122 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 23 deletions(-) diff --git a/assign2/index.js b/assign2/index.js index 28a4cbb..4794dce 100644 --- a/assign2/index.js +++ b/assign2/index.js @@ -1,42 +1,55 @@ import { HISTORY_LIST } from "./DATA.js"; // 1.b -let INIT_BALANCE = 0; const list = document.querySelector("#list"); -const h1 = document.querySelector("#my_money > h1"); -HISTORY_LIST.forEach((data) => { - const { title, summary, money, getto } = data; +function makeList(MoneyList, container) { + MoneyList.forEach((data, index) => { + const { title, summary, money, getto } = data; + + const listWrapper = document.createElement("article"); + listWrapper.classList.add("list_wrapper"); + listWrapper.classList.add( + getto ? "plus_list_wrapper" : "minus_list_wrapper" + ); + + const h5 = document.createElement("h5"); + h5.innerText = title; - const listWrapper = document.createElement("article"); - listWrapper.classList.add("list_wrapper"); + const h4 = document.createElement("h4"); + h4.innerText = summary; - const h5 = document.createElement("h5"); - h5.innerText = title; + const h3 = document.createElement("h3"); + h3.textContent = getto ? money : "-" + money; + h3.classList.add(getto ? "plus" : "minus"); - const h4 = document.createElement("h4"); - h4.innerText = summary; + const div = document.createElement("div"); + div.classList.add("money_and_btn"); + const button = document.createElement("button"); + button.classList.add(index); + listWrapper.classList.add(index); + button.innerText = "x"; + div.appendChild(button); + div.appendChild(h3); - const h3 = document.createElement("h3"); - h3.textContent = getto ? money : "-" + money; - h3.classList.add(getto ? "plus" : "minus"); + listWrapper.append(h5, h4, div); + container.appendChild(listWrapper); + }); +} - const div = document.createElement("div"); - div.classList.add("money_and_btn"); - const button = document.createElement("button"); - button.innerText = "x"; - div.appendChild(button); - div.appendChild(h3); +makeList(HISTORY_LIST, list); - listWrapper.append(h5, h4, div); - list.appendChild(listWrapper); +//나의 자신 반영 +let INIT_BALANCE = 0; +const h1 = document.querySelector("#my_money > h1"); - //총합 +HISTORY_LIST.forEach((data) => { + const { money, getto } = data; INIT_BALANCE += getto ? money : -money; h1.innerText = INIT_BALANCE; }); -//2 +//2. let IN_MONEY = 0; let OUT_MONEY = 0; const plusMoney = document.getElementById("plus_money"); @@ -48,3 +61,66 @@ HISTORY_LIST.forEach((element) => { plusMoney.innerText = IN_MONEY; minusMoney.innerText = OUT_MONEY; }); + +//3. +//버튼 불러오기 +const inputPlus = document.getElementById("input_plus"); +const inputMinus = document.getElementById("input_minus"); +const HIDDEN_CLASS = "hidden"; + +//리스트 필터 +function filterList() { + const plusListWrapper = document.querySelectorAll(".plus_list_wrapper"); + const minusListWrapper = document.querySelectorAll(".minus_list_wrapper"); + + if (inputPlus.checked) { + showList(plusListWrapper); + } else { + hiddenList(plusListWrapper); + } + + if (inputMinus.checked) { + showList(minusListWrapper); + } else { + hiddenList(minusListWrapper); + } +} + +//리스트 보여주기 +function showList(listWrapper) { + listWrapper.forEach((element) => { + element.classList.remove(HIDDEN_CLASS); + }); +} + +//리스트 숨기기 +function hiddenList(listWrapper) { + listWrapper.forEach((element) => { + element.classList.add(HIDDEN_CLASS); + }); +} + +//event 붙이기 +inputPlus.addEventListener("change", () => filterList()); +inputMinus.addEventListener("change", () => filterList()); + +//4. +const deleteButton = document.querySelectorAll(".money_and_btn > button"); + +function deleteList(deleteId) { + const listWrapper = document.querySelectorAll(".list_wrapper"); + listWrapper.forEach((list) => { + if (list.classList.contains(deleteId)) { + list.remove(); + } + }); +} + +deleteButton.forEach((button) => { + button.addEventListener("click", (e) => { + const clickedButton = e.currentTarget.classList[0]; + deleteList(clickedButton); + }); +}); + +//5 From d7ce397aeca757cd8e07a14660c9dec6b603e024 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 16:48:01 +0900 Subject: [PATCH 16/51] =?UTF-8?q?=F0=9F=92=84=20hidden=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assign2/style.css b/assign2/style.css index 335dd94..d4a1aa6 100644 --- a/assign2/style.css +++ b/assign2/style.css @@ -256,3 +256,7 @@ footer button { background-color: var(--subcolor01); } + +.hidden { + display: none; +} From 73dacb32d63ce47b42e7e1d790ae638c50981869 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 17:13:52 +0900 Subject: [PATCH 17/51] =?UTF-8?q?=F0=9F=8E=A8=20modal=20=EC=9D=BC=EB=8B=A8?= =?UTF-8?q?=20html=EC=97=90=20=EB=B0=95=EC=95=84=EB=86=93=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/assign2/index.html b/assign2/index.html index 18b0275..92a0af2 100644 --- a/assign2/index.html +++ b/assign2/index.html @@ -59,8 +59,25 @@

내역 리스트

+
- +
From 7e8630cd982db65b459a8e925bf31c08d88f052b Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Fri, 20 Oct 2023 17:14:02 +0900 Subject: [PATCH 18/51] =?UTF-8?q?=F0=9F=92=84=20modal=20=EA=BE=B8=EB=AF=B8?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/style.css | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/assign2/style.css b/assign2/style.css index d4a1aa6..0d9f46a 100644 --- a/assign2/style.css +++ b/assign2/style.css @@ -184,7 +184,7 @@ h1 { /* margin-top: 3rem; */ gap: 1rem; - height: 60%; + height: 25rem; overflow-y: scroll; } @@ -243,6 +243,7 @@ footer { align-items: center; width: 100%; + margin-top: 2rem; } footer button { @@ -260,3 +261,31 @@ footer button { .hidden { display: none; } + +/* 모달 */ +#modal { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #89cff0; + + /* display: none; */ +} + +#modal div { + display: flex; + gap: 0.2rem; +} + +#modal button { + display: flex; + justify-content: center; + align-items: center; + padding: 0.3rem 1rem; + + border: none; + border-radius: 10%; + background-color: var(--subcolor01); + box-shadow: 1px 1px 1px var(--subcolor02); +} From 8f3e1b1e3e11afca69b4223517a3f518bb047412 Mon Sep 17 00:00:00 2001 From: HAE2NI Date: Sun, 22 Oct 2023 00:00:10 +0900 Subject: [PATCH 19/51] =?UTF-8?q?=F0=9F=8E=A8=20modal=20radio=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20id=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assign2/index.html | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/assign2/index.html b/assign2/index.html index 92a0af2..67b8786 100644 --- a/assign2/index.html +++ b/assign2/index.html @@ -61,20 +61,43 @@

내역 리스트