비전공자 개발일기

Budget App 본문

Javascript

Budget App

HiroDaegu 2023. 1. 18. 00:16
728x90
SMALL

<html lang="ko">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Budget App</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet" />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <!-- Script -->
    <script defer src="main.js"></script>
</head>

<body>
    <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 Amount" />
                    <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">
                        Values cannot be empty
                    </p>
                    <input type="text" class="product-title" id="product-title" placeholder="Enter Title of Product" />
                    <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>
        <!-- List -->
        <div class="list">
            <h3>Expense List</h3>
            <div class="list-container" id="list"></div>
        </div>
    </div>

</body>

</html>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body {
    background-color: #F7F9FD;
  }
  .wrapper {
    width: 90%;
    font-size: 16px;
    max-width: 43.75em;
    margin: 1em 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: 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: #587EF4;
  }
  .total-amount-container,
  .user-amount-container {
    background-color: #FFF;
    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: #587EF4;
    color: #FFF;
    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: #587EF4;
    border: none;
    outline: none;
    color: #FFF;
    padding: 0.6em 1.2em;
    border-radius: 0.3em;
    cursor: pointer;
  }
  .list {
    background-color: #FFF;
    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 #587EF4;
    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: #587EF4;
  }
  @media screen and (max-width: 600px) {
    .wrapper {
      font-size: 14px;
    }
    .sub-container {
      grid-template-columns: 1fr;
      gap: 1em;
    }
  }
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;
  });
};

//Function To 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 = `<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 = "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 = "";
});
728x90
LIST

'Javascript' 카테고리의 다른 글

Music Player Widget  (0) 2023.02.03
Nested Border Radius  (0) 2023.01.21
Box Shadow Generator  (0) 2023.01.16
Search Bar With Autocomplete  (0) 2023.01.04
Copy to Text  (0) 2023.01.01
'Javascript' Related Articles more