The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Create a simple portfolio tracker

Written by

in

Computer Science

Here is a simple Portfolio Tracker built using HTML, CSS, and JavaScript. It allows users to manually enter stock names, quantities, and prices, and it calculates total values dynamically.

Features:

Add multiple assets
Calculates individual and total values
Editable inputs

Let’s create the tracker:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Simple Portfolio Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
    }
    h1 {
      text-align: center;
    }
    table {
      width: 100%;
      margin-top: 20px;
      border-collapse: collapse;
      background: #fff;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: center;
    }
    input[type="text"], input[type="number"] {
      width: 90%;
      padding: 5px;
    }
    #add-row {
      margin-top: 10px;
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
    #total {
      font-weight: bold;
      margin-top: 20px;
      text-align: right;
    }
  </style>
</head>
<body>

  <h1>Simple Portfolio Tracker</h1>

  <table id="portfolio">
    <thead>
      <tr>
        <th>Asset</th>
        <th>Quantity</th>
        <th>Price per Unit ($)</th>
        <th>Total Value ($)</th>
        <th>Remove</th>
      </tr>
    </thead>
    <tbody>
      <!-- Portfolio rows will be added here -->
    </tbody>
  </table>

  <button id="add-row">Add Asset</button>
  <div id="total">Total Portfolio Value: $0.00</div>

  <script>
    const portfolioBody = document.querySelector('#portfolio tbody');
    const addRowBtn = document.getElementById('add-row');
    const totalValueDisplay = document.getElementById('total');

    function createRow() {
      const row = document.createElement('tr');

      row.innerHTML = `
        <td><input type="text" placeholder="Asset Name" /></td>
        <td><input type="number" min="0" step="any" class="quantity" /></td>
        <td><input type="number" min="0" step="any" class="price" /></td>
        <td class="value">$0.00</td>
        <td><button class="remove">X</button></td>
      `;

      row.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', updateValues);
      });

      row.querySelector('.remove').addEventListener('click', () => {
        row.remove();
        updateValues();
      });

      portfolioBody.appendChild(row);
    }

    function updateValues() {
      let total = 0;

      portfolioBody.querySelectorAll('tr').forEach(row => {
        const qty = parseFloat(row.querySelector('.quantity')?.value) || 0;
        const price = parseFloat(row.querySelector('.price')?.value) || 0;
        const value = qty * price;

        row.querySelector('.value').textContent = `$${value.toFixed(2)}`;
        total += value;
      });

      totalValueDisplay.textContent = `Total Portfolio Value: $${total.toFixed(2)}`;
    }

    addRowBtn.addEventListener('click', createRow);
  </script>

</body>
</html>

How to Use:

Open the HTML file in any modern web browser.
Click “Add Asset” to enter a new row.
Enter the asset name, quantity, and price per unit.
The total value per asset and total portfolio value will auto-update.
Click the ❌ button to remove any asset.

This is a frontend-only tool. For persistent tracking, consider integrating it with a backend or local storage. Let me know if you want a version with automatic price fetching via an API.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About