Skip to content

Commit cf86df2

Browse files
solygambassolygambas
committedMar 13, 2021
add expense tracker styling
1 parent 7cc7109 commit cf86df2

File tree

4 files changed

+235
-1
lines changed

4 files changed

+235
-1
lines changed
 

‎67-expense tracker/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Expense Tracker</title>
14+
</head>
15+
<body>
16+
<h1>Expense Tracker</h1>
17+
<div class="container">
18+
<h2>Your Balance</h2>
19+
<h2 id="balance" class="balance">$0.00</h2>
20+
<div class="inc-exp-container">
21+
<div>
22+
<h4>Income</h4>
23+
<p id="money-plus" class="money plus">+$0.00</p>
24+
</div>
25+
<div>
26+
<h4>Expense</h4>
27+
<p id="money-minus" class="money minus">-$0.00</p>
28+
</div>
29+
</div>
30+
<h3>History</h3>
31+
<ul id="list" class="list">
32+
<!-- <li class="minus">
33+
Cash <span>-$400</span
34+
><button class="delete-btn"><i class="fa fa-times"></i></button>
35+
</li>
36+
<li class="plus">
37+
Cash <span>$400</span
38+
><button class="delete-btn"><i class="fa fa-times"></i></button>
39+
</li> -->
40+
</ul>
41+
<h3>Add new transaction</h3>
42+
<form id="form">
43+
<div class="form-control">
44+
<label for="text">Description</label>
45+
<input type="text" id="text" placeholder="Enter description..." />
46+
</div>
47+
<div class="form-control">
48+
<label for="amount"
49+
>Amount <br />
50+
<small>(-100 = expense, 100 = income)</small></label
51+
>
52+
<input type="number" id="amount" placeholder="Enter amount..." />
53+
</div>
54+
<button class="btn">Add transaction</button>
55+
</form>
56+
</div>
57+
<script src="script.js"></script>
58+
</body>
59+
</html>

‎67-expense tracker/script.js

Whitespace-only changes.

‎67-expense tracker/style.css

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

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@
7171
| 63 | [DOM Array Methods](https://github.com/solygambas/html-css-fifty-projects/tree/master/63-DOM%20array%20methods) | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR) |
7272
| 64 | [Menu Slider & Modal](https://github.com/solygambas/html-css-fifty-projects/tree/master/64-menu%20slider%20modal) | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd) |
7373
| 65 | [Hangman Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/65-hangman%20game) | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr) |
74-
| 66 | [Meal Finder App](https://github.com/solygambas/html-css-fifty-projects/tree/master/66-meal%20finder) | [Live Demo](https://codepen.io/solygambas/full/dyOagYE) |
74+
| 66 | [Meal Finder](https://github.com/solygambas/html-css-fifty-projects/tree/master/66-meal%20finder) | [Live Demo](https://codepen.io/solygambas/full/dyOagYE) |
75+
| 67 | [Expense Tracker](https://github.com/solygambas/html-css-fifty-projects/tree/master/67-expense%20tracker) | [Live Demo](#) |
7576

7677
Mainly based on 2 courses by Brad Traversy (2020):
7778

0 commit comments

Comments
 (0)