From 442b4b5e90df8e44e7c4e2c6273463717e6c224e Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Wed, 25 Oct 2023 23:51:17 +0900 Subject: [PATCH 01/21] =?UTF-8?q?init=20:=20=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/index.html | 112 ++++++++++++++ week2/assign2/reset.css | 133 +++++++++++++++++ week2/assign2/style.css | 307 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 552 insertions(+) create mode 100644 week2/assign2/index.html create mode 100644 week2/assign2/reset.css create mode 100644 week2/assign2/style.css diff --git a/week2/assign2/index.html b/week2/assign2/index.html new file mode 100644 index 0000000..f68f82a --- /dev/null +++ b/week2/assign2/index.html @@ -0,0 +1,112 @@ + + + + + + + 연또의 가계부 + + +
+

💰 연또의 가계부 💰

+
+ +
+
+
+

나의 자산

+

💲249700

+
+

+ +300000 +

+

+ -50300 +

+
+
+
+ +
+
+ +

10월 1일

+ +
+ +
+

내역 리스트

+
+ + + + +
+
+ +
+
    +
  • + 식비 + 맥도날드 안암역점 + 10800 + +
    • +
  • + 취미 + 하루필름 강남2호점 + 5000 + +
    • +
  • + 월급 + 이번달 알바비 + 300000 + +
    • +
  • + 쇼핑 + 오렌즈 강남역 지하쇼핑역점 + 30000 + +
    • +
  • + 식비 + 지에스25 안암역점 + 4500 + +
    • +
  • + 식비 + 지에스25 안암역점 + 4500 + +
    • +
  • + 식비 + 지에스25 안암역점 + 4500 + +
    • +
  • + 식비 + 지에스25 안암역점 + 4500 + +
    • +
  • + 식비 + 지에스25 안암역점 + 4500 + +
    • +
+
+
+
+ + + + diff --git a/week2/assign2/reset.css b/week2/assign2/reset.css new file mode 100644 index 0000000..644951d --- /dev/null +++ b/week2/assign2/reset.css @@ -0,0 +1,133 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +* { + box-sizing: border-box; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + /* font: inherit; */ + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/week2/assign2/style.css b/week2/assign2/style.css new file mode 100644 index 0000000..184e011 --- /dev/null +++ b/week2/assign2/style.css @@ -0,0 +1,307 @@ +@import url("./reset.css"); + +@font-face { + font-family: "DungGeunMo"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff") + format("woff"); + font-weight: normal; + font-style: normal; +} + +body { + display: flex; + flex-direction: column; + + /* 전체 스크롤 방지 */ + overflow: hidden; + touch-action: none; + + font-family: "DungGeunMo"; +} + +/* 버튼 기본 스타일링 제거, 포인터 설정*/ +button { + border: none; + background-color: transparent; + + cursor: pointer; +} + +/*전역 적용*/ +.income { + color: blue; +} + +.expense { + color: red; +} + +/*header*/ +.header { + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + height: 3.5rem; + + background-color: black; + color: white; + + font-size: 2rem; +} + +/* 나의 자산 */ +.asset { + display: flex; + justify-content: center; + align-items: center; + + padding: 1rem 2rem; + border: solid lightgray; + border-width: 0.2rem 0; +} + +.asset__box { + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + height: fit-content; + padding: 1rem 0; + gap: 1.2rem; + + border: 0.3rem solid black; + border-radius: 0.5rem; + + background-color: #ddd; +} + +.asset__box__title { + font-size: 1.8rem; +} + +.asset__box__total-amount { + font-size: 1.5rem; +} + +.asset__box__detail-amount { + display: flex; + gap: 3rem; + + font-size: 1.4rem; +} + +.detail-amount__plus, +.detail-amount__minus { + display: flex; + gap: 0.5rem; +} + +.amount-sign { + display: flex; + justify-content: center; + align-items: center; + + width: 1.5rem; + height: 1.5rem; + + border-radius: 1rem; + + background-color: white; +} + +.history { + display: flex; + flex-direction: column; + + width: 100%; +} + +.history__top { + display: flex; + justify-content: center; + align-items: center; + + padding: 0.5rem 0; + + font-size: 1.3rem; +} + +.history__top > button { + font-size: 1.5rem; +} + +.history__top > h2 { + padding: 0 2rem; +} + +.history__detail { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 0.5rem 2rem; + + font-size: 1rem; + + border-bottom: 0.1rem solid lightgray; +} + +.history__detail__checkbox { + display: flex; + gap: 1rem; +} + +/* checkbox input 커스텀 */ +input[type="checkbox"] { + display: none; +} + +input[id="checkbox-income"] + label, +input[id="checkbox-expense"] + label { + display: flex; + justify-content: center; + align-items: center; + + width: 5rem; + height: 2rem; + + border-radius: 0.5rem; + + cursor: pointer; +} + +input[id="checkbox-income"] + label { + background-color: transparent; + border: 0.1rem solid blue; +} +input[id="checkbox-income"]:checked + label { + background-color: blue; + color: white; +} + +input[id="checkbox-expense"] + label { + background-color: transparent; + border: 0.1rem solid red; +} +input[id="checkbox-expense"]:checked + label { + background-color: red; + color: white; +} + +/* 내역 리스트 영역 */ + +/*리스트 내 세로 스크롤*/ +.history__list { + height: 42vh; + overflow-y: scroll; + + margin-bottom: 3rem; +} + +.history__list > ul { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + width: 100%; + padding: 1rem 2rem 0 2rem; + gap: 1rem; +} + +.history__list__box { + display: flex; + align-items: center; + + width: 100%; + height: 3.5rem; + padding: 1rem 1.5rem; + + background-color: #a6b7da; + color: white; + + border-radius: 0.5rem; +} + +.history-category { + width: fit-content; + padding-right: 1.5rem; + + color: #444; + + font-size: 0.8rem; + text-align: center; +} + +.history-contents { + width: 8.5rem; + + /* 말줄임표 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + color: #242526; + + font-size: 1rem; +} +.history-amount { + width: fit-content; + padding-right: 0.5rem; + margin-left: auto; + + font-size: 1.1rem; +} + +/*수입, 지출에 따라 부호 붙여주기*/ +.history__list__box > .income::before { + content: "+"; +} + +.history__list__box > .expense::before { + content: "-"; +} + +.history-del-btn { + width: 1.3rem; + height: 1.3rem; + border-radius: 0.7rem; + + font-size: 0.5rem; + + color: #242526; +} + +.history-del-btn:hover { + background-color: white; +} + +/* footer 영역 */ +.footer { + display: flex; + justify-content: center; + align-items: center; + + position: fixed; + bottom: 0; + + width: 100%; + height: 3rem; + + background-color: #ddd; +} + +.footer__add-btn { + width: 2rem; + height: 2rem; + + background-color: #a6b7da; + color: white; + + border-radius: 1rem; + + font-size: 1.5rem; +} From 93668d48f1711b7888da0436849b3ab06cd0abbe Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Wed, 25 Oct 2023 23:52:44 +0900 Subject: [PATCH 02/21] =?UTF-8?q?init=20:=20js=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/index.html | 1 + week2/assign2/script.js | 1 + 2 files changed, 2 insertions(+) create mode 100644 week2/assign2/script.js diff --git a/week2/assign2/index.html b/week2/assign2/index.html index f68f82a..d505bba 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -108,5 +108,6 @@

내역 리스트

+ diff --git a/week2/assign2/script.js b/week2/assign2/script.js new file mode 100644 index 0000000..6694eab --- /dev/null +++ b/week2/assign2/script.js @@ -0,0 +1 @@ +console.log("짜잔~"); From cb18ef15e5f9a70bd5fd9d08c63562eccb478089 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:08:18 +0900 Subject: [PATCH 03/21] =?UTF-8?q?feat=20:=20=EC=83=81=EC=88=98=20=EB=8D=B0?= =?UTF-8?q?=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 --- week2/assign2/data/HISTORY_LIST.js | 32 ++++++++++++++++++++++++++++++ week2/assign2/index.html | 2 +- week2/assign2/script.js | 6 +++++- 3 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 week2/assign2/data/HISTORY_LIST.js diff --git a/week2/assign2/data/HISTORY_LIST.js b/week2/assign2/data/HISTORY_LIST.js new file mode 100644 index 0000000..907743f --- /dev/null +++ b/week2/assign2/data/HISTORY_LIST.js @@ -0,0 +1,32 @@ +export const HISTORY_LIST_DATA = [ + { + id: 1, + category: "식비", + contents: "맥도날드 안암점", + type: "expense", + amount: "10800", + }, + { + id: 2, + category: "취미", + contents: "하루필름 강남2호점", + type: "expense", + amount: "5000", + }, + { + id: 3, + category: "월급", + contents: "이번 달 알바비", + type: "income", + amount: "300000", + }, + { + id: 4, + category: "쇼핑", + contents: "오렌즈 강남역 지하쇼핑역점", + type: "expense", + amount: "3000", + }, +]; + +// export default HISTORY_LIST_DATA; diff --git a/week2/assign2/index.html b/week2/assign2/index.html index d505bba..32d883d 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -108,6 +108,6 @@

내역 리스트

- + diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 6694eab..b5ef9a8 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -1 +1,5 @@ -console.log("짜잔~"); +import { HISTORY_LIST_DATA } from "./data/HISTORY_LIST.js"; + +const INIT_BALANCE = 0; + +console.log(HISTORY_LIST_DATA); From 3e37997e9b92dd0d452e69ada9261cd10e13ac1e Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:08:43 +0900 Subject: [PATCH 04/21] =?UTF-8?q?chore=20:=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/data/HISTORY_LIST.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/week2/assign2/data/HISTORY_LIST.js b/week2/assign2/data/HISTORY_LIST.js index 907743f..138b808 100644 --- a/week2/assign2/data/HISTORY_LIST.js +++ b/week2/assign2/data/HISTORY_LIST.js @@ -28,5 +28,3 @@ export const HISTORY_LIST_DATA = [ amount: "3000", }, ]; - -// export default HISTORY_LIST_DATA; From 9661a0fc07208b6b3be36803933bd417320bd84b Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:27:06 +0900 Subject: [PATCH 05/21] =?UTF-8?q?feat=20:=20=EC=B4=88=EA=B8=B0=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20(=EC=B4=9D=20=EC=9E=90=EC=82=B0,=20?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EB=A6=AC=EC=8A=A4=ED=8A=B8)=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/data/HISTORY_LIST.js | 2 +- week2/assign2/index.html | 8 +++--- week2/assign2/script.js | 42 ++++++++++++++++++++++++++++-- 3 files changed, 45 insertions(+), 7 deletions(-) diff --git a/week2/assign2/data/HISTORY_LIST.js b/week2/assign2/data/HISTORY_LIST.js index 138b808..f7417e1 100644 --- a/week2/assign2/data/HISTORY_LIST.js +++ b/week2/assign2/data/HISTORY_LIST.js @@ -25,6 +25,6 @@ export const HISTORY_LIST_DATA = [ category: "쇼핑", contents: "오렌즈 강남역 지하쇼핑역점", type: "expense", - amount: "3000", + amount: "30000", }, ]; diff --git a/week2/assign2/index.html b/week2/assign2/index.html index 32d883d..caf2a89 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -15,7 +15,7 @@

💰 연또의 가계부 💰

나의 자산

-

💲249700

+

+300000 @@ -45,8 +45,8 @@

내역 리스트

-
    -
  • +
      +
diff --git a/week2/assign2/script.js b/week2/assign2/script.js index b5ef9a8..c41db49 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -1,5 +1,43 @@ import { HISTORY_LIST_DATA } from "./data/HISTORY_LIST.js"; -const INIT_BALANCE = 0; +const $ = (selector) => document.querySelector(selector); +const $$ = (selector) => document.querySelectorAll(selector); -console.log(HISTORY_LIST_DATA); +let INIT_BALANCE = 0; + +const renderHistory = () => { + const historyContainer = $(".history__list__container"); + + HISTORY_LIST_DATA.forEach((list) => { + const { category, contents, type, amount } = list; + + const historyBox = document.createElement("li"); + historyBox.classList.add(`history__list__box`); + historyBox.innerHTML = ` + ${category} + ${contents} + ${amount} + `; + + historyContainer.appendChild(historyBox); + }); +}; + +const renderBalance = () => { + HISTORY_LIST_DATA.forEach((data) => { + const { type, amount } = data; + type === "expense" + ? (INIT_BALANCE -= Number(amount)) + : (INIT_BALANCE += Number(amount)); + + const totalAmount = $(".asset__box__total-amount"); + totalAmount.innerHTML = INIT_BALANCE; + }); +}; + +const renderInitData = () => { + renderHistory(); + renderBalance(); +}; + +renderInitData(); From 45346355fc439c437c0faeb12eaed81c6f4cf6ef Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:28:33 +0900 Subject: [PATCH 06/21] =?UTF-8?q?fix=20:=20=EC=B4=9D=20=EC=9E=90=EC=82=B0?= =?UTF-8?q?=20=EC=95=9E=EC=97=90=20=EA=B0=80=EC=83=81=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EB=8B=AC=EB=9F=AC=20=EB=B6=99=EC=9D=B4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/week2/assign2/style.css b/week2/assign2/style.css index 184e011..1ac27dd 100644 --- a/week2/assign2/style.css +++ b/week2/assign2/style.css @@ -86,6 +86,12 @@ button { font-size: 1.5rem; } +.asset__box__total-amount::before { + content: "💲 "; + + font-size: 1.3rem; +} + .asset__box__detail-amount { display: flex; gap: 3rem; From 283d1623c40b7bc4dd1607dbdbbc949f31cdb75d Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:44:56 +0900 Subject: [PATCH 07/21] =?UTF-8?q?feat=20:=20=EC=B4=9D=EC=88=98=EC=9E=85/?= =?UTF-8?q?=EC=B4=9D=EC=A7=80=EC=B6=9C=20=EC=B4=88=EA=B8=B0=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/data/HISTORY_LIST.js | 8 ++++---- week2/assign2/index.html | 6 ++++-- week2/assign2/script.js | 27 ++++++++++++++++++++------- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/week2/assign2/data/HISTORY_LIST.js b/week2/assign2/data/HISTORY_LIST.js index f7417e1..77b8cc9 100644 --- a/week2/assign2/data/HISTORY_LIST.js +++ b/week2/assign2/data/HISTORY_LIST.js @@ -4,27 +4,27 @@ export const HISTORY_LIST_DATA = [ category: "식비", contents: "맥도날드 안암점", type: "expense", - amount: "10800", + amount: 10800, }, { id: 2, category: "취미", contents: "하루필름 강남2호점", type: "expense", - amount: "5000", + amount: 5000, }, { id: 3, category: "월급", contents: "이번 달 알바비", type: "income", - amount: "300000", + amount: 300000, }, { id: 4, category: "쇼핑", contents: "오렌즈 강남역 지하쇼핑역점", type: "expense", - amount: "30000", + amount: 30000, }, ]; diff --git a/week2/assign2/index.html b/week2/assign2/index.html index caf2a89..a57281b 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -18,10 +18,12 @@

나의 자산

- +300000 + +

- -50300 + -

diff --git a/week2/assign2/script.js b/week2/assign2/script.js index c41db49..938a28d 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -4,6 +4,8 @@ const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); let INIT_BALANCE = 0; +let SUM_EXPENSE = 0; +let SUM_INCOME = 0; const renderHistory = () => { const historyContainer = $(".history__list__container"); @@ -23,21 +25,32 @@ const renderHistory = () => { }); }; -const renderBalance = () => { +const renderTotalBalance = () => { HISTORY_LIST_DATA.forEach((data) => { const { type, amount } = data; - type === "expense" - ? (INIT_BALANCE -= Number(amount)) - : (INIT_BALANCE += Number(amount)); - const totalAmount = $(".asset__box__total-amount"); - totalAmount.innerHTML = INIT_BALANCE; + if (type === "expense") { + INIT_BALANCE -= amount; //total balance + SUM_EXPENSE += amount; //total expense + } else { + INIT_BALANCE += amount; //total balance + SUM_INCOME += amount; //total income + } }); + + const totalAmount = $(".asset__box__total-amount"); + totalAmount.innerHTML = INIT_BALANCE; + + const totalExpense = $(".detail-amount__num__minus"); + totalExpense.innerHTML = SUM_EXPENSE; + + const totalIncome = $(".detail-amount__num__plus"); + totalIncome.innerHTML = SUM_INCOME; }; const renderInitData = () => { renderHistory(); - renderBalance(); + renderTotalBalance(); }; renderInitData(); From 0ea7a50e7ae6478dbbe4c73f3921fe7ca2e3f59f Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:46:12 +0900 Subject: [PATCH 08/21] =?UTF-8?q?chore=20:=20=EC=A3=BC=EC=84=9D=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 --- week2/assign2/script.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 938a28d..1b31352 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -7,6 +7,7 @@ let INIT_BALANCE = 0; let SUM_EXPENSE = 0; let SUM_INCOME = 0; +// 내역 리스트 렌더링 함수 const renderHistory = () => { const historyContainer = $(".history__list__container"); @@ -25,6 +26,7 @@ const renderHistory = () => { }); }; +// 총 자산, 수입, 지출 렌더링 함수 const renderTotalBalance = () => { HISTORY_LIST_DATA.forEach((data) => { const { type, amount } = data; @@ -48,9 +50,10 @@ const renderTotalBalance = () => { totalIncome.innerHTML = SUM_INCOME; }; +// 초기 데이터 렌더링 함수 const renderInitData = () => { - renderHistory(); - renderTotalBalance(); + renderHistory(); //내역 리스트와 + renderTotalBalance(); // 총 수입, 지출, 자산을 데이터로부터 가져와 보여준다 }; renderInitData(); From f0b13b2884e30c2e08c657b7298a7524b25d9725 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 00:50:43 +0900 Subject: [PATCH 09/21] =?UTF-8?q?fix=20:=20=EC=88=98=EC=9E=85=20=EC=A7=80?= =?UTF-8?q?=EC=B6=9C=20=EA=B3=84=EC=82=B0=20=EB=A1=9C=EC=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 1b31352..849a7cf 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -31,17 +31,11 @@ const renderTotalBalance = () => { HISTORY_LIST_DATA.forEach((data) => { const { type, amount } = data; - if (type === "expense") { - INIT_BALANCE -= amount; //total balance - SUM_EXPENSE += amount; //total expense - } else { - INIT_BALANCE += amount; //total balance - SUM_INCOME += amount; //total income - } + type === "expense" ? (SUM_EXPENSE += amount) : (SUM_INCOME += amount); }); const totalAmount = $(".asset__box__total-amount"); - totalAmount.innerHTML = INIT_BALANCE; + totalAmount.innerHTML = INIT_BALANCE + SUM_INCOME - SUM_EXPENSE; const totalExpense = $(".detail-amount__num__minus"); totalExpense.innerHTML = SUM_EXPENSE; @@ -51,9 +45,9 @@ const renderTotalBalance = () => { }; // 초기 데이터 렌더링 함수 -const renderInitData = () => { +const handleRenderInitData = () => { renderHistory(); //내역 리스트와 renderTotalBalance(); // 총 수입, 지출, 자산을 데이터로부터 가져와 보여준다 }; -renderInitData(); +handleRenderInitData(); From 8e8c58e3c410168d36655c67c3b5702975493884 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 02:29:23 +0900 Subject: [PATCH 10/21] =?UTF-8?q?feat=20:=20=EC=88=98=EC=9E=85/=EC=A7=80?= =?UTF-8?q?=EC=B6=9C=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 849a7cf..9206e1e 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -50,4 +50,29 @@ const handleRenderInitData = () => { renderTotalBalance(); // 총 수입, 지출, 자산을 데이터로부터 가져와 보여준다 }; +//체크 박스 선택에 따른 필터링 구현 +const incomeCheckbox = $("#checkbox-income"); +const expenseCheckbox = $("#checkbox-expense"); + +//리스트 필터 함수 +const filterList = () => { + const incomeLists = $$(".history-amount.income"); + const expenseLists = $$(".history-amount.expense"); + + incomeCheckbox.checked + ? incomeLists.forEach((list) => (list.parentNode.style.display = "flex")) + : incomeLists.forEach((list) => (list.parentNode.style.display = "none")); + + expenseCheckbox.checked + ? expenseLists.forEach((list) => (list.parentNode.style.display = "flex")) + : expenseLists.forEach((list) => (list.parentNode.style.display = "none")); +}; + +//체크 박스 이벤트에 의한 필터링 헨들링 함수 +const handleFilterCheckbox = () => { + incomeCheckbox.addEventListener("change", filterList); + expenseCheckbox.addEventListener("change", filterList); +}; + handleRenderInitData(); +handleFilterCheckbox(); From 81d0a24c8ac5d7daadebca95c24663c14db5d7e9 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 02:54:50 +0900 Subject: [PATCH 11/21] =?UTF-8?q?fix=20:=20=EC=88=98=EC=9E=85=20=EC=A7=80?= =?UTF-8?q?=EC=B6=9C=20=EC=B4=9D=EC=9E=90=EC=82=B0=20=EA=B3=84=EC=82=B0=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 48 ++++++++++++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 9206e1e..3fae8a3 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -4,18 +4,20 @@ const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); let INIT_BALANCE = 0; -let SUM_EXPENSE = 0; -let SUM_INCOME = 0; +// let SUM_EXPENSE = 0; +// let SUM_INCOME = 0; +//**** 데이터로부터 초기 렌더링 구현 ***** // 내역 리스트 렌더링 함수 const renderHistory = () => { const historyContainer = $(".history__list__container"); HISTORY_LIST_DATA.forEach((list) => { - const { category, contents, type, amount } = list; + const { id, category, contents, type, amount } = list; const historyBox = document.createElement("li"); historyBox.classList.add(`history__list__box`); + historyBox.id = id; historyBox.innerHTML = ` ${category} ${contents} @@ -28,18 +30,25 @@ const renderHistory = () => { // 총 자산, 수입, 지출 렌더링 함수 const renderTotalBalance = () => { - HISTORY_LIST_DATA.forEach((data) => { - const { type, amount } = data; - - type === "expense" ? (SUM_EXPENSE += amount) : (SUM_INCOME += amount); + const incomeAmounts = [...$$(".history-amount.income")].map((history) => { + return Number(history.innerHTML); }); + const expenseAmounts = [...$$(".history-amount.expense")].map((history) => { + return Number(history.innerHTML); + }); + + const SUM_INCOME = incomeAmounts.reduce((sum, curr) => { + return sum + curr; + }, 0); + + const SUM_EXPENSE = expenseAmounts.reduce((sum, curr) => { + return sum + curr; + }, 0); const totalAmount = $(".asset__box__total-amount"); totalAmount.innerHTML = INIT_BALANCE + SUM_INCOME - SUM_EXPENSE; - const totalExpense = $(".detail-amount__num__minus"); totalExpense.innerHTML = SUM_EXPENSE; - const totalIncome = $(".detail-amount__num__plus"); totalIncome.innerHTML = SUM_INCOME; }; @@ -50,7 +59,7 @@ const handleRenderInitData = () => { renderTotalBalance(); // 총 수입, 지출, 자산을 데이터로부터 가져와 보여준다 }; -//체크 박스 선택에 따른 필터링 구현 +//*******체크 박스 선택에 따른 필터링 구현********** const incomeCheckbox = $("#checkbox-income"); const expenseCheckbox = $("#checkbox-expense"); @@ -74,5 +83,24 @@ const handleFilterCheckbox = () => { expenseCheckbox.addEventListener("change", filterList); }; +//***** 리스트 삭제 구현 ***** +const delData = (event) => { + const targetId = Number(event.target.parentNode.id); + + HISTORY_LIST_DATA.forEach((data) => { + const { id } = data; + if (targetId === id) { + console.log(id); + } + }); +}; + +const handleDelList = () => { + const delBtns = $$(".history-del-btn"); + + delBtns.forEach(() => addEventListener("click", delData)); +}; + handleRenderInitData(); handleFilterCheckbox(); +handleDelList(); From a4390a1351b66da49221e7b0568c03a7b540c7ba Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 03:12:09 +0900 Subject: [PATCH 12/21] =?UTF-8?q?feat=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 3fae8a3..a993570 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -4,8 +4,8 @@ const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); let INIT_BALANCE = 0; -// let SUM_EXPENSE = 0; -// let SUM_INCOME = 0; +let SUM_EXPENSE = 0; +let SUM_INCOME = 0; //**** 데이터로부터 초기 렌더링 구현 ***** // 내역 리스트 렌더링 함수 @@ -37,18 +37,20 @@ const renderTotalBalance = () => { return Number(history.innerHTML); }); - const SUM_INCOME = incomeAmounts.reduce((sum, curr) => { + SUM_INCOME = incomeAmounts.reduce((sum, curr) => { return sum + curr; }, 0); - const SUM_EXPENSE = expenseAmounts.reduce((sum, curr) => { + SUM_EXPENSE = expenseAmounts.reduce((sum, curr) => { return sum + curr; }, 0); const totalAmount = $(".asset__box__total-amount"); totalAmount.innerHTML = INIT_BALANCE + SUM_INCOME - SUM_EXPENSE; + const totalExpense = $(".detail-amount__num__minus"); totalExpense.innerHTML = SUM_EXPENSE; + const totalIncome = $(".detail-amount__num__plus"); totalIncome.innerHTML = SUM_INCOME; }; @@ -84,17 +86,18 @@ const handleFilterCheckbox = () => { }; //***** 리스트 삭제 구현 ***** +//리스트 삭제 함수 const delData = (event) => { - const targetId = Number(event.target.parentNode.id); + //이벤트 전파 방지 조건문 + if (event.target.className === "history-del-btn") { + event.target.parentNode.remove(); //리스트 삭제 + } - HISTORY_LIST_DATA.forEach((data) => { - const { id } = data; - if (targetId === id) { - console.log(id); - } - }); + //총 자산에도 반영 + renderTotalBalance(); }; +// 리스트 삭제 버튼 클릭시 삭제 구현 핸들링 함수 const handleDelList = () => { const delBtns = $$(".history-del-btn"); From 39221b52cfad1340408533ab4884407b147e084d Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 04:18:55 +0900 Subject: [PATCH 13/21] =?UTF-8?q?feat=20:=20=EC=B6=94=EA=B0=80=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/index.html | 31 +++++++++++ week2/assign2/style.css | 108 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 138 insertions(+), 1 deletion(-) diff --git a/week2/assign2/index.html b/week2/assign2/index.html index a57281b..0efd17b 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -110,6 +110,37 @@

내역 리스트

+ +
+
+
+

내역 추가

+
+
+ + + + +
+
+

종류

+ +
+
+

내용

+ +
+ + +
+
+ diff --git a/week2/assign2/style.css b/week2/assign2/style.css index 1ac27dd..b9c977f 100644 --- a/week2/assign2/style.css +++ b/week2/assign2/style.css @@ -161,7 +161,8 @@ button { } /* checkbox input 커스텀 */ -input[type="checkbox"] { +input[type="checkbox"], +input[type="radio"] { display: none; } @@ -311,3 +312,108 @@ input[id="checkbox-expense"]:checked + label { font-size: 1.5rem; } + +.add-list-modal__background { + position: absolute; + top: 0; + left: 0; + + display: none; + + width: 100%; + height: 100dvh; + background-color: rgba(0, 0, 0, 0.4); + z-index: 10; +} +/*내역 추가 모달*/ +.add-list-modal { + position: absolute; + bottom: 0; + + display: flex; + flex-direction: column; + + width: 100%; + height: 60%; + gap: 1.5rem; + padding: 1.5rem 2rem; + + background-color: #a6b7da; + color: black; + + z-index: 100; +} + +.add-list-modal__header { + align-self: center; + + font-size: 1.7rem; + + color: white; +} + +.add-list-modal__radio-input { + display: flex; + justify-content: center; + + gap: 2rem; +} + +input[id="modal__radio__income"] + label, +input[id="modal__radio__expense"] + label { + padding: 0.7rem 2.7rem; + + border-radius: 0.5rem; + + font-size: 1.3rem; + + background-color: whitesmoke; +} + +.add-list-modal__type, +.add-list-modal__contents { + display: flex; + flex-direction: column; + gap: 0.5rem; + + width: 100%; +} + +.add-type__title, +.add-contents__title { + font-size: 1.3rem; + width: 100%; +} + +.add-type__select { + width: 100%; + padding: 0.5rem; + + background: whitesmoke; + border: 0.1rem solid #999; + border-radius: 0.5rem; + + -webkit-appearance: none; /* 네이티브 외형 감추기 */ + -moz-appearance: none; + appearance: none; +} + +.add-contents__input { + width: 100%; + padding: 0.5rem; + + border: none; + border-radius: 0.5rem; +} + +.add-list-modal__save-btn, +.add-list-modal__close-btn { + align-self: center; + + width: 100%; + padding: 0.5rem; + + border-radius: 0.5rem; + + background-color: whitesmoke; +} From 21f8b1cb4c7c5289550ab9bbf0c3ed1d91b2df21 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 04:24:35 +0900 Subject: [PATCH 14/21] =?UTF-8?q?fix=20:=20=EB=9D=BC=EB=94=94=EC=98=A4=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/index.html | 4 ++-- week2/assign2/style.css | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/week2/assign2/index.html b/week2/assign2/index.html index 0efd17b..f147222 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -117,9 +117,9 @@

내역 리스트

내역 추가

- + - +
diff --git a/week2/assign2/style.css b/week2/assign2/style.css index b9c977f..d242090 100644 --- a/week2/assign2/style.css +++ b/week2/assign2/style.css @@ -370,6 +370,12 @@ input[id="modal__radio__expense"] + label { background-color: whitesmoke; } +input[id="modal__radio__income"]:checked + label, +input[id="modal__radio__expense"]:checked + label { + background-color: grey; + color: white; +} + .add-list-modal__type, .add-list-modal__contents { display: flex; From 7fd6d035cf6e58e508dee448e00ead70e84a2ed7 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 05:08:00 +0900 Subject: [PATCH 15/21] =?UTF-8?q?feat=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/index.html | 30 +++++++++----- week2/assign2/script.js | 84 ++++++++++++++++++++++++++++++++++++++++ week2/assign2/style.css | 19 +++++---- 3 files changed, 116 insertions(+), 17 deletions(-) diff --git a/week2/assign2/index.html b/week2/assign2/index.html index f147222..48c253c 100644 --- a/week2/assign2/index.html +++ b/week2/assign2/index.html @@ -108,7 +108,7 @@

내역 리스트

- +
@@ -117,17 +117,29 @@

내역 리스트

내역 추가

- + - +
-
-

종류

- +
+

종류

+ +
+
+

금액

+

내용

diff --git a/week2/assign2/script.js b/week2/assign2/script.js index a993570..c3ab395 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -104,6 +104,90 @@ const handleDelList = () => { delBtns.forEach(() => addEventListener("click", delData)); }; +// ***** 리스트 추가 모달 구현 ***** +const addListModal = $(".add-list-modal__background"); + +const handleOpenListAddModal = () => { + const openBtn = $(".footer__add-btn"); + + openBtn.addEventListener("click", () => { + addListModal.style.display = "block"; + + // 초기 값 세팅 + $(".add-amounts__input").value = ""; + $(".add-contents__input").value = ""; + $( + ".add-category__select" + ).innerHTML = ` + `; + }); +}; + +const handleChangeType = () => { + const radioInput = $(".add-list-modal__radio-input"); + radioInput.addEventListener("change", renderOptions); +}; + +const renderOptions = (event) => { + let targetType = "income"; //default 값 + + if (event.target.id === "modal__radio__expense") { + targetType = "expense"; + } + + const categorySelect = $(".add-category__select"); + + targetType === "income" + ? (categorySelect.innerHTML = ` + + `) + : (categorySelect.innerHTML = ` + + `); +}; + +const addNewList = () => { + const newType = $('input[name="type"]:checked').value; + + const categories = $(".add-category__select"); + const newCategory = categories.options[categories.selectedIndex].innerHTML; + + const newAmount = $(".add-amounts__input").value; + + const newContents = $(".add-contents__input").value; + + const historyContainer = $(".history__list__container"); + const historyBox = document.createElement("li"); + historyBox.classList.add(`history__list__box`); + historyBox.innerHTML = ` + ${newCategory} + ${newContents} + ${newAmount} + `; + + historyContainer.appendChild(historyBox); + + alert("저장 성공! 닫기 버튼을 눌러주세요"); +}; + +const handleAddList = () => { + const saveBtn = $(".add-list-modal__save-btn"); + + saveBtn.addEventListener("click", addNewList); +}; + +const handleCloseListAddModal = () => { + const closeBtn = $(".add-list-modal__close-btn"); + closeBtn.addEventListener("click", () => { + addListModal.style.display = "none"; + }); +}; +// ***** 최종 실행 함수들 ***** handleRenderInitData(); handleFilterCheckbox(); handleDelList(); + +handleOpenListAddModal(); +handleChangeType(); +handleAddList(); +handleCloseListAddModal(); diff --git a/week2/assign2/style.css b/week2/assign2/style.css index d242090..2574f32 100644 --- a/week2/assign2/style.css +++ b/week2/assign2/style.css @@ -334,7 +334,7 @@ input[id="checkbox-expense"]:checked + label { flex-direction: column; width: 100%; - height: 60%; + height: 70%; gap: 1.5rem; padding: 1.5rem 2rem; @@ -361,7 +361,7 @@ input[id="checkbox-expense"]:checked + label { input[id="modal__radio__income"] + label, input[id="modal__radio__expense"] + label { - padding: 0.7rem 2.7rem; + padding: 0.5rem 2.7rem; border-radius: 0.5rem; @@ -376,8 +376,9 @@ input[id="modal__radio__expense"]:checked + label { color: white; } -.add-list-modal__type, -.add-list-modal__contents { +.add-list-modal__category, +.add-list-modal__contents, +.add-list-modal__amounts { display: flex; flex-direction: column; gap: 0.5rem; @@ -385,13 +386,14 @@ input[id="modal__radio__expense"]:checked + label { width: 100%; } -.add-type__title, -.add-contents__title { +.add-category__title, +.add-contents__title, +.add-amounts__title { font-size: 1.3rem; width: 100%; } -.add-type__select { +.add-category__select { width: 100%; padding: 0.5rem; @@ -404,7 +406,8 @@ input[id="modal__radio__expense"]:checked + label { appearance: none; } -.add-contents__input { +.add-contents__input, +.add-amounts__input { width: 100%; padding: 0.5rem; From 516adef72a7d1dcee5cd58b40d900f28c98d200e Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 05:10:28 +0900 Subject: [PATCH 16/21] =?UTF-8?q?chore=20:=20=EC=A3=BC=EC=84=9D=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 --- week2/assign2/script.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index c3ab395..8184049 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -123,11 +123,13 @@ const handleOpenListAddModal = () => { }); }; +// type 버튼 이벤트 감지 핸들러 함수 const handleChangeType = () => { const radioInput = $(".add-list-modal__radio-input"); radioInput.addEventListener("change", renderOptions); }; +// select의 option을 type에 따라 렌더해주는 함수 const renderOptions = (event) => { let targetType = "income"; //default 값 @@ -146,6 +148,7 @@ const renderOptions = (event) => { `); }; +// 리스트 추가 함수 const addNewList = () => { const newType = $('input[name="type"]:checked').value; @@ -170,21 +173,26 @@ const addNewList = () => { alert("저장 성공! 닫기 버튼을 눌러주세요"); }; +// 모달에서 저장 버튼 클릭시 리스트 추사하는 핸들러 함수 const handleAddList = () => { const saveBtn = $(".add-list-modal__save-btn"); saveBtn.addEventListener("click", addNewList); }; +// 모달을 닫아주는 핸들러 함수 const handleCloseListAddModal = () => { const closeBtn = $(".add-list-modal__close-btn"); closeBtn.addEventListener("click", () => { addListModal.style.display = "none"; }); }; + // ***** 최종 실행 함수들 ***** handleRenderInitData(); + handleFilterCheckbox(); + handleDelList(); handleOpenListAddModal(); From 154dbcd53e6f141aba5ad921e2a290f44c6a314f Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Thu, 26 Oct 2023 05:11:27 +0900 Subject: [PATCH 17/21] =?UTF-8?q?chore=20:=20=EC=A3=BC=EC=84=9D=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 --- week2/assign2/script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 8184049..3ad3f70 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -107,6 +107,7 @@ const handleDelList = () => { // ***** 리스트 추가 모달 구현 ***** const addListModal = $(".add-list-modal__background"); +// 리스트 추가 모달 나타나게 하는 핸들러 함수 const handleOpenListAddModal = () => { const openBtn = $(".footer__add-btn"); From 778633c729def9801a670357acd94bc41921932a Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Fri, 27 Oct 2023 03:13:24 +0900 Subject: [PATCH 18/21] =?UTF-8?q?feat=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=9E=85=EB=A0=A5=ED=95=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EC=9D=80=20=ED=95=AD=EB=AA=A9=20=EC=A0=80=EC=9E=A5=20?= =?UTF-8?q?=EB=B0=A9=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 3ad3f70..336f6af 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -169,9 +169,12 @@ const addNewList = () => { ${newAmount} `; - historyContainer.appendChild(historyBox); - - alert("저장 성공! 닫기 버튼을 눌러주세요"); + if (newCategory && newAmount && newContents) { + historyContainer.appendChild(historyBox); + alert("저장 되었습니다."); + } else { + alert("아직 입력되지 않은 항목이 있습니다."); + } }; // 모달에서 저장 버튼 클릭시 리스트 추사하는 핸들러 함수 From e4fa747693b70d642e90ce8cbeb3fd19d7f6c78d Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Fri, 27 Oct 2023 03:17:45 +0900 Subject: [PATCH 19/21] =?UTF-8?q?feat=20:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20fade=20in=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/style.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/week2/assign2/style.css b/week2/assign2/style.css index 2574f32..0dbb328 100644 --- a/week2/assign2/style.css +++ b/week2/assign2/style.css @@ -313,6 +313,18 @@ input[id="checkbox-expense"]:checked + label { font-size: 1.5rem; } +/*내역 추가 모달*/ +@keyframes fadeInUp { + 0% { + opacity: 0.5; + transform: translate3d(0, 100%, 0); + } + to { + opacity: 1; + transform: translateZ(0); + } +} + .add-list-modal__background { position: absolute; top: 0; @@ -325,7 +337,7 @@ input[id="checkbox-expense"]:checked + label { background-color: rgba(0, 0, 0, 0.4); z-index: 10; } -/*내역 추가 모달*/ + .add-list-modal { position: absolute; bottom: 0; @@ -335,13 +347,15 @@ input[id="checkbox-expense"]:checked + label { width: 100%; height: 70%; - gap: 1.5rem; - padding: 1.5rem 2rem; + gap: 1.3rem; + padding: 1.3rem 2rem; background-color: #a6b7da; color: black; z-index: 100; + + animation: fadeInUp 0.5s; } .add-list-modal__header { From 939378bb20436df913a7d587de837cbad0c0b1d7 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Fri, 27 Oct 2023 03:57:47 +0900 Subject: [PATCH 20/21] =?UTF-8?q?feat=20:=20=EA=B8=88=EC=95=A1=20=EC=9C=A0?= =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index 336f6af..da2b39c 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -149,6 +149,21 @@ const renderOptions = (event) => { `); }; +//숫자만 입력하도록 구현하는 함수 +const checkNumber = (event) => { + if (isNaN(event.key)) { + alert("숫자만 입력하세요"); + } + event.target.value = event.target.value.replace(/[^0-9]/g, ""); +}; + +// 금액에 숫자만 입력하도록 하는 핸들러 함수 +const handleEnterAmount = () => { + const newAmount = $(".add-amounts__input"); + + newAmount.addEventListener("keyup", checkNumber); +}; + // 리스트 추가 함수 const addNewList = () => { const newType = $('input[name="type"]:checked').value; @@ -203,3 +218,5 @@ handleOpenListAddModal(); handleChangeType(); handleAddList(); handleCloseListAddModal(); + +handleEnterAmount(); From 2cdf9b3e3d51dd9a2ef06d1019135dad6408db70 Mon Sep 17 00:00:00 2001 From: Yeonseo-Jo Date: Fri, 27 Oct 2023 04:04:28 +0900 Subject: [PATCH 21/21] =?UTF-8?q?feat=20:=20=ED=99=94=ED=8F=90=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=20=ED=91=9C=EC=8B=9C(localString)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/assign2/script.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/week2/assign2/script.js b/week2/assign2/script.js index da2b39c..3dd1896 100644 --- a/week2/assign2/script.js +++ b/week2/assign2/script.js @@ -21,7 +21,7 @@ const renderHistory = () => { historyBox.innerHTML = ` ${category} ${contents} - ${amount} + ${amount.toLocaleString()} `; historyContainer.appendChild(historyBox); @@ -31,10 +31,10 @@ const renderHistory = () => { // 총 자산, 수입, 지출 렌더링 함수 const renderTotalBalance = () => { const incomeAmounts = [...$$(".history-amount.income")].map((history) => { - return Number(history.innerHTML); + return Number(history.innerHTML.replaceAll(",", "")); }); const expenseAmounts = [...$$(".history-amount.expense")].map((history) => { - return Number(history.innerHTML); + return Number(history.innerHTML.replaceAll(",", "")); }); SUM_INCOME = incomeAmounts.reduce((sum, curr) => { @@ -46,13 +46,17 @@ const renderTotalBalance = () => { }, 0); const totalAmount = $(".asset__box__total-amount"); - totalAmount.innerHTML = INIT_BALANCE + SUM_INCOME - SUM_EXPENSE; + totalAmount.innerHTML = ( + INIT_BALANCE + + SUM_INCOME - + SUM_EXPENSE + ).toLocaleString(); const totalExpense = $(".detail-amount__num__minus"); - totalExpense.innerHTML = SUM_EXPENSE; + totalExpense.innerHTML = SUM_EXPENSE.toLocaleString(); const totalIncome = $(".detail-amount__num__plus"); - totalIncome.innerHTML = SUM_INCOME; + totalIncome.innerHTML = SUM_INCOME.toLocaleString(); }; // 초기 데이터 렌더링 함수 @@ -154,7 +158,9 @@ const checkNumber = (event) => { if (isNaN(event.key)) { alert("숫자만 입력하세요"); } - event.target.value = event.target.value.replace(/[^0-9]/g, ""); + event.target.value = Number( + event.target.value.replace(/[^0-9]/g, "") + ).toLocaleString(); }; // 금액에 숫자만 입력하도록 하는 핸들러 함수 @@ -181,7 +187,7 @@ const addNewList = () => { historyBox.innerHTML = ` ${newCategory} ${newContents} - ${newAmount} + ${newAmount.toLocaleString()} `; if (newCategory && newAmount && newContents) {