Posted inAPI Project

Net Worth Calculator: Easily Calculate Your Financial Worth Online

No CommentsPosted inAPI Project
  • “Net Worth Calculator with Easy Data Download Capability.

Net Worth Calculator – A Simple Way to Know Your Financial Health

How Does Our Net Worth Calculator Work?

Our tool is user-friendly and requires you to enter details such as:
✅ Assets (Cash, Investments, Real Estate, Vehicles)
✅ Liabilities (Loans, Credit Card Debt, Mortgages)

🚀 Calculate Your Net Worth Now

Once you input these values, the calculator instantly provides your net worth.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Net Worth Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      :root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --background-color: #f5f6fa;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--primary-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.currency-selector {
    text-align: right;
    margin-bottom: 2rem;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.category {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
}

h2 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.input-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.input-group input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.results-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.total-box {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.total-box h3 {
    margin-bottom: 0.5rem;
}

.total-box p {
    font-size: 1.5rem;
    font-weight: bold;
}

.net-worth {
    background: var(--success-color);
    color: white;
}

.net-worth.negative {
    background: var(--danger-color);
}

.chart-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 2rem;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    background: var(--secondary-color);
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

button:hover {
    background: #2980b9;
}

select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .calculator-grid {
        grid-template-columns: 1fr;
    }
    
    .results-section {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    button {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
    </style>
</head>
<body>
    <div class="container">
        <h1>Net Worth Calculator</h1>
        <div class="currency-selector">
            <label for="currency">Select Currency:</label>
            <select id="currency" onchange="updateCurrency()">
                <option value="USD">USD ($)</option>
                <option value="EUR">EUR (€)</option>
                <option value="GBP">GBP (£)</option>
                <option value="INR">INR (₹)</option>
            </select>
        </div>

        <div class="calculator-grid">
            <div class="assets-section">
                <h2>Assets</h2>
                <div class="category">
                    <h3>Cash and Bank Accounts</h3>
                    <div class="input-group">
                        <label for="cash">Cash in Hand:</label>
                        <input type="number" id="cash" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="savings">Savings Accounts:</label>
                        <input type="number" id="savings" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="checking">Checking Accounts:</label>
                        <input type="number" id="checking" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                </div>

                <div class="category">
                    <h3>Investments</h3>
                    <div class="input-group">
                        <label for="stocks">Stocks:</label>
                        <input type="number" id="stocks" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="bonds">Bonds:</label>
                        <input type="number" id="bonds" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="mutualFunds">Mutual Funds:</label>
                        <input type="number" id="mutualFunds" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="realEstate">Real Estate:</label>
                        <input type="number" id="realEstate" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                </div>

                <div class="category">
                    <h3>Retirement Accounts</h3>
                    <div class="input-group">
                        <label for="pension">Pension Funds:</label>
                        <input type="number" id="pension" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="401k">401(k) or Similar:</label>
                        <input type="number" id="401k" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                </div>

                <div class="category">
                    <h3>Other Assets</h3>
                    <div class="input-group">
                        <label for="jewelry">Jewelry:</label>
                        <input type="number" id="jewelry" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="cars">Cars:</label>
                        <input type="number" id="cars" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="collectibles">Valuable Collectibles:</label>
                        <input type="number" id="collectibles" class="asset-input" onchange="calculateNetWorth()">
                    </div>
                </div>
            </div>

            <div class="liabilities-section">
                <h2>Liabilities</h2>
                <div class="category">
                    <h3>Loans</h3>
                    <div class="input-group">
                        <label for="mortgage">Mortgage Loan Balance:</label>
                        <input type="number" id="mortgage" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="personalLoans">Personal Loans:</label>
                        <input type="number" id="personalLoans" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="studentLoans">Student Loans:</label>
                        <input type="number" id="studentLoans" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="carLoans">Car Loans:</label>
                        <input type="number" id="carLoans" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                </div>

                <div class="category">
                    <h3>Other Liabilities</h3>
                    <div class="input-group">
                        <label for="creditCard">Credit Card Debt:</label>
                        <input type="number" id="creditCard" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="bills">Outstanding Bills:</label>
                        <input type="number" id="bills" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                    <div class="input-group">
                        <label for="otherDebts">Other Debts:</label>
                        <input type="number" id="otherDebts" class="liability-input" onchange="calculateNetWorth()">
                    </div>
                </div>
            </div>
        </div>

        <div class="results-section">
            <div class="total-box">
                <h3>Total Assets</h3>
                <p id="totalAssets">0</p>
            </div>
            <div class="total-box">
                <h3>Total Liabilities</h3>
                <p id="totalLiabilities">0</p>
            </div>
            <div class="total-box net-worth">
                <h3>Net Worth</h3>
                <p id="netWorth">0</p>
            </div>
        </div>

        <div class="chart-section">
            <h3>Net Worth History</h3>
            <canvas id="netWorthChart"></canvas>
        </div>

        <div class="action-buttons">
            <button onclick="saveData()">Save Data</button>
            <button onclick="exportToPDF()">Export to PDF</button>
            <button onclick="exportToExcel()">Export to Excel</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="script.js"></script>
    <script>
      // Initialize Chart.js
let netWorthChart;
let netWorthHistory = [];

// Currency symbols mapping
const currencySymbols = {
    USD: '$',
    EUR: '€',
    GBP: '£',
    INR: '₹'
};

// Initialize the chart
function initializeChart() {
    const ctx = document.getElementById('netWorthChart').getContext('2d');
    netWorthChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Net Worth Over Time',
                data: [],
                borderColor: '#3498db',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// Calculate total assets
function calculateTotalAssets() {
    const assetInputs = document.querySelectorAll('.asset-input');
    return Array.from(assetInputs).reduce((total, input) => {
        return total + (parseFloat(input.value) || 0);
    }, 0);
}

// Calculate total liabilities
function calculateTotalLiabilities() {
    const liabilityInputs = document.querySelectorAll('.liability-input');
    return Array.from(liabilityInputs).reduce((total, input) => {
        return total + (parseFloat(input.value) || 0);
    }, 0);
}

// Update currency symbol
function updateCurrency() {
    const currencySelect = document.getElementById('currency');
    const selectedCurrency = currencySelect.value;
    const symbol = currencySymbols[selectedCurrency];
    calculateNetWorth(); // Recalculate with new currency symbol
}

// Format currency
function formatCurrency(amount) {
    const currencySelect = document.getElementById('currency');
    const symbol = currencySymbols[currencySelect.value];
    return `${symbol}${amount.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    })}`;
}

// Calculate and update net worth
function calculateNetWorth() {
    const totalAssets = calculateTotalAssets();
    const totalLiabilities = calculateTotalLiabilities();
    const netWorth = totalAssets - totalLiabilities;

    // Update display
    document.getElementById('totalAssets').textContent = formatCurrency(totalAssets);
    document.getElementById('totalLiabilities').textContent = formatCurrency(totalLiabilities);
    document.getElementById('netWorth').textContent = formatCurrency(netWorth);

    // Update net worth box color
    const netWorthBox = document.querySelector('.net-worth');
    if (netWorth >= 0) {
        netWorthBox.classList.remove('negative');
    } else {
        netWorthBox.classList.add('negative');
    }

    // Update chart
    updateChart(netWorth);
}

// Update chart with new net worth value
function updateChart(netWorth) {
    const currentDate = new Date().toLocaleDateString();
    
    netWorthHistory.push({
        date: currentDate,
        value: netWorth
    });

    // Keep only last 12 entries
    if (netWorthHistory.length > 12) {
        netWorthHistory.shift();
    }

    netWorthChart.data.labels = netWorthHistory.map(entry => entry.date);
    netWorthChart.data.datasets[0].data = netWorthHistory.map(entry => entry.value);
    netWorthChart.update();
}

// Save data to localStorage
function saveData() {
    const data = {
        assets: {},
        liabilities: {},
        netWorthHistory: netWorthHistory
    };

    // Save assets
    document.querySelectorAll('.asset-input').forEach(input => {
        data.assets[input.id] = input.value;
    });

    // Save liabilities
    document.querySelectorAll('.liability-input').forEach(input => {
        data.liabilities[input.id] = input.value;
    });

    localStorage.setItem('netWorthData', JSON.stringify(data));
    alert('Data saved successfully!');
}

// Export to PDF
function exportToPDF() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    
    doc.setFontSize(20);
    doc.text('Net Worth Report', 20, 20);
    
    doc.setFontSize(12);
    doc.text(`Total Assets: ${document.getElementById('totalAssets').textContent}`, 20, 40);
    doc.text(`Total Liabilities: ${document.getElementById('totalLiabilities').textContent}`, 20, 50);
    doc.text(`Net Worth: ${document.getElementById('netWorth').textContent}`, 20, 60);
    
    doc.save('net-worth-report.pdf');
}

// Export to Excel
function exportToExcel() {
    const data = [
        ['Net Worth Calculator Report'],
        [''],
        ['Assets'],
        ...Array.from(document.querySelectorAll('.asset-input')).map(input => [
            input.previousElementSibling.textContent.replace(':', ''),
            input.value || '0'
        ]),
        [''],
        ['Liabilities'],
        ...Array.from(document.querySelectorAll('.liability-input')).map(input => [
            input.previousElementSibling.textContent.replace(':', ''),
            input.value || '0'
        ]),
        [''],
        ['Summary'],
        ['Total Assets', document.getElementById('totalAssets').textContent],
        ['Total Liabilities', document.getElementById('totalLiabilities').textContent],
        ['Net Worth', document.getElementById('netWorth').textContent]
    ];

    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Net Worth Report');
    XLSX.writeFile(wb, 'net-worth-report.xlsx');
}

// Load saved data
function loadSavedData() {
    const savedData = localStorage.getItem('netWorthData');
    if (savedData) {
        const data = JSON.parse(savedData);

        // Load assets
        Object.entries(data.assets).forEach(([id, value]) => {
            const input = document.getElementById(id);
            if (input) input.value = value;
        });

        // Load liabilities
        Object.entries(data.liabilities).forEach(([id, value]) => {
            const input = document.getElementById(id);
            if (input) input.value = value;
        });

        // Load history
        netWorthHistory = data.netWorthHistory || [];
        calculateNetWorth();
    }
}

// Initialize when document is loaded
document.addEventListener('DOMContentLoaded', () => {
    initializeChart();
    loadSavedData();
    calculateNetWorth();
});
    </script>
</body>
</html>

Why Use Our Online Net Worth Calculator?

✔️ Fast & Accurate – Get instant results.
✔️ User-Friendly – Simple interface for easy calculations.
✔️ Free to Use – No hidden charges.
✔️ Mobile-Friendly – Access from any device.

How to Improve Your Net Worth?

  • Reduce unnecessary expenses.
  • Increase savings and investments.
  • Pay off high-interest debts.
  • Invest in appreciating assets.

Try Our Free Net Worth Calculator Today!

Take control of your financial future by calculating your net worth now. Our easy-to-use online tool will help you stay financially aware and make better money decisions.

🚀 Calculate Your Net Worth Now

🚀 Calculate Your Net Worth Now

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *