Skip to content

Commit 294a337

Browse files
Bazil21Bazil21
committed
Update
1 parent cdab51c commit 294a337

File tree

5 files changed

+206
-0
lines changed

5 files changed

+206
-0
lines changed

‎Images/money1.jpg‎

608 KB
Loading

‎bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Page Title</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
9+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10+
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
11+
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Concert+One&family=Grandstander:ital,wght@0,300;0,500;0,800;1,300&display=swap" rel="stylesheet">
12+
<link rel='stylesheet' href="bootstrap.min.css">
13+
</head>
14+
<body>
15+
<div class="container" >
16+
<div class="container1">
17+
<h1 id="header" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="700">Simple Expense Tracker</h1>
18+
<h4 id="closing">Closing Balance</h4>
19+
<h3 id="cbalance">0.00 $</h3>
20+
<div class="row1">
21+
<div class="income" data-aos="fade-right" data-aos-duration="1500">
22+
<span><i class="far fa-money-bill-alt" style='font-size:40px;color:black'></i></span>
23+
<h3>Income</h3>
24+
<h3 id="income">0.00 $</h3>
25+
</div>
26+
<div class="expense" data-aos="fade-left" data-aos-duration="1500">
27+
<span><i class='fas fa-hand-holding-usd' style='font-size:42px;color:black'></i></span>
28+
<h3>Expense</h3>
29+
<h3 id="expense">0.00 $</h3>
30+
</div>
31+
</div>
32+
<div class="col-md-8 mx-auto form">
33+
<label for="basic-url" id="form-label">Amount<br>
34+
(positive for income, negative for expense)</label><br>
35+
<div class="input-group">
36+
<input type="number" class="form-control" id="input" aria-label="Amount (to the nearest dollar)">
37+
<span class="sideicon">.00</span>
38+
</div>
39+
<button class="button" type="button" id="Save" onclick="expense()">Save</button>
40+
</div>
41+
</div>
42+
43+
</div>
44+
</body>
45+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
46+
<script src='script.js'></script>
47+
</html>

‎main.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
body{
2+
background-image: url("./Images/money1.jpg");
3+
background-repeat: no-repeat;
4+
background-size:cover
5+
}
6+
7+
.container1{
8+
width: 700px;
9+
margin: 0 auto;
10+
height: 550px;
11+
background-color: rgba(255, 0, 0, 0.4);
12+
margin-top: 2rem;
13+
border: black 2px solid;
14+
-webkit-box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
15+
-moz-box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
16+
box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
17+
border-radius: .5rem;
18+
}
19+
#header{
20+
text-shadow: 1px 5px 3px rgba(131, 113, 145, 1);
21+
color: white;
22+
font-family: 'Grandstander', cursive;
23+
text-transform: uppercase;
24+
text-align: center;
25+
}
26+
#closing{
27+
padding-top: 10px;
28+
padding-left: 1rem;
29+
color:black;
30+
font-family: Verdana,Tahoma, sans-serif;
31+
font-weight: bolder;
32+
}
33+
#cbalance{
34+
color:black;
35+
font-weight: 500;
36+
padding-left: 1.5rem;
37+
font-family:Arial, Helvetica, sans-serif;
38+
}
39+
40+
.income{
41+
margin-left: 80px;
42+
text-align: center;
43+
width: 250px;
44+
height: 130px;
45+
background-color:rgb(0, 128 , 0 , 0.7) ;
46+
float: left;
47+
padding-top:5px;
48+
color: white;
49+
font-family: 'Grandstander', cursive;
50+
font-weight: 300;
51+
border-radius: 1rem;
52+
}
53+
.expense{
54+
width: 250px;
55+
background-color:rgb(128,0,128,0.7);
56+
height: 130px;
57+
margin-left: 350px;
58+
text-align: center;
59+
padding-top:5px;
60+
font-family: 'Grandstander', cursive;
61+
font-weight: 300;
62+
color: white;
63+
border-radius: 1rem;
64+
}
65+
input[type="number"]{
66+
background-color: rgb(128,0,0,0.6);
67+
border: 0;
68+
}
69+
input[type="number"]:focus{
70+
background-color: rgb(0,0,0,0.7);
71+
color: white;
72+
box-shadow: 0;
73+
}
74+
.form{
75+
margin-top: 80px;
76+
}
77+
.sideicon{
78+
background-color: rgb(0,0,0,0.7);
79+
padding: .5rem;
80+
border-radius: 3px;
81+
color: white;
82+
}
83+
#form-label{
84+
font-family:'Grandstander', cursive ;
85+
font-weight: bold;
86+
color: black;
87+
font-size: 20px;
88+
}
89+
.button{
90+
border: none;
91+
background: #0bec4394;
92+
color: #000000 !important;
93+
font-weight:bolder;
94+
padding: 15px;
95+
text-transform: uppercase;
96+
border-radius: 6px;
97+
display: inline-block;
98+
transition: all 0.3s ease 0s;
99+
text-align: center;
100+
margin-left: 10rem;
101+
margin-top: .5rem;
102+
}
103+
.button:hover{
104+
color: #404040 !important;
105+
font-weight: 700 !important;
106+
letter-spacing: 3px;
107+
background: #fad390;
108+
box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.685);
109+
box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
110+
transition: all 0.3s ease 0s;
111+
}
112+
.button:focus{
113+
outline: none;
114+
}

‎script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
AOS.init();
2+
3+
4+
function expense(){
5+
var cbalance = document.getElementById("cbalance");
6+
var income = document.getElementById("income");
7+
var expense = document.getElementById("expense");
8+
var input = document.getElementById("input").value;
9+
10+
11+
if(input == "")
12+
{
13+
alert("Please ! Enter Your Salaray or Expense.");
14+
}
15+
16+
17+
else if(input > 0) {
18+
total_amount = parseInt(cbalance.innerHTML);
19+
closing_balance = total_amount + parseInt(input);
20+
cbalance.innerHTML = closing_balance + " .00 $" ;
21+
income.innerHTML = closing_balance + " .00 $";
22+
document.getElementById("input").value.reset();
23+
}
24+
25+
26+
27+
else if(input<0)
28+
{
29+
30+
cbalance = parseInt(cbalance.innerHTML);
31+
exp_balance = parseInt(expense.innerHTML)
32+
total_amount = cbalance + parseInt(input);
33+
document.getElementById("expense").innerHTML = (exp_balance - input)+ " .00 $";
34+
document.getElementById("cbalance").innerHTML = total_amount + " .00 $"
35+
}
36+
37+
38+
}

0 commit comments

Comments
 (0)