Budget App Using HTML CSS and JavaScript

Today I’m going to share with you how to create a Budget App using HTML CSS and JavaScript, I’ve been sharing different types of projects using HTML CSS and JavaScript, but this one is a useful and logic-based project. So, I’m going to teach how to use JS to add logic to display the features inside the applications.

Managing your finances is an essential aspect of responsible living. In today’s fast-paced world, budgeting can be a challenging task without the right tools. Fortunately, you don’t need to be a financial expert to create a budget app that suits your needs. With HTML, CSS, and JavaScript, you can build a simple yet effective budget app to keep your finances in check.

In this article, we will guide you through the process of creating a budget app using these web development technologies, without delving into the actual code. By the end of this article, you will have a clear understanding of the key components and functionalities required to build your very own budgeting application.

Budget App Using HTML CSS and JavaScript

I’m trying to share with you things that you need to improve your skills, So, I’ve made the tutorial on how to create a Budget App using HTML CSS, and JavaScript. I highly recommend you please watch the complete video, inside the video you can learn step-by-step usage of these technologies to create a project.

I hope you’ve watched the complete video and you’ve learned something new from the tutorial. Let’s look at the codes used inside the project.

You May Also Like:

• Create a Tic Tac Toe Game Using HTML CSS and JavaScript
• Create a Stopwatch Using HTML CSS and JavaScript
• How to Make a Random Color Generator in JavaScript
• Dynamic Calendar Using HTML CSS and JavaScript
• Multi Step Progress Bar in HTML CSS & JavaScript

Creating the Layout

The first step in building a budget app is to design the user interface. Use HTML to structure the layout, defining elements like income, expenses, and a balanced display. Make sure to use a clean and user-friendly design to enhance the user experience.

<div class="container">
      <h2>Budget App</h2>
      <div class="error_message">
        <p>Please Enter Budget Amount | More Than 0</p>
      </div>
      <div class="budget_content">
        <div class="ur_budget">
          <form>
            <label for="budget">Your Budget : </label>
            <input
              type="number"
              placeholder="Enter Your Budget"
              class="budget_input"
            />
            <button class="btn" id="btn_budget">Calculate</button>
          </form>
        </div>
        <div class="ur_expenses">
          <form>
            <label for="expenses">Expenses Details : </label>
            <input
              type="text"
              placeholder="Enter Your Expenses Desc!"
              class="expensess_input"
            />
            <input
              type="number"
              placeholder="Enter Your Expenses Amount"
              class="expensess_amount"
            />
            <button class="btn" id="btn_expenses">Add Expenses</button>
          </form>
        </div>
      </div>

      <!--==========Cards Start============= -->
      <ul class="cards">
        <li>
          <i class="bx bx-money"></i>
          <span class="info">
            <h3><span>$</span><span class="budget_card">7,373</span></h3>
            <p>Budget</p>
          </span>
        </li>
        <li>
          <i class="bx bx-credit-card"></i>
          <span class="info">
            <h3><span>$</span><span class="expenses_card">9,373</span></h3>
            <p>Expenses</p>
          </span>
        </li>
        <li>
          <i class="bx bx-dollar"></i>
          <span class="info">
            <h3><span>$</span><span class="balance_card">3,373</span></h3>
            <p>Balance</p>
          </span>
        </li>
      </ul>
      <!--==========Cards Close============= -->

      <!--===============Table Content Start=============== -->
      <div class="tbl_content">
        <h3>Budget Details</h3>
        <div class="tbl_data">
          <!-- <ul class="tbl_tr_content">
            <li>1</li>
            <li>Gaming Mouse</li>
            <li><span>$</span>600</li>
            <li>
              <button type="button" class="btn_edit">Edit</button>
              <button type="button" class="btn_delete">Delete</button>
            </li>
          </ul> -->
        </div>
      </div>
      <!--===============Table Content Close=============== -->
    </div>

Styling with CSS

Use CSS to style your budget app. This will involve choosing colors, fonts, and layout arrangements to make the app visually appealing and easy to navigate. Good design not only makes your app more attractive but also more intuitive to use.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --light: #f6f6f9;
  --primary: #1976d2;
  --light-primary: #cfe8ff;
  --grey: #fff;
  --dark-grey: #aaaaaa;
  --dark: #363949;
  --danger: #d32f2f;
  --light-danger: #fecdd3;
  --warning: #fbc02d;
  --light-warning: #fff2c6;
  --success: #388e3c;
  --light-success: #bbf7d0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: var(--light);
  font-family: "poppins", sans-serif;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  background-color: var(--grey);
  border-radius: 5px;
  box-shadow: 5px 5px 10px #000;
  overflow-x: hidden;
}

.container h2 {
  padding: 2rem 0;
  font-size: 4rem;
  text-align: center;
  color: var(--dark);
}

.error_message {
  background-color: var(--danger);
  color: var(--light);
  text-align: center;
  padding: 1rem 0;
  width: 650px;
  margin: 0 auto;
  border-radius: 5px;
  display: none;
}

.error_message.error {
  display: block;
  transition: all 0.8s ease-in;
}

.budget_content {
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.ur_budget form input,
.ur_expenses form input {
  padding: 0.4rem 1rem;
  width: 300px;
  border: 1px solid #ddd;
  font-family: inherit;
  font-size: 1rem;
  margin-left: 0.5rem;
  border-radius: 3px;
}

.ur_budget form input:focus,
.ur_expenses form input:focus {
  outline: none;
}

.ur_budget form,
.ur_expenses form {
  position: relative;
}

.budget_content .btn {
  position: absolute;
  right: 0;
  outline: none;
  border: none;
  font-family: inherit;
  padding: 0.6rem 1rem;
  color: var(--light);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  background-color: var(--dark);
}

.budget_content .btn:active {
  transform: scale(0.98);
}

/*================Cards Start================= */
.container .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1.5rem;
  padding: 2rem;
}

.container .cards li {
  padding: 1.8rem;
  background-color: var(--light);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.container .cards li:hover {
  transform: translateY(-10px);
}

.container .cards li .bx {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 10px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .cards li:nth-child(1) .bx {
  background-color: var(--light-primary);
  color: var(--primary);
}

.container .cards li:nth-child(2) .bx {
  background-color: var(--light-warning);
  color: var(--warning);
}

.container .cards li:nth-child(3) .bx {
  background-color: var(--light-success);
  color: var(--success);
}

.container .cards li .info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark);
}

.container .cards li .info p {
  color: var(--dark);
}
/*================Cards Close================= */

/*==================Start Table Content============= */
.tbl_content {
  padding: 2rem;
  background-color: var(--light);
  margin: 1rem 2rem;
  border-radius: 5px;
}

.tbl_content h3 {
  font-size: 2rem;
  margin: 1rem 0;
}

.tbl_tr_content {
  display: grid;
  list-style-type: none;
  grid-template-columns: 1fr 50% 30% 2fr;
  align-items: center;
  background-color: var(--dark);
  color: var(--light);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin: 0.5rem 0;
  cursor: pointer;
}

.tbl_data {
  overflow-y: auto;
  height: 200px;
}

.tbl_tr_content button {
  outline: none;
  border: none;
  color: var(--light);
  padding: 0.4rem;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--danger);
}

.tbl_tr_content button:active {
  transform: scale(0.98);
}

.tbl_tr_content button:first-child {
  background-color: var(--success);
}
/*==================Start Table Close============= */

Implementing Functionality

Managing Income

Incorporate JavaScript to handle the income section of your budget app. Create an input field for users to enter their income sources, and then use JavaScript to calculate the total income. Ensure that the input is validated to accept only valid numbers.

"use strict";

const errorMesgEl = document.querySelector(".error_message");
const budgetInputEl = document.querySelector(".budget_input");
const expenseDesEl = document.querySelector(".expensess_input");
const expenseAmountEl = document.querySelector(".expensess_amount");
const tblRecordEl = document.querySelector(".tbl_data");
const cardsContainer = document.querySelector(".cards");

// cards content
const budgetCardEl = document.querySelector(".budget_card");
const expensesCardEl = document.querySelector(".expenses_card");
const balanceCardEl = document.querySelector(".balance_card");

let itemList = [];
let itemId = 0;

//===============Button Events==============
function btnEvents() {
  const btnBudgetCal = document.querySelector("#btn_budget");
  const btnExpensesCal = document.querySelector("#btn_expenses");

  //========Budget Event===============
  btnBudgetCal.addEventListener("click", (e) => {
    e.preventDefault();
    budgetFun();
  });

  //========Budget Event===============
  btnExpensesCal.addEventListener("click", (e) => {
    e.preventDefault();
    expensesFun();
  });
}

//==================Calling Btns Event==========
document.addEventListener("DOMContentLoaded", btnEvents);

//================= Expenses Function============
function expensesFun() {
  let expensesDescValue = expenseDesEl.value;
  let expenseAmountValue = expenseAmountEl.value;

  if (
    expensesDescValue == "" ||
    expenseAmountValue == "" ||
    budgetInputEl < 0
  ) {
    errorMessage("Please Enter Expenses Desc or Expnese Amount!");
  } else {
    let amount = parseInt(expenseAmountValue);

    expenseAmountEl.value = "";
    expenseDesEl.value = "";

    // store the value inside the object
    let expenses = {
      id: itemId,
      title: expensesDescValue,
      amount: amount,
    };
    itemId++;
    itemList.push(expenses);

    // add expenses inside the HTML Page
    addExpenses(expenses);
    showBalance();
  }
}

//========================Add Expenses==================
function addExpenses(expensesPara) {
  const html = `<ul class="tbl_tr_content">
            <li data-id=${expensesPara.id}>${expensesPara.id + 1}</li>
            <li>${expensesPara.title}</li>
            <li><span>$</span>${expensesPara.amount}</li>
            <li>
              <button type="button" class="btn_edit">Edit</button>
              <button type="button" class="btn_delete">Delete</button>
            </li>
          </ul>`;

  tblRecordEl.insertAdjacentHTML("beforeend", html);

  //=================== Edit=======================
  const btnEdit = document.querySelectorAll(".btn_edit");
  const btnDel = document.querySelectorAll(".btn_delete");
  const content_id = document.querySelectorAll(".tbl_tr_content");

  // btn edit event
  btnEdit.forEach((btnedit) => {
    btnedit.addEventListener("click", (el) => {
      let id;

      content_id.forEach((ids) => {
        id = ids.firstElementChild.dataset.id;
      });

      let element = el.target.parentElement.parentElement;
      element.remove();

      let expenses = itemList.filter(function (item) {
        return item.id == id;
      });

      expenseDesEl.value = expenses[0].title;
      expenseAmountEl.value = expenses[0].amount;

      let temp_list = itemList.filter(function (item) {
        return item.id != id;
      });

      itemList = temp_list;
    });
  });

  //============ btn delete
  btnDel.forEach((btndel) => {
    btndel.addEventListener("click", (el) => {
      let id;

      content_id.forEach((ids) => {
        id = ids.firstElementChild.dataset.id;
      });

      let element = el.target.parentElement.parentElement;
      element.remove();

      let temp_list = itemList.filter(function (item) {
        return item.id != id;
      });

      itemList = temp_list;
      showBalance();
    });
  });
}

//===============Budget Function=================
function budgetFun() {
  const budgetValue = budgetInputEl.value;

  if (budgetValue == "" || budgetValue < 0) {
    errorMessage("Please Enter Your Budget or More Than 0");
  } else {
    budgetCardEl.textContent = budgetValue;
    budgetInputEl.value = "";
    showBalance();
  }
}

//================Show Balance===================
function showBalance() {
  const expenses = totalExpenses();
  const total = parseInt(budgetCardEl.textContent) - expenses;
  balanceCardEl.textContent = total;
}

//==================total Expenses=============
function totalExpenses() {
  let total = 0;

  if (itemList.length > 0) {
    total = itemList.reduce(function (acc, curr) {
      acc += curr.amount;
      return acc;
    }, 0);
  }

  expensesCardEl.textContent = total;
  return total;
}

//====================Error Message Function================
function errorMessage(message) {
  errorMesgEl.innerHTML = `<p>${message}</p>`;
  errorMesgEl.classList.add("error");
  setTimeout(() => {
    errorMesgEl.classList.remove("error");
  }, 2500);
}

Tracking Expenses

Design an expense input section where users can add their expenditures. Utilize JavaScript to compute the total expenses and give users an overview of where their money is going. You can also categorize expenses to gain more insight into spending patterns.

Calculating the Balance

Calculate the balance by subtracting the total expenses from the total income. This gives users a real-time view of their financial situation. JavaScript will help you to update this balance dynamically as users input their data.

Providing Feedback

To enhance user interaction, consider providing feedback through notifications or alerts. This can include messages to inform users when their balance is running low or when they have exceeded their budget in a particular category.

Storing User Data

To make your budget app more practical, you can use JavaScript to store user data in local storage. This ensures that users can revisit your app and access their previous financial information without re-entering everything from scratch.

Testing Your App

Before releasing your budget app to the public, thoroughly test it for usability, functionality, and responsiveness. Ensure it works well on various devices and browsers. This step is crucial to provide a seamless experience for all users.

Conclusion

Creating a budget app using HTML, CSS, and JavaScript is an excellent way to enhance your financial management skills and gain some practical experience in web development. While we haven’t provided actual code in this article, the concepts and steps outlined here should give you a solid foundation to start building your budget app. Once you’ve mastered these fundamentals, you can explore more advanced features such as data visualization, integration with external APIs, and cloud-based data storage.

Incorporate your creativity and personal preferences into the design, and don’t hesitate to add features that cater to your specific needs. Building your budget app is not only a practical exercise but also a way to improve your financial awareness and ensure a more secure financial future. So, get started today and take control of your finances!