diff --git a/Budget App/index.html b/Budget App/index.html new file mode 100644 index 0000000..d585521 --- /dev/null +++ b/Budget App/index.html @@ -0,0 +1,79 @@ + + + + + Budget App + + + + + + + +
+
+

Budget App

+
+ +
+

Budget

+

+ Value cannot be empty or negative +

+ + +
+ + +
+

Expenses

+

+ Values cannot be empty +

+ + + +
+
+ +
+
+

Total Budget

+ 0 +
+
+

Expenses

+ 0 +
+
+

Balance

+ 0 +
+
+
+ +
+

Expense List

+
+
+
+ + + + diff --git a/Budget App/readme.md b/Budget App/readme.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Budget App/readme.md @@ -0,0 +1 @@ + diff --git a/Budget App/style/script.js b/Budget App/style/script.js new file mode 100644 index 0000000..d8102de --- /dev/null +++ b/Budget App/style/script.js @@ -0,0 +1,103 @@ +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 Part +totalAmountButton.addEventListener("click", () => { + tempAmount = totalAmount.value; + //empty or negative input + if (tempAmount === "" || tempAmount < 0) { + errorMessage.classList.remove("hide"); + } else { + errorMessage.classList.add("hide"); + //Set Budget + amount.innerHTML = tempAmount; + //Set Balance + balanceValue.innerText = tempAmount - expenditureValue.innerText; + //Clear Input Box + totalAmount.value = ""; + } +}); + +//Function To 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(); +}; + +//Function To Create List +const listCreator = (expenseName, expenseValue) => { + let sublistContent = document.createElement("div"); + sublistContent.classList.add("sublist-content", "flex-space"); + list.appendChild(sublistContent); + sublistContent.innerHTML = `

${expenseName}

${expenseValue}

`; + let editButton = document.createElement("button"); + editButton.classList.add("fa-solid", "fa-pen-to-square", "edit"); + editButton.style.fontSize = "1.2em"; + editButton.addEventListener("click", () => { + modifyElement(editButton, true); + }); + let deleteButton = document.createElement("button"); + deleteButton.classList.add("fa-solid", "fa-trash-can", "delete"); + deleteButton.style.fontSize = "1.2em"; + deleteButton.addEventListener("click", () => { + modifyElement(deleteButton); + }); + sublistContent.appendChild(editButton); + sublistContent.appendChild(deleteButton); + document.getElementById("list").appendChild(sublistContent); +}; + +//Function To Add Expenses +checkAmountButton.addEventListener("click", () => { + //empty checks + if (!userAmount.value || !productTitle.value) { + productTitleError.classList.remove("hide"); + return false; + } + //Enable buttons + disableButtons(false); + //Expense + let expenditure = parseInt(userAmount.value); + //Total expense (existing + new) + let sum = parseInt(expenditureValue.innerText) + expenditure; + expenditureValue.innerText = sum; + //Total balance(budget - total expense) + const totalBalance = tempAmount - sum; + balanceValue.innerText = totalBalance; + //Create list + listCreator(productTitle.value, userAmount.value); + //Empty inputs + productTitle.value = ""; + userAmount.value = ""; +}); diff --git a/Budget App/style/styles.css b/Budget App/style/styles.css new file mode 100644 index 0000000..129e17f --- /dev/null +++ b/Budget App/style/styles.css @@ -0,0 +1,152 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: sans-serif; + } + body { + background-color: #d7d7d7; + opacity: .9; + } + .wrapper { + width: 90%; + font-size: 16px; + max-width: 43.75em; + margin: 1em auto; + } + .container { + width: 100%; + } + .container h1{ + text-align: center; + margin: 5%; + text-transform: uppercase; + color: #001f7b; + + } + .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: 500; + margin-bottom: 0.6em; + } + .container input { + display: block; + width: 100%; + padding: 0.6em 0.3em; + border: 1px solid #d0d0d0; + border-radius: 0.3em; + color: #414a67; + outline: none; + font-weight: 400; + margin-bottom: 0.6em; + } + .container input:focus { + border-color: #001f7b; + } + .total-amount-container, + .user-amount-container { + background-color: #ffffff; + padding: 1.25em 0.9em; + border-radius: 0.3em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + } + .output-container { + background-color: #001f7b; + color: #ffffff; + border-radius: 0.3em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + margin: 2em 0; + padding: 1.2em; + } + .output-container p { + font-weight: 500; + margin-bottom: 0.6em; + } + .output-container span { + display: block; + text-align: center; + font-weight: 400; + color: #e5e5e5; + } + .submit { + font-size: 1em; + margin-top: 0.8em; + background-color: #001f7b; + border: none; + outline: none; + color: #ffffff; + padding: 0.6em 1.2em; + border-radius: 0.3em; + cursor: pointer; + } + .list { + background-color: #ffffff; + padding: 1.8em 1.2em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + border-radius: 0.6em; + } + .sublist-content { + width: 100%; + border-left: 0.3em solid #001f7b; + margin-bottom: 0.6em; + padding: 0.5em 1em; + display: grid; + grid-template-columns: 3fr 2fr 1fr 1fr; + } + .product { + font-weight: 500; + color: #363d55; + } + .amount { + color: #414a67; + margin-left: 20%; + } + .icons-container { + width: 5em; + margin: 1.2em; + align-items: center; + } + .product-title { + margin-bottom: 1em; + } + .hide { + display: none; + } + .error { + color: #ff465a; + } + .edit { + margin-left: auto; + } + .edit, + .delete { + background: transparent; + cursor: pointer; + margin-right: 1.5em; + border: none; + color: #001f7b; + } + @media screen and (max-width: 600px) { + .wrapper { + font-size: 14px; + } + .sub-container { + grid-template-columns: 1fr; + gap: 1em; + } + } diff --git a/Budget App/style/wall.jpg b/Budget App/style/wall.jpg new file mode 100644 index 0000000..0dbf3d0 Binary files /dev/null and b/Budget App/style/wall.jpg differ