-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (81 loc) · 4.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>economicChartApp</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>납득 가능한 경제생활을 위하여</h1>
<div class="container">
<div class="columnleft">
<h2><input class="input4em left" placeholder="입력1" type="number" id="isMonth" value="12"> 월 예산</h2>
<h3>총 사용 금액</h3>
<span class="flex-item"><input type="number" class="input100" id="isMonthAmount" value="1800000"> 원</span>
<h3>고정비 예측</h3>
<span class="flex-item"><input type="number" class="input100" id="isFixedAmount" value="600000"> 원</span>
<h3>저축 목표</h3>
<span class="flex-item"><input type="number" class="input100" id="isSavingAmount" value="200000"> 원</span><br><br>
<span class="flex-item">그러므로 하루 <input type="number" class="input100" id="isSavingAmount" value="30600"> 원</span>
</div>
<div class="columncenter">
<h2>주단위 배당<span class="small">(첫날부터 다음 주 같은 요일까지)</span></h2>
<h3>첫째주</h3>
<span class="flex-item"><input type="number" id="isFirstWeekAmount" class="input100" value="214000"> 원</span>
<h3>둘째주</h3>
<span class="flex-item"><input type="number" id="isSecondWeekAmount" class="input100" value="214000"> 원</span>
<h3>셋째주</h3>
<span class="flex-item"><input type="number" id="isThirdWeekAmount" class="input100" value="214000"> 원</span>
<h3>넷째주</h3>
<span class="flex-item"><input type="number" id="isFourthWeekAmount" class="input100" value="214000"> 원</span>
<h3>다섯째주</h3>
<span class="flex-item"><input type="number" id="isFifthWeekAmount" class="input100" value="91000"> 원</span>
<h3>비상금(5%)</h3>
<span class="flex-item"><input type="number" id="isEmergencyAmount" class="input100" value="50000"> 원</span>
</div>
<div class="columnright">
<h2>원하는 재화들</h2>
<ul id="isGoodsList">
<li>
입력하고 엔터를 누르세요.
<input type="text" class="input100 left" placeholder="재화명" id="inputGoodsName"><input type="number" class="input-em1" placeholder="최저가" id="lowestPrice">원 에서 <input type="number" class="input-em1" placeholder="최고가" id="highestPrice">원 가량
</li>
<li>
<h4>외식 24000 ~ 30000 원</h4>
=> 회당 평균 <b>26000</b> 원
</li>
<li>
<h4>카페 10000 ~ 20000 원</h4>
=> 회당 평균 <b>15000</b> 원
</li>
<li>
<h4>숙박 25000 ~ 35000 원</h4>
=> 회당 평균 <b>30000</b> 원
</li>
<li>
<h4>쇼핑 10000 ~ 20000 원</h4>
=> 회당 평균 <b>15000</b> 원
</li>
</ul>
<h3>권장소비량</h3>
숫자를 바꾸어 조정합니다.<br>
<div id="recommendContainer">
<span class="inblock-item">주 <input type="number" value="4" class="input4em left" id="goods1canuse">회 외식 권장
<button class="delete-btn">×</button>
</span>
<span class="inblock-item">주 <input type="number" value="4" class="input4em left" id="goods2canuse">회 카페 권장
<button class="delete-btn">×</button>
</span>
<span class="inblock-item">주 <input type="number" value="1" class="input4em left" id="goods3canuse">회 숙박 권장
<button class="delete-btn">×</button>
</span>
<span class="inblock-item">주 <input type="number" value="1" class="input4em left" id="goods4canuse">회 쇼핑 권장
<button class="delete-btn">×</button>
</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>