Skip to content
GitLab
Commit 39ebc68f authored by Sasho Gjorgiev's avatar Sasho Gjorgiev
Browse files

challenge 21 done

parent 425e8499
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 8277 additions and 0 deletions
+8277 -0
Challenge-21/Xzx6cfcjlXToiRX9t88aNO41gL67ZaFvVL8nXnwS/budget-calculator-app/css/main.css 0 → 100644
+ 125
- 0
View file @ 39ebc68f
body {
background: #f5f5f5f5;
color: #333333;
}
.budget-feedback,
.expense-feedback {
display: none;
}
.budget-form {
border: 0.15rem solid #317b22;
padding: 1rem;
border-radius: 0.25rem;
}
.expense-form {
border: 0.15rem solid #b80c09;
padding: 1rem;
border-radius: 0.25rem;
}
.budget-submit {
background: transparent;
border: 0.1rem solid #317b22;
color: #317b22;
}
.expense-submit {
background: transparent;
border: 0.1rem solid #b80c09;
color: #b80c09;
}
.expense-submit:hover {
background: #b80c09;
color: #f5f5f5f5;
}
.budget-submit:hover {
background: #317b22;
color: #333333;
}
.budget-input {
border: 0.05rem solid #317b22 !important;
}
.expense-input {
border: 0.05rem solid #b80c09 !important;
}
.expense-amount,
.expense-title {
color: #b80c09;
}
.edit-icon {
color: #05668d;
cursor: pointer;
font-size: 1rem;
text-decoration: none !important;
}
.delete-icon {
color: #b80c09;
cursor: pointer;
font-size: 1rem;
text-decoration: none !important;
}
.edit-icon:hover {
color: #05668d;
}
.delete-icon:hover {
color: #b80c09;
}
.showItem {
display: block;
}
.info-title {
font-size: 1.5rem;
}
.budget {
font-size: 1.6rem;
color: #317b22;
}
.expense {
font-size: 1.6rem;
color: #b80c09;
}
.balance {
font-size: 1.6rem;
color:#317b22
}
.budget-icon,
.expense-icon,
.balance-icon {
font-size: 2.5rem;
color: #05668d;
}
.showRed {
color: #b80c09;
}
.showGreen {
color: #317b22;
}
.showBlack {
color: #333333;
}
@media screen and (min-width: 992px) {
.budget {
font-size: 2.6rem;
color: #317b22;
}
.expense {
font-size: 2.6rem;
color: #b80c09;
}
.balance {
font-size: 2.6rem;
}
.budget-icon,
.expense-icon,
.balance-icon {
font-size: 3.5rem;
color: #05668d;
}
}
.list-item {
flex: 0 0 33.33%;
text-align: center;
}
.expense-item {
height: 2rem;
}
Challenge-21/Xzx6cfcjlXToiRX9t88aNO41gL67ZaFvVL8nXnwS/budget-calculator-app/index.html 0 → 100644
+ 154
- 0
View file @ 39ebc68f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- main css -->
<link rel="stylesheet" href="css/main.css" />
<!-- google fonts -->
<link
href="https://fonts.googleapis.com/css?family=Courgette"
rel="stylesheet"
/>
<!-- font awesome -->
<link rel="stylesheet" href="css/all.css" />
<title>budget app</title>
<style></style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-11 mx-auto pt-3">
<!-- title -->
<h3 class="text-uppercase mb-4">budget app</h3>
<div class="row">
<div class="col-md-5 my-3">
<!-- budget feedback -->
<div class="budget-feedback alert alert-danger text-capitalize">
Value cannot be empty or negative.
</div>
<!-- budget form -->
<form id="budget-form" class="budget-form">
<h5 class="text-capitalize">please enter your budget</h5>
<div class="form-group">
<input
type="number"
class="form-control budget-input"
id="budget-input"
/>
</div>
<!-- submit button -->
<button
type="submit"
class="btn text-capitalize budget-submit"
id="budget-submit"
>
calculate
</button>
</form>
</div>
<div class="col-md-7">
<!-- app info -->
<div class="row my-3">
<div class="col-4 text-center mb-2">
<h6 class="text-uppercase info-title">budget</h6>
<span class="budget-icon"
><i class="fas fa-money-bill-alt"></i
></span>
<h4 class="text-uppercase mt-2 budget" id="budget">
<span>$ </span><span id="budget-amount">0</span>
</h4>
</div>
<div class="col-4 text-center">
<h6 class="text-uppercase info-title">expenses</h6>
<span class="expense-icon"
><i class="far fa-credit-card"></i
></span>
<h4 class="text-uppercase mt-2 expense" id="expense">
<span>$ </span><span id="expense-amount">0</span>
</h4>
</div>
<div class="col-4 text-center">
<h6 class="text-uppercase info-title">balance</h6>
<span class="balance-icon"
><i class="fas fa-dollar-sign"></i
></span>
<h4 class="text-uppercase mt-2 balance" id="balance">
<span>$ </span><span id="balance-amount">0</span>
</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 my-3">
<!-- expense feedback -->
<div class="expense-feedback alert alert-danger text-capitalize">
expense feedback
</div>
<!-- expense form -->
<form id="expense-form" class="expense-form">
<h5 class="text-capitalize">please enter your expense</h5>
<div class="form-group">
<input
type="text"
class="form-control expense-input"
id="expense-input"
/>
</div>
<h5 class="text-capitalize">please enter expense amount</h5>
<div class="form-group">
<input
type="number"
class="form-control expense-input"
id="amount-input"
/>
</div>
<!-- submit button -->
<button
type="submit"
class="btn text-capitalize expense-submit"
id="expense-submit"
>
add expense
</button>
</form>
</div>
<div class="col-md-7 my-3">
<table class="table table-bordered">
<thead>
<tr>
<th>Expense title</th>
<th>Expense value</th>
<th></th>
</tr>
</thead>
<tbody id="expense-table" class="text-danger">
<button class="edit-icon d-none">
<i class="fa fa-spinner" aria-hidden="true"></i>
</button>
<button class="delete-icon d-none">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="js/app.js"></script>
</body>
</html>
Challenge-21/Xzx6cfcjlXToiRX9t88aNO41gL67ZaFvVL8nXnwS/budget-calculator-app/js/app.js 0 → 100644
+ 108
- 0
View file @ 39ebc68f
let budgetInput = $("#budget-input");
let calculateBtn = $("#budget-submit");
let expenseInput = $("#expense-input");
let amountInput = $("#amount-input");
let addExpense = $("#expense-submit");
let budget = $("#budget-amount");
let expense = $("#expense-amount");
let balance = $("#balance-amount");
let budgetError = $(".budget-feedback");
let tempAmount = 0;
let expenseError = $(".expense-feedback");
let totalExpenses = [];
let focusForm = $("#budget-form");
calculateBtn.click(function (event) {
event.preventDefault();
tempAmount = budgetInput.val();
if (tempAmount === "" || tempAmount <= 0) {
budgetError.css("display", "block");
} else {
budgetError.css("display", "none");
budget.text(+tempAmount);
calculateBalance();
}
});
focusForm.mouseenter(function () {
budgetError.css("display", "none");
});
addExpense.click(function (event) {
event.preventDefault();
let expenseTitle = expenseInput.val();
let expenseAmountValue = parseFloat(amountInput.val());
if (
expenseTitle.trim() !== "" &&
!isNaN(expenseAmountValue) &&
expenseAmountValue > 0
) {
updateExpenseTable(expenseTitle, expenseAmountValue);
expenseInput.val("");
amountInput.val("");
expenseError.css("display", "none");
} else {
expenseError.css("display", "block");
}
});
function calculateBalance() {
let budgetAmount = tempAmount;
let totalExpense = totalExpenses.reduce((acc, value) => acc + value, 0);
expense.text(totalExpense);
balance.text(+budgetAmount - totalExpense);
}
function updateExpenseTable(expenseTitle, expenseAmountValue) {
const newRow = `<tr>
<td>${expenseTitle.toUpperCase()}</td>
<td>$${expenseAmountValue}</td>
<td>
<button class="edit-icon" style="border: none; margin-right:10px">
<i class="fa fa-spinner" aria-hidden="true" ></i>
</button>
<button class="delete-icon" style="border: none;">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>`;
const tableRow = $(newRow);
tableRow.find(".delete-icon").click(function () {
tableRow.remove();
recalculateExpenses();
});
tableRow.find(".edit-icon").click(function () {
const title = expenseTitle.toUpperCase();
const amount = expenseAmountValue;
tableRow.remove();
$("#expense-input").val(title);
$("#amount-input").val(amount);
});
$("#expense-table").append(tableRow);
recalculateExpenses();
}
function recalculateExpenses() {
totalExpenses = [];
$("#expense-table tr").each(function () {
const expenseValue = parseFloat(
$(this).find("td:eq(1)").text().replace("$", "")
);
if (!isNaN(expenseValue)) {
totalExpenses.push(expenseValue);
}
});
calculateBalance();
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment