Skip to content

Commit 4bcdc1a

Browse files
Tduncan14Tduncan14
committed
keep moving forward
1 parent ba7ff54 commit 4bcdc1a

File tree

3 files changed

+243
-0
lines changed

3 files changed

+243
-0
lines changed

‎expenseTracker/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>expense tracker</title>
8+
9+
<link rel="stylesheet" type="text/css" href="style.css" />
10+
</head>
11+
12+
<body>
13+
<h2> Expense Tracker</h2>
14+
15+
16+
<div class="container">
17+
<h4>Your Balance</h4>
18+
<h1 id="balance">$0.00</h1>
19+
20+
21+
<div class="inc-exp-container">
22+
<div>
23+
<h4>Income</h4>
24+
25+
<p id="money-plus" class="money-plus">+$0.00</p>
26+
</div>
27+
28+
29+
</div>
30+
31+
32+
<div class="inc-exp-container">
33+
<div>
34+
<h4>Expense</h4>
35+
36+
<p id="money-minus" class="money minus"> - $0.00</p>
37+
</div>
38+
39+
40+
</div>
41+
42+
43+
<h3>History</h3>
44+
45+
<ul id="list" class="list">
46+
<li class="minus">Cash <span>-$400</span> <button class="delete-btn">X</button></li>
47+
</ul>
48+
49+
<h3>Add new transaction</h3>
50+
51+
<form id="form">
52+
<div class="form-control">
53+
<label for="text" class="text">Text</label>
54+
<input type="text" id="text" placeholder="Enter text">
55+
</div>
56+
57+
<div class="form-control">
58+
<label for="amount" class="text">Amount <br /> (negative - expense, positive - income)</label>
59+
<input type="number" id="amount" placeholder="Enter text">
60+
</div>
61+
62+
<button class="btn">Add transaction</button>
63+
</form>
64+
</div>
65+
66+
<script src="./script.js"></script>
67+
</body>
68+
69+
</html>

‎expenseTracker/script.js‎

Whitespace-only changes.

‎expenseTracker/style.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
:root {
2+
--box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0.24);
3+
}
4+
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
11+
body {
12+
background-color: #f7f7f7;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
min-height: 100vh;
18+
margin: 0;
19+
20+
}
21+
22+
.container {
23+
margin: 30px auto;
24+
width: 350px;
25+
26+
}
27+
28+
29+
h2 {
30+
letter-spacing: 1px;
31+
margin: 0;
32+
}
33+
34+
35+
h3 {
36+
border-bottom: 1px solid #bbb;
37+
padding-bottom: 10px;
38+
margin: 40px 0 10px;
39+
}
40+
41+
42+
h4 {
43+
margin: 0;
44+
text-transform: uppercase;
45+
}
46+
47+
48+
49+
.inc-exp-container {
50+
background-color: white;
51+
box-shadow: var(--box-shadow);
52+
padding: 20px;
53+
display: flex;
54+
justify-content: space-between;
55+
margin: 20px 0;
56+
}
57+
58+
59+
60+
.inc-exp-container>div {
61+
flex: 1;
62+
text-align: center;
63+
}
64+
65+
66+
67+
68+
.inc-exp-container>div:first-of-type {
69+
border-right: 1px solid #dedede;
70+
}
71+
72+
73+
.money {
74+
font-size: 20px;
75+
letter-spacing: 1px;
76+
margin: 5px 0;
77+
}
78+
79+
80+
.money.plus {
81+
color: #2ecc71;
82+
}
83+
84+
.money.minus {
85+
color: #c0392b;
86+
}
87+
88+
89+
90+
label {
91+
display: inline-block;
92+
margin: 10px 0;
93+
}
94+
95+
96+
input[type='text'].input[type='number'] {
97+
98+
border: 1px solid #dedede;
99+
border-radius: 2px;
100+
display: block;
101+
font-size: 16px;
102+
padding: 10px;
103+
width: 100%;
104+
}
105+
106+
107+
.btn {
108+
background-color: #9c88ff;
109+
box-shadow: var(--box-shadow);
110+
color: #fff;
111+
border: 0;
112+
display: block;
113+
cursor: pointer font-size: 16px;
114+
margin: 10px 0 30px;
115+
padding: 10px;
116+
width: 100%;
117+
}
118+
119+
120+
.list {
121+
list-style-type: none;
122+
padding: 0;
123+
margin-bottom: 40px;
124+
}
125+
126+
127+
.list li {
128+
background-color: #fff;
129+
box-shadow: var(--box-shadow);
130+
color: #333;
131+
display: flex;
132+
justify-content: space-between;
133+
position: relative;
134+
margin: 10px 0;
135+
136+
}
137+
138+
.list li.plus {
139+
border-right: 5px solid #2ecc71
140+
}
141+
142+
143+
.li li.minus {
144+
border-right: 5px solid #c0392b;
145+
}
146+
147+
148+
.delete-btn {
149+
cursor: pointer;
150+
background-color: #e74c3c;
151+
border: 0;
152+
color: #fff;
153+
font-size: 20px;
154+
line-height: 20px;
155+
padding: 2px 5px;
156+
position: absolute;
157+
top: 50%;
158+
left: 0;
159+
transform: translate(-100%, -50%);
160+
opacity: 0;
161+
transition: opacity 0.3s ease;
162+
}
163+
164+
165+
.list li:hover .delete-btn {
166+
opacity: 1;
167+
}
168+
169+
170+
171+
.btn:focus,
172+
.delete-btn:focus {
173+
outline: 0;
174+
}

0 commit comments

Comments
 (0)