DO-SOPT-WEB · nayujin-dev · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/assignment/week02/assign2/index.html b/assignment/week02/assign2/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"/>
+    <title>가계부</title>
+</head>
+<body>
+    <header>유진이의 가계부</header>
+    <section id="total">
+        <header>나의 자산</header>
+        <strong id="totalMoney">249700</strong>
+        <div id="plusminus">
+            <div><span class="sign">+</span><span id="income_tot">300000</span></div>
+            <div><span class="sign">-</span><span id="outcome_tot">300000</span></div>
+        </div>
+    </section>
+
+    <section id="detail">
+        <div id="date">
+            <img src="../../week01/assign4/img/left.png" alt="leftbtn"/>
+            <header>10월 1일</header>
+            <img src="../../week01/assign4/img/right.png" alt="rightbtn"/>
+        </div>
+
+        <div id="datebelow">
+            <div>내역 리스트</div>
+            <div>
+                <input checked type="checkbox" id="in"/>
+                <label for="in">수입</label>
+                <input checked type="checkbox" id="out"/>
+                <label for="out">지출</label>
+            </div>
+        </div>
+        <section class="deleteModalWrap">
+            <div class="deleteModalBody">
+                <div>정말로 삭제하겠습니까?</div>
+                <div id="modal-in-out">
+                    <input type="radio" id="closeYes" name="closeYes"/>
+                    <label for="closeYes">예</label>
+                    <input type="radio" id="closeNo" name="closeNo"/>
+                    <label for="closeNo">취소</label>
+                </div>
+            </div>
+        </section>
+    </section>
+    <section id="detaillist">
+    </section>
+    <section id="bottom">
+        <div>+</div>        
+    </section>
+    <section class="modalWrap">
+            <div class="modalBody">
+                <h1>내역 추가</h1>
+                <section id="modal-in-out">
+                    <input checked type="radio" id="add-in" name="inout"/>
+                    <label for="add-in">수입</label>
+                    <input type="radio" id="add-out" name="inout"/>
+                    <label for="add-out">지출</label>
+                </section>
+                <section id="modal-category">
+                    <header>종류</header>
+                    <div id="add-category-in">
+                        <select id="category-in">
+                            <option value="과외" name="category-in">과외</option>
+                            <option value="용돈" name="category-in">용돈</option>
+                        </select>
+                    </div>
+                    <div id="add-category-out">
+                        <select id="category-out">
+                            <option value="식비" name="category-out">식비</option>
+                            <option value="쇼핑" name="category-out">쇼핑</option>
+                        </select>
+                    </div>
+
+                </section>
+                <section id="modal-amount">
+                    <header>금액</header>
+                    <input id="input-amount" />
+                </section>
+                <section id="modal-content">
+                    <header>내용</header>
+                    <input type="text" id="input-content"/>
+                </section>
+                <section id="modal-btn">
+                    <button type="button" class="modal-saveBtn">저장하기</button>
+                    <button type="button" class="modal-closeBtn">닫기</button>
+                </section>
+        </div>
+    </section>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/assignment/week02/assign2/index.js 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 history_list=[
-    {
-        category:"과외비",
-        detail:"10월 월급",
-        amount: 500000
-    },{
-        category:"식비",
-        detail:"서브웨이",
-        amount:-30000
-    },{
-        category:"용돈",
-        detail:"10월 용돈",
-        amount:100000
-    },{
-        category:"식비",
-        detail:"수육국밥",
-        amount:-10000
-    }];
+let HISTORY_LIST=[
+    {
+        category:"과외비",
+        detail:"10월 월급",
+        amount: 500000
+    },{
+        category:"식비",
+        detail:"서브웨이",
+        amount:-30000
+    },{
+        category:"용돈",
+        detail:"10월 용돈",
+        amount:100000
+    },{
+        category:"식비",
+        detail:"수육국밥",
+        amount:-10000
+    }];
-let history_list=[
-    {
-        category:"과외비",
-        detail:"10월 월급",
-        amount: 500000
-    },{
-        category:"식비",
-        detail:"서브웨이",
-        amount:-30000
-    },{
-        category:"용돈",
-        detail:"10월 용돈",
-        amount:100000
-    },{
-        category:"식비",
-        detail:"수육국밥",
-        amount:-10000
-    }];
+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;
-    let init_balance=0;
-    let income_total=0;
-    let outcome_total=0;
+    let INIT_BALANCE=0;
+    let INCOME_TOTAL=0;
+    let OUTCOME_TOTAL=0;
-    let init_balance=0;
-    let income_total=0;
-    let outcome_total=0;
+    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);
+})
+}