Budget Buddy

Table of Contents

1. Introduction
2. Features
3. Getting Started
4. User Guide
5. Installation
6. Code Overview
7. Technologies used
8. Screenshots
9. Get In Touch

Introduction

Welcome to Budget Buddy App, a personal finance management tool designed to help you monitor and control your expenses. Users can add, edit, and delete expenses, and the application calculates the total income, total expenses, and the remaining balance, It also throw a negative balance when you spend beyond your income. All data is stored in the browser's local storage, ensuring that the information persists across sessions.

The Budget Tracker is a simple web application that helps users manage their expenses and income.

Features

• User friendly interface for easy data entry
• Add new expenses with description, amount, and date.
• Track total income and expenses
• Delete expenses.
• Edit existing expenses.
• Update existing expenses.
• Calculate and display total expenses and balance.
• Responsive design using Tailwind CSS.

Getting Started

To get started, simply click on the link BudgetBuddy

User Guide

• Tap the budget input field to add a the income you want to budget
• Write the description of your expense in the description input field
• Enter amount spent in the amount field
• Enter the date and click on
• Add Expense
• The history will display in the expense history, then you can edit or delete
• To edit click on edit
• Then click on update expense
• To delete click on delete
• A modal will popup to confirm if you want to delete or cancel

Installation

• Clone the repository:

git clone https://github.com/Ehmkayel/BudgetBuddy.git

• Navigate to the project directory:

cd BUDGETBUDDY

• Open the index.html file in your preferred browser.

Code Overview

• I started by installing Tailwind Css, then I configured by Tailwind Css, I made a sketch of how the website will look like on my notepad and sourced for colors on color hunt and icons from icons 8 which I converted to cloudinary

• Then I created the html structure and added necessary details in the head tag for seo

• I pushed my initial commit to github and deploy it on netlify

• Then I continued working;

• The HTML structure includes a form for adding budget, description, amount spent and date. It also includes three cards (Income, Expense and Balance) and a table for displaying the list of expenses and the edit and delete.

• Tailwind CSS is used for styling the application.

• The JavaScript code handles the main functionality of the application:

Adding Expenses: The addExpense function adds a new expense to the list and updates local storage. Deleting Expenses: The deleteExpense function removes the selected expense from the list and local storage. AmountSpent: The AmountSpent function add the amount to the table then update the expense

Technologies Used

• Semantic HTML
• CSS (Tailwind CSS)
• JavaScript
• Mobile-first workflow
• TailwindCSS custom properties

Screenshots

Get in Touch

You can reach out to me;

• Linkedin- Morufat-Lamidi
• Frontend Mentor - @Ehmkayel
• Twitter - @kamalehmk
• Gmail- Mail;