diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html new file mode 100644 index 0000000..086ada2 --- /dev/null +++ b/assignment/week02/assign2/index.html @@ -0,0 +1,94 @@ + + + + + + + 가계부 + + +
유진이의 가계부
+
+
나의 자산
+ 249700 +
+
+300000
+
-300000
+
+
+ +
+
+ leftbtn +
10월 1일
+ rightbtn +
+ +
+
내역 리스트
+
+ + + + +
+
+
+
+
정말로 삭제하겠습니까?
+ +
+
+
+
+
+
+
+
+
+
+
+

내역 추가

+ + + +
+
내용
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/assignment/week02/assign2/index.js b/assignment/week02/assign2/index.js new file mode 100644 index 0000000..47f9ef8 --- /dev/null +++ b/assignment/week02/assign2/index.js @@ -0,0 +1,207 @@ +let history_list=[ + { + category:"과외비", + detail:"10월 월급", + amount: 500000 + },{ + category:"식비", + detail:"서브웨이", + amount:-30000 + },{ + category:"용돈", + detail:"10월 용돈", + amount:100000 + },{ + category:"식비", + detail:"수육국밥", + amount:-10000 + }]; +let filteredList=history_list; +let clickedIncome=true, clickedOutcome=true; + +const total=document.querySelector("#totalMoney"); +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"); +const addBtn=document.querySelector("#bottom div"); +const modal = document.querySelector('.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'); +const closeModal = document.querySelector('.deleteModalWrap'); +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){ + inputCategory=event.target.value; +}) +c_out.addEventListener("change",function(event){ + inputCategory=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){ + inputContent=event.target.value; +}) + + +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)=>{ + + 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); + + each.amount<0 ? amount.classList.add('out') : amount.classList.add('in') + + xbtn.classList.add('xbtn'); + xbtn.addEventListener('click', deleteHistory); + + + }) +} + +function deleteHistory(event){ + 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(){ + 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; +} + +function addList(){ + modal.style.display = 'block'; +} + +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(); + } + + +} + +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 new file mode 100644 index 0000000..435f7a3 --- /dev/null +++ b/assignment/week02/assign2/style.css @@ -0,0 +1,257 @@ +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 .sign{ + 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; +} + +.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; + text-align: center; + width: 20rem; + height: 25rem; + padding: 1rem; + border-radius: 5rem; + background-color: #fff; +} + +#closeBtn { + float:right; + font-weight: bold; + color: #777; + font-size:25px; + cursor: pointer; +} + +#add-category-out{ + display: none; +} + +#modal-btn button{ + background-color: antiquewhite; + border: none; + margin: 2rem 1rem; +} + +.modalBody section{ + margin-bottom: 1rem; +} + +#modal-category{ + display: inline-flex; +} + +#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