Untitled

<canvas id="portfolioChart" width="400" height="200"></canvas>

<form id="portfolioForm">
  <label for="initialInvestment">Initial Investment Amount:</label>
  <input type="number" id="initialInvestment" required>
  
  <label for="monthlyContributions">Monthly Contributions:</label>
  <input type="number" id="monthlyContributions" required>
  
  <label for="annualReturn">Estimated Annual Return (%):</label>
  <input type="number" id="annualReturn" required>
  
  <button type="submit">Calculate</button>
</form>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Get form elements
    const form = document.getElementById("portfolioForm");
    const initialInvestmentInput = document.getElementById("initialInvestment");
    const monthlyContributionsInput = document.getElementById("monthlyContributions");
    const annualReturnInput = document.getElementById("annualReturn");
    
    // Form submit event handler
    form.addEventListener("submit", function(event) {
      event.preventDefault(); // Prevent form submission
      
      // Get input values
      const initialInvestment = parseFloat(initialInvestmentInput.value);
      const monthlyContributions = parseFloat(monthlyContributionsInput.value);
      const annualReturn = parseFloat(annualReturnInput.value) / 100;
      
      // Generate chart data
      const years = 10; // Number of years to display
      const data = [];
      let portfolioValue = initialInvestment;
      
      for (let i = 0; i <= years; i++) {
        data.push(portfolioValue.toFixed(2));
        portfolioValue = portfolioValue * (1 + annualReturn) + (monthlyContributions * 12);
      }
      
      // Chart configuration
      const ctx = document.getElementById("portfolioChart").getContext("2d");
      const chart = new Chart(ctx, {
        type: "line",
        data: {
          labels: Array.from(Array(years + 1).keys()),
          datasets: [{
            label: "Portfolio Value",
            data: data,
            backgroundColor: "rgba(0, 123, 255, 0.2)",
            borderColor: "rgba(0, 123, 255, 1)",
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            x: {
              display: true,
              title: {
                display: true,
                text: "Years"
              }
            },
            y: {
              display: true,
              title: {
                display: true,
                text: "Portfolio Value"
              }
            }
          },
          plugins: {
            title: {
              display: true,
              text: "Total Portfolio Value Over Time"
            }
          }
        }
      });
    });
  });
</script>

<style>
  body {
    color: white;
    background-color: #333;
    font-family: Arial, sans-serif;
  }
  
  label {
    display: block;
    margin-top: 10px;
  }
  
  input[type="number"] {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  
  button {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
</style>