Personal Finance Calculator JavaScript

👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Personal Finance Calculator</title>
<style>
body {
    font-family: sans-serif;
    margin: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

#results {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.error {
    color: red;
}
</style>
</head>
<body>

<div class="container">
    <h1>Personal Finance Calculator</h1>

    <h2>Savings Goal Calculator</h2>
    <label for="savingsGoal">Savings Goal:</label>
    <input type="number" id="savingsGoal" placeholder="Enter your savings goal">

    <label for="currentSavings">Current Savings:</label>
    <input type="number" id="currentSavings" placeholder="Enter your current savings">

    <label for="monthlyContribution">Monthly Contribution:</label>
    <input type="number" id="monthlyContribution" placeholder="Enter your monthly contribution">

    <label for="interestRate">Annual Interest Rate (%):</label>
    <input type="number" id="interestRate" placeholder="Enter annual interest rate">

    <button onclick="calculateSavingsGoal()">Calculate Savings Time</button>

    <h2>Loan Calculator</h2>
    <label for="loanAmount">Loan Amount:</label>
    <input type="number" id="loanAmount" placeholder="Enter loan amount">

    <label for="loanInterestRate">Annual Interest Rate (%):</label>
    <input type="number" id="loanInterestRate" placeholder="Enter annual interest rate">

    <label for="loanTerm">Loan Term (Years):</label>
    <input type="number" id="loanTerm" placeholder="Enter loan term in years">

    <button onclick="calculateLoanPayment()">Calculate Loan Payment</button>


    <h2>Budget Calculator</h2>
    <label for="income">Monthly Income:</label>
    <input type="number" id="income" placeholder="Enter monthly income">

     <label for="expenses">Monthly Expenses:</label>
    <input type="number" id="expenses" placeholder="Enter monthly expenses">

    <button onclick="calculateBudget()">Calculate Budget</button>


    <div id="results">
        <h3>Results:</h3>
        <p id="savingsResult"></p>
        <p id="loanResult"></p>
        <p id="budgetResult"></p>
        <p id="errorMsg" class="error"></p>
    </div>
</div>

<script>

function calculateSavingsGoal() {
    const savingsGoal = parseFloat(document.getElementById("savingsGoal").value);
    const currentSavings = parseFloat(document.getElementById("currentSavings").value);
    const monthlyContribution = parseFloat(document.getElementById("monthlyContribution").value);
    const interestRate = parseFloat(document.getElementById("interestRate").value) / 100 / 12; // Monthly rate

    const errorMsg = document.getElementById("errorMsg");
    errorMsg.textContent = "";  // Clear previous error messages

    if (isNaN(savingsGoal) || isNaN(currentSavings) || isNaN(monthlyContribution) || isNaN(interestRate * 100 * 12)) {
        errorMsg.textContent = "Please enter valid numbers for all savings fields.";
        document.getElementById("savingsResult").textContent = ""; // Clear previous result
        return;
    }

    if (savingsGoal <= 0 || currentSavings < 0 || monthlyContribution < 0 || interestRate < 0) {
        errorMsg.textContent = "Savings goal, current savings, monthly contribution, and interest rate must be non-negative.";
        document.getElementById("savingsResult").textContent = "";
        return;
    }


    let months = 0;
    let balance = currentSavings;

    if (interestRate === 0) {
      if (monthlyContribution === 0){
        if(savingsGoal <= currentSavings){
          months = 0;
        }else{
            months = Infinity; // Impossible to reach the goal
        }
      } else{
        months = Math.ceil((savingsGoal - currentSavings) / monthlyContribution);

        if (months < 0){
          months = 0;
        }

      }

    } else {

        while (balance < savingsGoal && months < 3600) { // Limit to 300 years
            balance += monthlyContribution;
            balance *= (1 + interestRate);
            months++;
        }
    }


    if (months === Infinity){
        document.getElementById("savingsResult").textContent = "Savings goal is unreachable with the given contributions and interest rate.";
    } else if (balance >= savingsGoal) {
        document.getElementById("savingsResult").textContent = `You will reach your savings goal in approximately ${months} months.`;
    } else {
        document.getElementById("savingsResult").textContent = "Savings goal may not be reachable with current settings."; //Or after 300 years.
    }


}

function calculateLoanPayment() {
    const loanAmount = parseFloat(document.getElementById("loanAmount").value);
    const loanInterestRate = parseFloat(document.getElementById("loanInterestRate").value) / 100 / 12; // Monthly rate
    const loanTerm = parseFloat(document.getElementById("loanTerm").value);
    const numPayments = loanTerm * 12;

    const errorMsg = document.getElementById("errorMsg");
    errorMsg.textContent = ""; // Clear previous error messages

    if (isNaN(loanAmount) || isNaN(loanInterestRate * 100 * 12) || isNaN(loanTerm)) {
        errorMsg.textContent = "Please enter valid numbers for all loan fields.";
        document.getElementById("loanResult").textContent = ""; // Clear previous result
        return;
    }

    if (loanAmount <= 0 || loanInterestRate < 0 || loanTerm <= 0) {
        errorMsg.textContent = "Loan amount, interest rate, and loan term must be positive values.";
        document.getElementById("loanResult").textContent = "";
        return;
    }

    let monthlyPayment = 0;

    if (loanInterestRate === 0) {
        monthlyPayment = loanAmount / numPayments;
    } else {
        monthlyPayment = (loanAmount * loanInterestRate) / (1 - Math.pow(1 + loanInterestRate, -numPayments));
    }


    if (isNaN(monthlyPayment) || !isFinite(monthlyPayment)) {
        document.getElementById("loanResult").textContent = "Invalid input values.";
    } else {
        document.getElementById("loanResult").textContent = `Your monthly payment will be: $${monthlyPayment.toFixed(2)}`;
    }

}

function calculateBudget() {
        const income = parseFloat(document.getElementById("income").value);
        const expenses = parseFloat(document.getElementById("expenses").value);

        const errorMsg = document.getElementById("errorMsg");
        errorMsg.textContent = ""; // Clear any previous error messages

        if (isNaN(income) || isNaN(expenses)) {
            errorMsg.textContent = "Please enter valid numbers for income and expenses.";
            document.getElementById("budgetResult").textContent = ""; //Clear previous result
            return;
        }

        if (income < 0 || expenses < 0) {
            errorMsg.textContent = "Income and expenses must be non-negative.";
            document.getElementById("budgetResult").textContent = "";
            return;
        }

        const netIncome = income - expenses;

        if (netIncome >= 0) {
            document.getElementById("budgetResult").textContent = `You have a surplus of $${netIncome.toFixed(2)} per month.`;
        } else {
            document.getElementById("budgetResult").textContent = `You have a deficit of $${Math.abs(netIncome).toFixed(2)} per month.`;
        }
    }
</script>

</body>
</html>
```
👁️ Viewed: 17
Personal Finance Calculator JavaScript

Comments

Site Statistics
