Skip to content

Commit f46f8d4

Browse files
NaeuCodeNaeuCode
committed
Adding Day #16
1 parent f53639b commit f46f8d4

File tree

6 files changed

+323
-0
lines changed

6 files changed

+323
-0
lines changed

‎Day #16 - Budget App/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Day #16
2+
3+
### Budget App
4+
In this tutorial ([Open in Youtube](https://youtu.be/_gQEt5aJI2c)), I am gonna showing to you how to code a budget app with javascript. this budget app is fully responsive and you can use it in your web projects❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
10+
![screenshot]()

‎Day #16 - Budget App/ScreenShot.png

373 KB
Loading

‎Day #16 - Budget App/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+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day #16 - Budget App | NaeuCode </title>
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<div class="container">
13+
14+
<div class="sub-container">
15+
<div class="total-amount-container">
16+
<h3>Budget</h3>
17+
<p class="hide error" id="budget-error">
18+
Value cannot be empty or negative
19+
</p>
20+
<input type="number" id="total-amount" placeholder="Enter Total Amount">
21+
<button class="submit" id="total-amount-button">Set Budget</button>
22+
</div>
23+
24+
<div class="user-amount-container">
25+
<h3>Expenses</h3>
26+
<p class="hide error" id="product-title-error">
27+
Values Cannot be empty
28+
</p>
29+
<input type="text" class="product-title" id="product-title" placeholder="Enter Title Of Product">
30+
<input type="number" id="user-amount" placeholder="Enter Cost of Product">
31+
<button class="submit" id="check-amount"> Check Amount</button>
32+
</div>
33+
</div>
34+
35+
<div class="output-container flex-space">
36+
<div>
37+
<p>Total Budget</p>
38+
<span id="amount">
39+
0
40+
</span>
41+
</div>
42+
43+
<div>
44+
<p>Expenses</p>
45+
<span id="expenditure-value">
46+
0
47+
</span>
48+
</div>
49+
50+
<div>
51+
<p>Balance</p>
52+
<span id="balance-amount">
53+
0
54+
</span>
55+
</div>
56+
</div>
57+
58+
59+
<div class="list">
60+
<h3>Expenses List</h3>
61+
<div class="list-container" id="list"></div>
62+
</div>
63+
64+
</div>
65+
</div>
66+
67+
<script src="index.js"></script>
68+
</body>
69+
</html>

‎Day #16 - Budget App/index.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
let totalAmount = document.getElementById("total-amount");
2+
let userAmount = document.getElementById("user-amount");
3+
const checkAmountButton = document.getElementById("check-amount");
4+
const totalAmountButton = document.getElementById("total-amount-button");
5+
const productTitle = document.getElementById("product-title");
6+
const errorMessage = document.getElementById("budget-error");
7+
const productTitleError = document.getElementById("product-title-error");
8+
const productCostError = document.getElementById("product-cost-error");
9+
const amount = document.getElementById("amount");
10+
const expenditureValue = document.getElementById("expenditure-value");
11+
const balanceValue = document.getElementById("balance-amount");
12+
const list = document.getElementById("list");
13+
let tempAmount = 0;
14+
15+
16+
totalAmountButton.addEventListener("click", () => {
17+
tempAmount = totalAmount.value;
18+
19+
if (tempAmount === "" || tempAmount < 0) {
20+
errorMessage.classList.remove("hide");
21+
} else {
22+
errorMessage.classList.add("hide");
23+
amount.innerHTML = tempAmount;
24+
balanceValue.innerText = tempAmount - expenditureValue.innerText;
25+
totalAmount.value = "";
26+
}
27+
});
28+
29+
const disableButtons = (bool) => {
30+
let editButtons = document.getElementsByClassName("edit");
31+
Array.from(editButtons).forEach((element) => {
32+
element.disabled = bool;
33+
});
34+
}
35+
36+
const modifyElement = (element, edit = false) => {
37+
let parentDiv = element.parentElement;
38+
let currentBalance = balanceValue.innerText;
39+
let currentExpense = expenditureValue.innerText;
40+
let parentAmount = parentDiv.querySelector(".amount").innerText;
41+
if (edit) {
42+
let parentText = parentDiv.querySelector(".product").innerText;
43+
productTitle.value = parentText;
44+
parentAmount.value = parentAmount;
45+
disableButtons(true);
46+
}
47+
48+
balanceValue.innerText = parseInt(currentBalance) + parseInt(parentAmount);
49+
expenditureValue.innerText = parseInt(currentExpense) - parseInt(parentAmount);
50+
parentDiv.remove();
51+
};
52+
53+
const listCreator = (expenseName, expenseValue) => {
54+
let subListContent = document.createElement("div");
55+
subListContent.classList.add("sublist-content" , "flex-space");
56+
list.appendChild(subListContent);
57+
subListContent.innerHTML = `<p class="product">${expenseName}</p> <p class="amount">${expenseValue}</p>`;
58+
59+
let editButton = document.createElement("button");
60+
editButton.classList.add("fa-solid" , "fa-pen-to-square", "edit");
61+
editButton.style.fontSize = "1em";
62+
editButton.addEventListener("click", () => {
63+
modifyElement(editButton, true);
64+
});
65+
66+
let deleteButton = document.createElement("button");
67+
deleteButton.classList.add("fa-solid", "fa-trash-can", "delete");
68+
deleteButton.style.fontSize = "1em";
69+
deleteButton.addEventListener("click", () => {
70+
modifyElement(deleteButton);
71+
});
72+
73+
subListContent.appendChild(editButton);
74+
subListContent.appendChild(deleteButton);
75+
document.getElementById("list").appendChild(subListContent);
76+
};
77+
78+
checkAmountButton.addEventListener("click", () => {
79+
if (!userAmount.value || !productTitle.value) {
80+
productTitleError.classList.remove("hide");
81+
return false;
82+
}
83+
84+
disableButtons(false);
85+
86+
let expenditure = parseInt(userAmount.value);
87+
let sum = parseInt(expenditureValue.innerText) + expenditure;
88+
expenditureValue.innerText = sum;
89+
90+
const totalBalance = tempAmount - sum;
91+
balanceValue.innerText = totalBalance;
92+
93+
listCreator(productTitle.value, userAmount.value);
94+
productTitle.value = "" ;
95+
userAmount.value = "";
96+
});

‎Day #16 - Budget App/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins',sans-serif;
8+
border: 0;
9+
outline: none;
10+
}
11+
12+
.wrapper {
13+
width: 80%;
14+
margin: 1rem auto;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
background: #2e2c53;
19+
border-radius: 4px;
20+
}
21+
22+
.container {
23+
width: 100%;
24+
}
25+
26+
.sub-container {
27+
width: 100%;
28+
display: grid;
29+
grid-template-columns: 1fr 1fr;
30+
}
31+
32+
.wrapper h3 {
33+
color: #fff;
34+
font-weight: 500;
35+
margin-bottom: .6em;
36+
}
37+
38+
.container input {
39+
display: block;
40+
width: 100%;
41+
padding: .6em .3em;
42+
border-radius: 4px;
43+
color: #414a67;
44+
font-weight: 400;
45+
margin-bottom: .6em;
46+
}
47+
48+
.total-amount-container , .user-amount-container {
49+
padding: 1.25em .9em;
50+
border-radius: 4px;
51+
border: 1px solid #fff;
52+
margin: 1rem 1rem 0 1rem;
53+
}
54+
55+
.output-container {
56+
background: #587ef4;
57+
color: #fff;
58+
border-radius: 4px;
59+
margin: 1rem;
60+
padding: 1.2em;
61+
border: 1px solid #fff;
62+
}
63+
64+
.flex-space {
65+
display: flex;
66+
justify-content: space-between;
67+
align-items: center;
68+
}
69+
70+
.output-container p {
71+
font-weight: 500;
72+
margin: .6em;
73+
border-bottom: 1px solid #fff;
74+
}
75+
76+
.output-container span {
77+
display: block;
78+
text-align: center;
79+
font-weight: 400;
80+
color: #e6e6e6;
81+
}
82+
83+
.submit {
84+
font-size: 1em;
85+
margin-top: .8em;
86+
background: #fc6b21;
87+
color:#fff;
88+
padding: .6em 1.2em;
89+
border-radius: 4px;
90+
cursor: pointer;
91+
}
92+
93+
#total-amount-button {
94+
margin-top: 3.6rem;
95+
}
96+
97+
.list {
98+
padding: 1.8em 1.2em;
99+
border-radius: 4px;
100+
border: 1px solid #fff;
101+
margin: 1rem;
102+
}
103+
104+
.list h3 {
105+
border-bottom: 1px solid #fff;
106+
margin-bottom: 1rem;
107+
}
108+
109+
.sublist-content {
110+
width: 100%;
111+
border-left: .3em solid #587ef4;
112+
margin-bottom: .6em;
113+
padding: .5em 1em;
114+
display: grid;
115+
grid-template-columns: 3fr 2fr 1fr 1fr;
116+
color: #ccc;
117+
}
118+
119+
.product {
120+
font-weight: 600;
121+
}
122+
123+
.hide {
124+
display: none;
125+
}
126+
127+
.error {
128+
color: #ff465a;
129+
}
130+
131+
.edit , .delete {
132+
background: transparent;
133+
cursor: pointer;
134+
color: #ca2b2b;
135+
}
136+
137+
@media screen and (max-width:600px) {
138+
.wrapper{
139+
font-size: 14px;
140+
}
141+
142+
.sub-container {
143+
grid-template-columns: 1fr;
144+
gap: 1em;
145+
}
146+
147+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ Here we have list of projects:
2626
13. Snake Game
2727
14. Text To Speech
2828
15. Multi Step Form
29+
16. Budget App

0 commit comments

Comments
 (0)