From 4698e9acb899094db168a27f06b422b9e5471160 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 19:12:29 +0900 Subject: [PATCH 1/9] =?UTF-8?q?init:=201=EC=A3=BC=EC=B0=A8=20=EA=B3=BC?= =?UTF-8?q?=EC=A0=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.html | 116 +++++++++++++++++++ assignment/week02/assign2/style.css | 160 +++++++++++++++++++++++++++ 2 files changed, 276 insertions(+) create mode 100644 assignment/week02/assign2/index.html create mode 100644 assignment/week02/assign2/style.css diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html new file mode 100644 index 0000000..feee9ae --- /dev/null +++ b/assignment/week02/assign2/index.html @@ -0,0 +1,116 @@ + + + + + + + 가계부 + + +
유진이의 가계부
+
+
나의 자산
+ 249700 +
+
+300000
+
-50300
+
+
+ +
+
+ leftbtn +
10월 1일
+ rightbtn +
+ +
+
내역 리스트
+
+ + + + +
+
+
+
+
+
식비
+
+ 따띠삼겹 숙대점 +
+
-8200
+
x
+
+ +
+
식비
+
+ 아름다운가게 성남중동점 +
+
-8200
+
x
+
+ +
+
식비
+
+ 아름다운가게 성남중동점 +
+
-8200
+
x
+
+ +
+
기타
+
+ 9월 캐시백 +
+
+30
+
x
+
+ +
+
식비
+
+ 스타벅스 +
+
-8200
+
x
+
+ +
+
월급
+
+ 9월 알바비 +
+
+300000
+
x
+
+ +
+
식비
+
+ 아름다운가게 성남중동점 +
+
-8200
+
x
+
+ +
+
식비
+
+ 아름다운가게 성남중동점 +
+
-8200
+
x
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/assignment/week02/assign2/style.css b/assignment/week02/assign2/style.css new file mode 100644 index 0000000..90ce7c6 --- /dev/null +++ b/assignment/week02/assign2/style.css @@ -0,0 +1,160 @@ +body { + box-sizing: border-box; + margin:auto; + font-weight: 600; +} + +body > header{ + text-align: center; + font-size: 1.5rem; + background-color: lightcyan; + border-bottom: 3px solid lightgrey; + padding: 1rem 0; +} + +#total{ + background-color: lightcyan; + margin: 10px 30px; + border: 5px solid black; + border-radius: 10px; + padding: 5px 10px; + text-align: center; + font-size: 15px; +} + +#total strong{ + font-size: 30px; +} + +#plusminus{ + display: flex; + justify-content: center; + margin: 10px 15px; +} + +#plusminus span{ + background-color: white; + text-align: center; + border-radius: 100%; + padding: 0 5px; + margin:10px; +} + +#plusminus div:nth-child(1){ + color: blue; + margin-right: 20px; +} + +#plusminus div:nth-child(2){ + color: red; +} + +#detail{ + margin-top: 1rem; + margin-bottom: 5px; + border-top: 3px solid lightgray; + border-bottom: 2px solid lightgray; +} + +#date{ + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0; +} + +#date img{ + width: 30px; + margin:0 5px; +} + +#datebelow{ + display: flex; + justify-content: space-between; + margin:0 20px; + padding:0 0 15px; +} + +input[type="checkbox"]{ + display: none; +} + +input[type="checkbox"]+label{ + padding:3px 10px; + border-radius: 10px; + border: 3px solid lightskyblue; +} + +input[type="checkbox"]:checked + label{ + color: white; + background-color: lightskyblue; +} + +#detaillist{ + display: flex; + flex-direction: column; + overflow-y: auto; + height: 40vh; +} + +#eachlist{ + display: flex; + background-color: lightcyan; + margin: 5px 30px; + padding: 15px 30px; + border-radius: 10px; + text-align: left; + position: relative; +} + +#eachlist #in{ + color: blue; +} + +#eachlist #out{ + color: red; +} + +#eachlist div:nth-child(1){ + flex-basis: 15%; +} + +#eachlist div:nth-child(2){ + flex-basis: 60%; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#eachlist div:nth-child(3){ + flex-basis: 25%; + text-align: right; +} + + +#xbtn{ + position: absolute; + top:0px; + right: 8px; + font-weight: 500; +} + +#bottom{ + position: fixed; + width: 100%; + bottom: 0; + background-color: ivory; +} + +#bottom div{ + background-color: lightsteelblue; + width: fit-content; + padding: 0px 30px 10px; + border-radius: 30px; + justify-content: center; + vertical-align: center; + margin: auto; + color: white; + font-size: 50px; +} \ No newline at end of file From bc9e36bd5df2b724619137dbd51a7a550f223b53 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 19:49:29 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EC=B5=9C=EC=B4=88=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0,=20=EC=B4=9D=EC=88=98=EC=9E=85=20=EC=B4=9D?= =?UTF-8?q?=EC=A7=80=EC=B6=9C=20=EB=B0=98=EC=98=81=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.html | 78 ++-------------------------- assignment/week02/assign2/index.js | 63 ++++++++++++++++++++++ assignment/week02/assign2/style.css | 16 +++--- 3 files changed, 74 insertions(+), 83 deletions(-) create mode 100644 assignment/week02/assign2/index.js diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html index feee9ae..99af31f 100644 --- a/assignment/week02/assign2/index.html +++ b/assignment/week02/assign2/index.html @@ -10,10 +10,10 @@
유진이의 가계부
나의 자산
- 249700 + 249700
-
+300000
-
-50300
+
+300000
+
-300000
@@ -35,78 +35,6 @@
-
-
식비
-
- 따띠삼겹 숙대점 -
-
-8200
-
x
-
- -
-
식비
-
- 아름다운가게 성남중동점 -
-
-8200
-
x
-
- -
-
식비
-
- 아름다운가게 성남중동점 -
-
-8200
-
x
-
- -
-
기타
-
- 9월 캐시백 -
-
+30
-
x
-
- -
-
식비
-
- 스타벅스 -
-
-8200
-
x
-
- -
-
월급
-
- 9월 알바비 -
-
+300000
-
x
-
- -
-
식비
-
- 아름다운가게 성남중동점 -
-
-8200
-
x
-
- -
-
식비
-
- 아름다운가게 성남중동점 -
-
-8200
-
x
-
-
+
diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js new file mode 100644 index 0000000..cf3563b --- /dev/null +++ b/assignment/week02/assign2/index.js @@ -0,0 +1,63 @@ +let init_balance=0; +let income_total=0; +let outcome_total=0; +let history_list=[ + { + category:"과외비", + detail:"10월 월급", + amount: 500000 + },{ + category:"식비", + detail:"서브웨이", + amount:-30000 + },{ + category:"용돈", + detail:"10월 용돈", + amount:100000 + },{ + category:"식비", + detail:"수육국밥", + amount:-10000 + }]; + +const total=document.querySelector("#totalMoney"); +const detaillist=document.querySelector("#detaillist"); +const income=document.querySelector("#income_tot"); +const outcome=document.querySelector("#outcome_tot"); + +history_list.forEach((each)=>{ + init_balance+=each.amount; + + const eachlist = document.createElement('div'); + const category = document.createElement('div'); + const detail = document.createElement('div'); + const amount = document.createElement('div'); + const xbtn = document.createElement('div'); + + category.innerText=each.category; + detail.innerText=each.detail; + amount.innerText=each.amount; + xbtn.innerText='x'; + + eachlist.appendChild(category); + eachlist.appendChild(detail); + eachlist.appendChild(amount); + eachlist.appendChild(xbtn); + + eachlist.classList.add('eachlist'); + detaillist.appendChild(eachlist); + + if(each.amount<0){ + amount.classList.add('out'); + outcome_total+=each.amount; + }else{ + amount.classList.add('in') + income_total+=each.amount; + } + + xbtn.classList.add('xbtn'); +}) + +total.innerText=init_balance; +income.innerText=income_total; +outcome.innerText=outcome_total; \ No newline at end of file diff --git a/assignment/week02/assign2/style.css b/assignment/week02/assign2/style.css index 90ce7c6..e3cfb81 100644 --- a/assignment/week02/assign2/style.css +++ b/assignment/week02/assign2/style.css @@ -32,7 +32,7 @@ body > header{ margin: 10px 15px; } -#plusminus span{ +#plusminus .sign{ background-color: white; text-align: center; border-radius: 100%; @@ -97,7 +97,7 @@ input[type="checkbox"]:checked + label{ height: 40vh; } -#eachlist{ +.eachlist{ display: flex; background-color: lightcyan; margin: 5px 30px; @@ -107,19 +107,19 @@ input[type="checkbox"]:checked + label{ position: relative; } -#eachlist #in{ +.eachlist .in{ color: blue; } -#eachlist #out{ +.eachlist .out{ color: red; } -#eachlist div:nth-child(1){ +.eachlist div:nth-child(1){ flex-basis: 15%; } -#eachlist div:nth-child(2){ +.eachlist div:nth-child(2){ flex-basis: 60%; display: block; overflow: hidden; @@ -127,13 +127,13 @@ input[type="checkbox"]:checked + label{ text-overflow: ellipsis; } -#eachlist div:nth-child(3){ +.eachlist div:nth-child(3){ flex-basis: 25%; text-align: right; } -#xbtn{ +.xbtn{ position: absolute; top:0px; right: 8px; From 81c28c51ae4197c3ba1f8d2dc726f41e00c67522 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 21:23:55 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.js | 101 +++++++++++++++++++---------- 1 file changed, 68 insertions(+), 33 deletions(-) diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index cf3563b..1dfc9e1 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -19,45 +19,80 @@ let history_list=[ detail:"수육국밥", amount:-10000 }]; +let filteredList=history_list; +let clickedIncome=true, clickedOutcome=true; const total=document.querySelector("#totalMoney"); -const detaillist=document.querySelector("#detaillist"); +let detaillist=document.querySelector("#detaillist"); const income=document.querySelector("#income_tot"); const outcome=document.querySelector("#outcome_tot"); +const inBtn=document.querySelector("#in"); +const outBtn=document.querySelector("#out"); -history_list.forEach((each)=>{ - init_balance+=each.amount; - - const eachlist = document.createElement('div'); - const category = document.createElement('div'); - const detail = document.createElement('div'); - const amount = document.createElement('div'); - const xbtn = document.createElement('div'); - - category.innerText=each.category; - detail.innerText=each.detail; - amount.innerText=each.amount; - xbtn.innerText='x'; - - eachlist.appendChild(category); - eachlist.appendChild(detail); - eachlist.appendChild(amount); - eachlist.appendChild(xbtn); - - eachlist.classList.add('eachlist'); - detaillist.appendChild(eachlist); - if(each.amount<0){ - amount.classList.add('out'); - outcome_total+=each.amount; - }else{ - amount.classList.add('in') - income_total+=each.amount; - } - - xbtn.classList.add('xbtn'); -}) +makeHistoryList(); total.innerText=init_balance; income.innerText=income_total; -outcome.innerText=outcome_total; \ No newline at end of file +outcome.innerText=outcome_total; + +inBtn.addEventListener("click",infilter); +outBtn.addEventListener("click",outfilter); + +function infilter(){ + clickedIncome=(!clickedIncome); + doFilter() +} + +function outfilter(){ + clickedOutcome=(!clickedOutcome); + doFilter() +} + +function doFilter(){ + detaillist.replaceChildren(); + if(clickedIncome && clickedOutcome) + filteredList=history_list; + else if(clickedIncome) + filteredList=history_list.filter((each)=>each.amount>0); + else if(clickedOutcome) + filteredList=history_list.filter((each)=>each.amount<0); + else + filteredList=[]; + + makeHistoryList(); +} + +function makeHistoryList(){ + filteredList.forEach((each)=>{ + init_balance+=each.amount; + + const eachlist = document.createElement('div'); + const category = document.createElement('div'); + const detail = document.createElement('div'); + const amount = document.createElement('div'); + const xbtn = document.createElement('div'); + + category.innerText=each.category; + detail.innerText=each.detail; + amount.innerText=each.amount; + xbtn.innerText='x'; + + eachlist.appendChild(category); + eachlist.appendChild(detail); + eachlist.appendChild(amount); + eachlist.appendChild(xbtn); + + eachlist.classList.add('eachlist'); + detaillist.appendChild(eachlist); + + if(each.amount<0){ + amount.classList.add('out'); + outcome_total+=each.amount; + }else{ + amount.classList.add('in') + income_total+=each.amount; + } + xbtn.classList.add('xbtn'); + }) +} From 35bf41b609233603d25f535da59f19e913abd8f2 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 21:59:18 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.js | 43 +++++++++++++++++++----------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index 1dfc9e1..b21b844 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -1,6 +1,3 @@ -let init_balance=0; -let income_total=0; -let outcome_total=0; let history_list=[ { category:"과외비", @@ -31,10 +28,7 @@ const outBtn=document.querySelector("#out"); makeHistoryList(); - -total.innerText=init_balance; -income.innerText=income_total; -outcome.innerText=outcome_total; +calculateHistory(); inBtn.addEventListener("click",infilter); outBtn.addEventListener("click",outfilter); @@ -65,7 +59,6 @@ function doFilter(){ function makeHistoryList(){ filteredList.forEach((each)=>{ - init_balance+=each.amount; const eachlist = document.createElement('div'); const category = document.createElement('div'); @@ -86,13 +79,33 @@ function makeHistoryList(){ eachlist.classList.add('eachlist'); detaillist.appendChild(eachlist); - if(each.amount<0){ - amount.classList.add('out'); - outcome_total+=each.amount; - }else{ - amount.classList.add('in') - income_total+=each.amount; - } + each.amount<0 ? amount.classList.add('out') : amount.classList.add('in') + xbtn.classList.add('xbtn'); + xbtn.addEventListener('click', deleteHistory); + + }) } + +function deleteHistory(event){ + detaillist.removeChild(event.target.parentNode); + console.log(event.target.previousElementSibling.previousElementSibling.innerText); + const idx= history_list.findIndex(each => each.detail ===event.target.previousElementSibling.previousElementSibling.innerText) + history_list.splice(idx,1); + doFilter() + calculateHistory(); +} + +function calculateHistory(){ + let init_balance=0; + let income_total=0; + let outcome_total=0; + history_list.forEach((each)=>{ + init_balance+=each.amount; + each.amount<0 ? outcome_total+=each.amount : income_total+=each.amount; + }) + total.innerText=init_balance; + income.innerText=income_total; + outcome.innerText=outcome_total; +} \ No newline at end of file From 0b942e57fa54a69035246695df488d77087289c8 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 23:40:28 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.html | 41 +++++++++++++++ assignment/week02/assign2/index.js | 74 ++++++++++++++++++++++++++++ assignment/week02/assign2/style.css | 35 +++++++++++++ 3 files changed, 150 insertions(+) diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html index 99af31f..c0f730f 100644 --- a/assignment/week02/assign2/index.html +++ b/assignment/week02/assign2/index.html @@ -39,6 +39,47 @@
+
+
+
+
+
내역 추가
+ + + +
+
내용
+ +
+ +
+
+
\ No newline at end of file diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index b21b844..9944af0 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -25,13 +25,46 @@ const income=document.querySelector("#income_tot"); const outcome=document.querySelector("#outcome_tot"); const inBtn=document.querySelector("#in"); const outBtn=document.querySelector("#out"); +const addBtn=document.querySelector("#bottom div"); +const modal = document.getElementById('modalWrap'); +var radio = document.getElementsByName("inout"); +const c_in = document.getElementById('category-in'); +const c_out= document.getElementById('category-out'); +const m_input=document.querySelector('#input-amount'); +const m_content=document.querySelector('#input-content'); +const submitBtn=document.querySelector('.modal-saveBtn'); +const closeBtn = document.querySelector('.modal-closeBtn'); +let inputAmount=0; +let inputContent=""; +let inputSign=1; +let inputCategory=""; makeHistoryList(); calculateHistory(); inBtn.addEventListener("click",infilter); outBtn.addEventListener("click",outfilter); +addBtn.addEventListener("click",addList); +submitBtn.addEventListener("click",submitList); + +c_in.addEventListener("change",function(event){ + console.log(event.target.value); + inputCategory=event.target.value; +}) +c_out.addEventListener("change",function(event){ + inputCategory=event.target.value; + console.log(event.target.value); +}) +m_input.addEventListener("change",function(event){ + console.log(event.target.value); + inputAmount=event.target.value; +}) +m_content.addEventListener("change",function(event){ + console.log(event.target.value); + inputContent=event.target.value; +}) + function infilter(){ clickedIncome=(!clickedIncome); @@ -108,4 +141,45 @@ function calculateHistory(){ total.innerText=init_balance; income.innerText=income_total; outcome.innerText=outcome_total; +} + +function addList(){ + modal.style.display = 'block'; +} + +function submitList(){ + history_list.push({ + category:inputCategory, + detail:inputContent, + amount: inputAmount*inputSign + }) + window.alert("저장되었습니다."); + detaillist.replaceChildren(); + makeHistoryList(); + calculateHistory(); + +} + +closeBtn.onclick = function() { + modal.style.display = 'none'; +} + +for(var i=0 ; i < radio.length ; i++){ + radio[i].addEventListener('click', function () { + if(this.id === "add-in"){ + console.log("in"); + inputSign=1; + inputCategory=c_in.options[c_in.selectedIndex].value; + document.getElementById('add-category-in').style.display="block"; + document.getElementById('add-category-out').style.display="none"; + }else{ + console.log("out"); + inputSign=-1; + inputCategory=c_out.options[c_out.selectedIndex].value; + + document.getElementById('add-category-out').style.display="block"; + document.getElementById('add-category-in').style.display="none"; + } + console.log(inputCategory); +}) } \ No newline at end of file diff --git a/assignment/week02/assign2/style.css b/assignment/week02/assign2/style.css index e3cfb81..15f50c0 100644 --- a/assignment/week02/assign2/style.css +++ b/assignment/week02/assign2/style.css @@ -157,4 +157,39 @@ input[type="checkbox"]:checked + label{ margin: auto; color: white; font-size: 50px; +} + +#modalWrap { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0px; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); +} + +#modalBody { + bottom: 0px; + position: relative; + margin: auto; + width: 500px; + height: 300px; + padding: 30px 30px; + border-radius: 5rem; + background-color: #fff; +} + +#closeBtn { + float:right; + font-weight: bold; + color: #777; + font-size:25px; + cursor: pointer; +} + +#add-category-out{ + display: none; } \ No newline at end of file From a34f1d8448c0a20e1de01a822aef8ed44bc97568 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Thu, 2 Nov 2023 21:04:40 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.html | 2 +- assignment/week02/assign2/style.css | 27 +++++++++++++++++++++++---- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html index c0f730f..43c5198 100644 --- a/assignment/week02/assign2/index.html +++ b/assignment/week02/assign2/index.html @@ -42,7 +42,7 @@
-
내역 추가
+

내역 추가

+
+
+
정말로 삭제하겠습니까?
+ +
+
+
-
-
-
+
+

내역 추가

-
diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index 9944af0..891a76e 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -26,7 +26,7 @@ const outcome=document.querySelector("#outcome_tot"); const inBtn=document.querySelector("#in"); const outBtn=document.querySelector("#out"); const addBtn=document.querySelector("#bottom div"); -const modal = document.getElementById('modalWrap'); +const modal = document.querySelector('.modalWrap'); var radio = document.getElementsByName("inout"); const c_in = document.getElementById('category-in'); const c_out= document.getElementById('category-out'); @@ -35,6 +35,7 @@ const m_content=document.querySelector('#input-content'); const submitBtn=document.querySelector('.modal-saveBtn'); const closeBtn = document.querySelector('.modal-closeBtn'); +const closeModal = document.querySelector('.deleteModalWrap'); let inputAmount=0; let inputContent=""; let inputSign=1; @@ -122,12 +123,25 @@ function makeHistoryList(){ } function deleteHistory(event){ - detaillist.removeChild(event.target.parentNode); - console.log(event.target.previousElementSibling.previousElementSibling.innerText); - const idx= history_list.findIndex(each => each.detail ===event.target.previousElementSibling.previousElementSibling.innerText) - history_list.splice(idx,1); - doFilter() - calculateHistory(); + closeModal.style.display="block"; + let yes = document.querySelector('#closeYes'); + let no = document.querySelector('#closeNo'); + + yes.addEventListener("click",(e)=>{ + if(e.target.value){ + detaillist.removeChild(event.target.parentNode); + const idx= history_list.findIndex(each => each.detail ===event.target.previousElementSibling.previousElementSibling.innerText) + history_list.splice(idx,1); + closeModal.style.display="none"; + doFilter() + calculateHistory(); + } + }) + + no.addEventListener("click",(e)=>{ + e.target.value && (closeModal.style.display="none") + }) + } function calculateHistory(){ diff --git a/assignment/week02/assign2/style.css b/assignment/week02/assign2/style.css index acc6f5a..435f7a3 100644 --- a/assignment/week02/assign2/style.css +++ b/assignment/week02/assign2/style.css @@ -159,8 +159,8 @@ input[type="checkbox"]:checked + label{ font-size: 50px; } -#modalWrap { - /* display: none; */ +.modalWrap { + display: none; position: fixed; z-index: 1; padding-top: 100px; @@ -171,7 +171,7 @@ input[type="checkbox"]:checked + label{ background-color: rgba(0,0,0,0.4); } -#modalBody { +.modalBody { bottom: 0px; position: relative; margin: auto; @@ -201,7 +201,7 @@ input[type="checkbox"]:checked + label{ margin: 2rem 1rem; } -#modalBody section{ +.modalBody section{ margin-bottom: 1rem; } @@ -211,4 +211,47 @@ input[type="checkbox"]:checked + label{ #modal-category header{ margin-right: 1rem; +} + +.deleteModalWrap { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0px; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); +} + +.deleteModalBody{ + top: 5rem; + position: relative; + margin: auto; + text-align: center; + width: 20rem; + justify-content: center; + padding: 1rem 3rem; + border-radius: 3rem; + background-color: #fff; +} + +.deleteModalBody *{ + margin:1rem 0; +} + +input[type="radio"]{ + display: none; +} + +input[type="radio"]+label{ + padding:3px 10px; + border-radius: 10px; + border: 3px solid lightskyblue; +} + +input[type="radio"]:checked + label{ + color: white; + background-color: lightskyblue; } \ No newline at end of file From 3c0e4eef770ba1e381327c60c7648d741794f176 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Thu, 2 Nov 2023 21:50:40 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EC=8B=AC=ED=99=94=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80=ED=95=A0=20=EB=95=8C=20?= =?UTF-8?q?=EC=9C=A0=ED=9A=A8=ED=95=98=EC=A7=80=20=EC=95=8A=EC=9C=BC?= =?UTF-8?q?=EB=A9=B4=20alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign2/index.html | 2 +- assignment/week02/assign2/index.js | 37 +++++++++++++++++----------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html index 868d0ac..086ada2 100644 --- a/assignment/week02/assign2/index.html +++ b/assignment/week02/assign2/index.html @@ -77,7 +77,7 @@

내역 추가

내용
diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index 891a76e..3dbb137 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -50,19 +50,21 @@ addBtn.addEventListener("click",addList); submitBtn.addEventListener("click",submitList); c_in.addEventListener("change",function(event){ - console.log(event.target.value); inputCategory=event.target.value; }) c_out.addEventListener("change",function(event){ inputCategory=event.target.value; - console.log(event.target.value); }) -m_input.addEventListener("change",function(event){ - console.log(event.target.value); - inputAmount=event.target.value; +m_input.addEventListener("input",function(event){ + if(isNaN(event.target.value)){ + window.alert("숫자 외의 문자는 입력할 수 없습니다."); + // 숫자아닌건 없애도록 replace하는 정규식 + event.target.value=event.target.value.replace(/[^0-9]/g,""); + }else{ + inputAmount=event.target.value; + } }) m_content.addEventListener("change",function(event){ - console.log(event.target.value); inputContent=event.target.value; }) @@ -162,15 +164,20 @@ function addList(){ } function submitList(){ - history_list.push({ - category:inputCategory, - detail:inputContent, - amount: inputAmount*inputSign - }) - window.alert("저장되었습니다."); - detaillist.replaceChildren(); - makeHistoryList(); - calculateHistory(); + if(inputCategory=="" || inputAmount==""|| inputContent==""){ + window.alert("아직 입력되지 않은 항목이 있습니다."); + console.log('null'); + } + // if(inputCategory) + // history_list.push({ + // category:inputCategory, + // detail:inputContent, + // amount: inputAmount*inputSign + // }) + // window.alert("저장되었습니다."); + // detaillist.replaceChildren(); + // makeHistoryList(); + // calculateHistory(); } From ff04e71eb43f9ad29c323772a3a80e8f54d36105 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Thu, 2 Nov 2023 21:54:43 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=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 --- assignment/week02/assign2/index.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js index 3dbb137..47f9ef8 100644 --- a/assignment/week02/assign2/index.js +++ b/assignment/week02/assign2/index.js @@ -167,17 +167,18 @@ function submitList(){ if(inputCategory=="" || inputAmount==""|| inputContent==""){ window.alert("아직 입력되지 않은 항목이 있습니다."); console.log('null'); + }else{ + history_list.push({ + category:inputCategory, + detail:inputContent, + amount: inputAmount*inputSign + }) + window.alert("저장되었습니다."); + detaillist.replaceChildren(); + makeHistoryList(); + calculateHistory(); } - // if(inputCategory) - // history_list.push({ - // category:inputCategory, - // detail:inputContent, - // amount: inputAmount*inputSign - // }) - // window.alert("저장되었습니다."); - // detaillist.replaceChildren(); - // makeHistoryList(); - // calculateHistory(); + }