[2주차 기본 과제] 가계부 #7
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| export const CATEGORY = [ | ||
| { | ||
| category: "식비", | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "생활용품", | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "문화생활", | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "알바", | ||
| type: "수입", | ||
| }, | ||
| { | ||
| category: "장학금", | ||
| type: "수입", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| export const HISTORY_LIST = [ | ||
| { | ||
| category: "식비", | ||
| subject: "김밥천국", | ||
| amount: 4500, | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "생활용품", | ||
| subject: "다이소", | ||
| amount: 15000, | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "문화생활", | ||
| subject: "CGV", | ||
| amount: 20000, | ||
| type: "지출", | ||
| }, | ||
| { | ||
| category: "알바", | ||
| subject: "월급", | ||
| amount: 300000, | ||
| type: "수입", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,124 +1,90 @@ | ||
| <!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="styles.css" /> | ||
| <title>지뮤 가계부</title> | ||
| <script type="module" src="./constants/HISTORY.js"></script> | ||
| <script type="module" src="./constants/CATEGORY.js"></script> | ||
| </head> | ||
| <body> | ||
| <header><h1>지뮤의 가계부</h1></header> | ||
|
|
||
| <!-- 총액 보여주는 영역 --> | ||
| <section class="summary-section"> | ||
| <article class="summary-article"> | ||
| <h2>나의 자산</h2> | ||
| <span class="total"></span> | ||
| <div class="summary-article__details"> | ||
| <div class="summary-article__details-minus"> | ||
| <img src="./images/minus.png" alt="마이너스" /><span></span> | ||
| </div> | ||
| <div class="summary-article__details-plus"> | ||
| <img | ||
| class="summary-article__details-plus" | ||
| src="./images/plus.png" | ||
| alt="플러스" | ||
| /><span></span> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| <div class="first-line"></div> | ||
|
|
||
| <!-- 세부 리스트 영역 --> | ||
| <section> | ||
| <header class="details-container"> | ||
| <div class="date-container"> | ||
| <button type="button"><</button> | ||
|
There was a problem hiding this comment. 아차차 HTML 특수문자 처리.....습관적으로 그냥 썼는데 리팩토링때 명심해야겠어요 |
||
| <h3>10월 13일</h3> | ||
| <button type="button">></button> | ||
| </div> | ||
| <div class="h4-checkbox-container"> | ||
| <h4>내역 리스트</h4> | ||
| <div class="checkbox-container"> | ||
| <input type="checkbox" id="income" checked /> | ||
| <label class="checkbox__income" for="income">수입</label> | ||
| <input type="checkbox" id="expense" checked /> | ||
| <label class="checkbox__expense" for="expense"> 지출 </label> | ||
| </div> | ||
| </div> | ||
| <div class="second-line"></div> | ||
| </header> | ||
|
|
||
| <!-- 내역 리스트 항목들 --> | ||
| <ul class="list-container"></ul> | ||
| </section> | ||
|
|
||
| <section class="modal-container"> | ||
| <div class="modal-header"> | ||
| <h2>내역 추가</h2> | ||
| <div class="checkbox-container"> | ||
| <input type="checkbox" id="modalIncome" checked /> | ||
| <label class="modal-income" for="modalIncome">수입</label> | ||
| <input type="checkbox" id="modalExpense" /> | ||
| <label class="modal-expense" for="modalExpense"> 지출 </label> | ||
| </div> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <label for="category">종류</label> | ||
| <select name="category" id="category"></select> | ||
| <label for="amount">금액</label> | ||
| <input type="text" name="amount" id="amount" /> | ||
| <label for="subject">내용</label> | ||
| <input type="text" name="subject" id="subject" /> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button class="modal-button save" type="button">저장하기</button> | ||
| <button class="modal-button close" type="button">닫기</button> | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <button type="button" id="addition"> | ||
| <img src="./images/addition.png" alt="내역-추가-버튼" /> | ||
| </button> | ||
| </footer> | ||
| <script type="module" src="index.js"></script> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
category도 따로 상수처리를 할 생각은 전혀 못했는데!! 역시⭐️