Budget Planner

:information_source: Project Overview Difficulty Level: Intermediate
Estimated Time: 1-2 hours
Skills Practiced: DOM Manipulation, Event Handling, Basic Calculations, Input Validation

Download your material

What you'll do: Open the project and familiarize yourself with the interface

• Open the StackBlitz template: Budget Planner
• Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

Project Overview

Let's create a budget planner! We'll be able to calculate how much money we can save and how much we can spend every week.

This is the flow of the budget planner:

• Income - Find out how much money you get every week.
• Savings - Decide how much money you want to save every week.
• Spendings - How much you can spend after saving.

:emoji:️ Project Roadmap

graph LR
    A[Phase 1: Setup] --> B[Phase 2: DOM Selection]
    B --> C[Phase 3: Create Logic]
    C --> D[Phase 4: Event Handling]
    D --> E[Phase 5: Display Results]
    E --> F[Phase 6: Testing]
    
    style A fill:#e1f5e1
    style B fill:#e1f5e1
    style C fill:#fff3cd
    style D fill:#fff3cd
    style E fill:#d1ecf1
    style F fill:#d1ecf1

We want to be able to calculate our spendings and show all the values in the cards:

Here is an example of RM50 for income and RM10 for savings. After calculation, we will get RM40 for spendings.

:bulb: Tip [Before You Begin] Take a moment to study the HTML structure in the template. Understanding how the elements are organized will make your JavaScript implementation much smoother!

Implementation Instructions

:emoji: Phase One: Setup and Exploration

Study the HTML and see if you can understand it before you start working on the code. Look for:

• Input fields and their IDs
• Button elements
• Display areas for results

:emoji: Phase 2: DOM Selection

Let's start by declaring the necessary variables and select using DOM:

• #income
• #savings
• #calculateBtn
• #showIncome
• #showSavings
• #showSpendings

Like this:

var income = document.querySelector("#income");

:warning: Common Mistake Make sure you're using JavaScript syntax, not Python! Notice the var keyword and the semicolon at the end.

:white_check_mark: Milestone Checkpoint 1

Before moving on, ensure you have:

• Selected all 6 DOM elements
• Stored them in appropriately named variables
• Verified no console errors appear

:emoji: Phase 3: Create the Calculation Logic

Create a function called spendings() and return the spendings value.

• Use the return keyword inside the function.
• Write the spendings formula after the return keyword.
• Study the above example screenshot to figure out the formula.

Use .value to get the value of the inputs:

income.value
savings.value

:bulb: Tip [Think About It] What's the mathematical formula for calculating spendings? If you have RM50 income and want to save RM10, how much can you spend?

:emoji: Phase 4: Event Handling

Add a click event listener to the calculate button.

When user clicks on the calculate button, it will set the proper money values using .textContent for

• showIncome
• showSavings
• showSpendings

:emoji: Phase 5: Display Results

Like this:

showIncome.textContent = income.value;

You can call the spendings() function to get the value for spendings.

• Make sure to have the "RM" before the value.
• Use the .toFixed() method to set the value to 2 decimal places.
• For example, RM25 becomes RM25.00

:warning: Type Conversion Alert .value is a string. Use the + symbol to convert to number: (+income.value)

.toFixed() method only works with numbers.

:bulb: Tip [Best Practice] Always format currency values consistently. Using .toFixed(2) ensures your money values always show two decimal places, making your app look professional!

:white_check_mark: Milestone Checkpoint 2

Before testing, ensure you have:

• Created the spendings() function with the correct formula
• Added the click event listener to the calculate button
• Implemented proper type conversion for calculations
• Added "RM" prefix and .toFixed(2) formatting

:emoji: Phase 6: Testing Your Application

If you have done it correctly, it should look something like this:

:mag: Debugging Tips

If your budget planner isn't working correctly, check these common issues:

1. Nothing happens when clicking the button?

   • Check if your event listener is properly attached
   • Verify the button selector is correct (#calculateBtn)
   • Look for console errors

2. Calculations show NaN?

   • Ensure you're converting string values to numbers
   • Check if input fields are empty before calculating
   • Verify your formula syntax

3. Display shows wrong format?

   • Remember to add "RM" before the number
   • Check if .toFixed(2) is applied correctly
   • Ensure you're using .textContent, not .innerHTML

:bulb: Tip[Pro Debugging Tip] Use console.log() to check your values at each step. For example:

console.log("Income value:", income.value);
console.log("Savings value:", savings.value);
console.log("Calculated spendings:", spendings());

:rocket: Extension Challenges

Great job completing the basic budget planner! Ready to level up? Try these challenges:

Challenge One: Input Validation (⭐)

Add validation so that it will not show the spendings if the input savings is higher than income. Display "ERROR" instead of the RM value.

Challenge 2: Extended Calculations (⭐⭐)

Add more description to the Savings card to show:

• How much you can save in a month (weekly x 4)
• How much you can save in 3 months
• How much you can save in a year

Challenge 3: Spending List (⭐⭐⭐)

Create another HTML section below the cards to show a list of things you will spend with the Spending Money. Include:

• Input field for item name
• Input field for item cost
• Add button to add items
• Running total that doesn't exceed your spendings

Challenge 4: Visual Enhancements (⭐)

• Add a footer with your name and date
• Add CSS animations when calculations are displayed
• Change card colors based on spending levels (green for good savings, red for low savings)

Challenge 5: Advanced Features (⭐⭐⭐⭐)

• Save budget data to localStorage
• Add a "Reset" button to clear all values
• Create a savings goal tracker with progress bar
• Add currency converter for different countries

:bulb: Tip[Encouragement] Remember, the Extension Challenges are optional but highly recommended! Each challenge helps you practice different skills:

• Validation teaches error handling
• Extended calculations reinforce math operations
• Visual enhancements improve your CSS skills
• Advanced features introduce real-world programming concepts

Start with Challenge 1 and work your way up. You've got this! :muscle:

Project Submission

Final Checklist

Before submitting, ensure your budget planner:

• Accepts income and savings input
• Calculates spendings correctly (income - savings)
• Displays all values with "RM" prefix
• Shows values with 2 decimal places
• Works when the calculate button is clicked
• Has no console errors

When you have completed your "Budget Planner" project, submit it using the link below:

Submit Your Project Here

Make sure to test your webpage before submitting to ensure all required elements are working properly!

:warning: Submission Reminder Test your budget planner with different values before submitting:

• Try normal values (income: 100, savings: 20)
• Try edge cases (income: 0, savings: 0)
• Try decimal values (income: 55.50, savings: 10.25)