-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #241 from Swap-nil-2003/main
Added Quiz App and Budget Tracker App
- Loading branch information
Showing
13 changed files
with
1,138 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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=""; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.