Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Swap-nil-2003
Swap-nil-2003 authored Oct 13, 2022
1 parent a348df7 commit f17317e
Show file tree
Hide file tree
Showing 3 changed files with 318 additions and 0 deletions.
102 changes: 102 additions & 0 deletions JS Projects/Budgetry - Expense Tracker App/budget.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
let totalAmount = document.getElementById("total-amount");
let userAmount = document.getElementById("user-amount");
const checkAmountButton = document.getElementById("check-amount");
const totalAmountButton = document.getElementById("total-amount-button");
const productTitle = document.getElementById("product-title");
const errorMessage = document.getElementById("budget-error");
const productTitleError = document.getElementById("product-title-error");
const productCostError = document.getElementById("product-cost-error");
const amount = document.getElementById("amount");
const expenditureValue = document.getElementById("expenditure-value");
const balanceValue = document.getElementById("balance-amount");
const list = document.getElementById("list");
let tempAmount =0;

//set budget
totalAmountButton.addEventListener("click",()=>{
tempAmount= totalAmount.value;

if(tempAmount=="" || tempAmount<0){
errorMessage.classList.remove("hide");
}
else
{
errorMessage.classList.add("hide");

amount.innerHTML=tempAmount;
//set balance
balanceValue.innerText= tempAmount-expenditureValue.innerText;
//clear input box
totalAmount.value="";
}
});
//disable edit and delete button
const disableButtons = (bool)=> {
let editButtons = document.getElementsByClassName("edit");
Array.from(editButtons).forEach(element =>{
element.disabled = bool;
});
};
//modify list elements
const modifyElement=(element,edit=false)=>{
let parentDiv = element.parentElement;
let currentBalance = balanceValue.innerText;
let currentExpense = expenditureValue.innerText;
let parentAmount = parentDiv.querySelector(".amount").innerText;
if(edit){
let parentText = parentDiv.querySelector(".product").innerText;
productTitle.value= parentText;
userAmount.value=parentAmount;
disableButtons(true);
}
balanceValue.innerText=parseInt(currentBalance)+ parseInt(parentAmount);
expenditureValue.innerText=parseInt(currentExpense)-parseInt(parentAmount);
parentDiv.remove();
};


//create Expense List
const listCreator =(expenseName, expenseValue) =>{
let subListContent = document.createElement("div");
subListContent.classList.add("sublist-content", "flex-space");
list.appendChild(subListContent);
subListContent.innerHTML = `<p class="product">${expenseName}</p><p class="amount">${expenseValue}</p>`;
let editButton = document.createElement("button");
editButton.classList.add("fa-solid","fa-pen-to-square","edit");
editButton.style.fontSize ="24px";
editButton.addEventListener("click", ()=>{
modifyElement(editButton,true);
});
let deleteButton = document.createElement("button");
deleteButton.classList.add("fa-solid","fa-trash-can","delete");
deleteButton.style.fontSize= "24px";
deleteButton.addEventListener("click", ()=>{
modifyElement(deleteButton);
});
subListContent.appendChild(editButton);
subListContent.appendChild(deleteButton);
document.getElementById("list").appendChild(subListContent);
};

//adding expenses
checkAmountButton.addEventListener("click",()=>{

if(!userAmount.value || !productTitle.value){
productTitleError.classList.remove("hide");
return false;
}
//enable buttons
disableButtons(false);
//total expense
let expenditure = parseInt(userAmount.value);
let sum = parseInt(expenditureValue.innerText)+expenditure;
expenditureValue.innerText=sum;
//balance
const totalBalance = tempAmount-sum;
balanceValue.innerText = totalBalance;
//add to list
listCreator(productTitle.value, userAmount.value);

productTitle.value="";
userAmount.value="";
});
58 changes: 58 additions & 0 deletions JS Projects/Budgetry - Expense Tracker App/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;500;700&family=Open+Sans:wght@500&family=Varela+Round&display=swap" rel="stylesheet">
<title>Expense Tracker</title>
</head>
<body>
<header>
<div class="header">Your Inventory</div>
</header>
<div class="wrapper">
<div class="container">
<div class="sub-container">
<!-- Budget -->
<div class="total-amount-container">
<h3>Budget</h3>
<p class="hide error" id="budget-error">Value cannot be empty or negative</p>
<input type="number" id="total-amount" placeholder="Enter total budget">
<button class="submit" id="total-amount-button">Set Budget</button>
</div>
<!-- Expenditure -->
<div class="user-amount-container">
<h3>Expenses</h3>
<p class="hide error" id="product-title-error">Value cannot be empty or negative</p>
<input type="text" class="product-title" id="product-title" placeholder="Enter Product title">
<input type="number" id="user-amount" placeholder="Enter Cost of Product">
<button class="submit" id="check-amount">Check Amount</button>
</div>
</div>
<!-- Output -->
<div class="output-container flex-space">
<div>
<p>Total Budget</p>
<span id="amount">0</span>
</div>
<div>
<p>Expenses</p>
<span id="expenditure-value">0</span>
</div>
<div>
<p>Balance</p>
<span id="balance-amount">0</span>
</div>
</div>
</div>
<div class="list">
<h3>Expense List</h3>
<div class="list-container" id="list"></div>
</div>
</div>
<script src="budget.js"></script>
</body>
</html>
158 changes: 158 additions & 0 deletions JS Projects/Budgetry - Expense Tracker App/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: 'Varela Round', sans-serif;
}
body{
background-color: #9a9b9c7a;
}
.header{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2.5em;
margin-bottom: 1em;
font-size: 28px;
font-weight: bold;
}
.wrapper{
width:90%;
font-size:15px;
max-width: 45rem;
margin: 1rem auto;
}
.container{
width:100%;
}
.sub-container{
width:100%;
display:grid;
grid-template-columns: 1fr 1fr;
gap: 3em;
}
.flex{
display: flex;
align-items: center;
}
.flex-space{
display: flex;
justify-content: space-between;
align-items: center;
}

.wrapper h3{
color: #363d55;
font-weight: bold;
margin-bottom: 0.7em;
}
.container input{
display: block;
width:100%;
padding: 0.8em;
font-size: 14px;
border: 1px solid #d0d0d0;
border-radius: 0.3em;
color:#414a67;
outline: none;
font-weight: 400;
margin-bottom: 0.9em;
}
.container input:focus{
border-color:rgb(36, 127, 212);
}
.total-amount-container, .user-amount-container{
background-color: #ffffff;
padding: 1.5em;
border-radius: 0.4em;
box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
}

.output-container{
background-color: rgb(36, 127, 212);
color: #ffffff;
border-radius: 0.3em;
box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
font-weight: 500;
margin: 2em 0;
padding:1.2em;
}
.output-container p{
font-weight: 500;
margin-bottom:0.5em;
}
.output-container span{
display: block;
text-align: center;
font-weight: 400;
}
.submit{
font-size: 1em;
margin-top: 0.8em;
background-color:rgb(36, 127, 212) ;
border:none;
outline: none;
color: #ffffff;
border-radius: 0.4em;
padding: 0.5em 0.8em;
cursor:pointer;
}
.submit:hover{
background-color: rgb(14, 71, 124) ;
}
.list{
background-color: #ffffff;
padding: 1.5em;
box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
border-radius: 0.3em;
}
.sublist-content{
width:100%;
border-left: 0.3em solid rgb(36, 127, 212);
margin-bottom:0.6em;
padding: 0.5em 0;
}
.product{
font-weight: 500;
margin-left: 1.5em;
color: #363d55;
}
.amount{
color: #363d55;
margin-left: 20%;
}
.icons-container{
width: 5em;
margin: 1.2em;
align-items: center;
}
.product-title{
margin-bottom: 1em;
}
.hide{
display:none;
}
.error{
color:rgb(231, 52, 52)
}
.edit{
margin-left: auto;
}
.edit, .delete{
background: transparent;
cursor:pointer;
margin-right: 1.5em;
border:none;
color:rgb(36, 127, 212);
}
.edit:hover, .delete:hover{
color:rgb(14, 71, 124);
}
@media screen and (max-width:600px){
.wrapper{
font-size: 14px;
}
.sub-container{
grid-template-columns: 1fr;
}
}

0 comments on commit f17317e

Please sign in to comment.