Complete Budget Tracker Frontend Source Code

Managing your finances can be a daunting task, but with the right tools, you can stay on top of your expenses and achieve your financial goals. In this article, we’ll share a valuable resource to help you get started: a budget tracker frontend template source code.

Why Use a Budget Tracker?

Keeping track of your income and expenses is essential for maintaining financial stability. A budget tracker helps you:

• Monitor your spending habits
• Identify areas for cost reduction
• Set financial goals and work towards achieving them
• Make informed decisions about your money

Features of Our Budget Tracker Frontend Template

Our budget tracker frontend template source code is designed to provide a solid foundation for building a comprehensive budgeting application. The template includes the following features:

• User-friendly interface for tracking income and expenses
• Categorization of expenses for easy analysis
• Budgeting goals and alerts for staying on track
• Data visualization for a clear picture of your finances

What’s Included in the Source Code?

Our budget tracker frontend template source code includes:

• HTML, CSS, and JavaScript files for a fully functional frontend
• A responsive design for seamless user experience across devices
• A modular structure for easy customization and extension

How to Use the Budget Tracker Frontend Template Source Code

To get started with our budget tracker frontend template source code, follow these steps:

1. Download the source code from our repository.
2. Review the documentation for a comprehensive understanding of the template’s features and functionality.
3. Customize the template to suit your specific needs and branding.
4. Integrate the template with your backend technology stack.

Benefits of Using Our Budget Tracker Frontend Template

By using our budget tracker frontend template source code, you’ll enjoy the following benefits:

• Fast and easy development: Our template provides a solid foundation for building a budgeting application, saving you time and effort.
• Customizability: The template’s modular structure makes it easy to customize and extend to meet your specific needs.
• Cost-effective: Our template is free to use, reducing your development costs.

Download the Budget Tracker Frontend Template Source Code

Ready to get started? Download the budget tracker frontend template source code from our repository today!

<div class="headerBar">
    <header>
      <h1 class="title">My Budget Tracker</h1>
      <h2 class="topbar">Your Current Balance</h2>
      <p>
        <span class="currency">$</span>
        <span class="balance"></span>
      </p>
      <header>
  </div>
  <div class="content">
    <h3 class="secondTitle">Add a new transaction: </h3>
    <div class="form">
      <form id="expForm">
        <div class="formLine left">
          <span for="type">Type:</span>
          <select id="type">
            <option value="chooseOne">Choose one...</option>
            <option value="income">Income</option>
            <option value="expense">Expense</option>
          </select>
        </div>
        <div class="formLine right">
          <span for="name">Name:</span>
          <input type="text" id="name">
        </div>

        <div class="formLine right">
          <span for="amount">Amount:</span>
          <input type="text" id="amount">
        </div>
        <button type="submit" class="buttonSave">Add to transactions</button>
      </form>
    </div>
  </div>

<div class="content">
  <table class="table">
    <thead>
      <tr>
        <th>Type</th>
        <th>Name</th>
        <th>Amount</th>
        <th>Options</th>
      </tr>
    </thead>
    <tbody id="transactionTable"></tbody>
  </table>
</div>

* {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 1000px;
  display: flex;
  flex-direction: column;
  background-color: rgb(106, 166, 245);
  color: black;
}

.headerBar {
  background-color: blue;
  color: bisque;
  text-align: center;
  padding: 20px;
}

.title {
  margin-bottom: 20px;
  color: white;
}

.topbar {
  margin-bottom: 10px;
}

.currency {
  font-size: 30px;
  font-weight: 300;
}

.balance {
  font-size: 30px;
  font-weight: 300;
}

.content {
  width: 580px;
  margin: 0 auto;
  padding: 3%;
  padding-left: 6%;
}

.secondTitle {
  background-color: blue;
  color: white;
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  font-size: 25px;
}

.form {
  padding: 5px;
  padding-top: 20px;
  padding-left: 10%;
  justify-content: center;
  background-color: bisque;
}

.formLine {
  display: inline-flex;
  padding: 5px 0px;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-right: 100px;
}

input,
select {
  width: 130px;
  margin-left: 10px;
}

/* table style */
table {
  width: 100%;
}

thead {
  background-color: blue;
  color: white;
  line-height: 30px;
}

tbody {
  background-color: bisque;
  line-height: 30px;
  text-align: center;
}

/* Button */

button {
  width: 200px;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 1.1em;
  line-height: 20px;
  background-color: blue;
  border-radius: 5px;
  margin: 14px 25%;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 0 0 2px grey;
  transition: 0.5s;
}

a {
  text-decoration: underline;
  cursor: pointer;
}

document.getElementById('expForm').addEventListener('submit', addTransaction);// initial array of transactions, reading from localStorageconst transactions = JSON.parse(localStorage.getItem('transactions')) || [];

function addTransaction(e) {
  e.preventDefault();

  // get type, name, and amount
  let type = document.getElementById('type').value;
  let name = document.getElementById('name').value;
  let amount = document.getElementById('amount').value;

  if (type != 'chooseOne'
    && name.length > 0
    && amount > 0) {
    const transaction = {
      type,
      name,
      amount,
      id: transactions.length > 0 ? transactions[transactions.length - 1].id + 1 : 1,
    }

    transactions.push(transaction);
    // localStorage 
    localStorage.setItem('transactions', JSON.stringify(transactions));
  }

  document.getElementById('expForm').reset();
  showTransactions();
  updateBalance();
}

const showTransactions = () => {

  const transactionTable = document.getElementById('transactionTable');

  transactionTable.innerHTML = '';

  for (let i = 0; i < transactions.length; i++) {
    transactionTable.innerHTML += `
          <tr>
              <td>${transactions[i].type}</td>
              <td>${transactions[i].name}</td>
              <td>$${transactions[i].amount}</td>
              <td><a class="deleteButton" onclick="deleteTransaction(${transactions[i].id})">
                  Delete</td>
          </tr>
      `;
  }
}

const deleteTransaction = (id) => {
  for (let i = 0; i < transactions.length; i++) {
    if (transactions[i].id == id) {
      transactions.splice(i, 1);
    }
  }

  // localStorage
  localStorage.setItem('transactions', JSON.stringify(transactions));
  showTransactions();
  updateBalance();
}