Future Value Cal

Question

poloblue -3 Newbie Poster

13 Years Ago

Good Morning,

I'm new to javascript and the professor ask us to do a javascript program of future value calculation program. The details are: Write a program to find future value of monthly investments. Start with an initial investment, make a deposit every 30days, calculate interest on principle compounded daily, display a table showing beginning balance, deposit for the year, interest earned for the year, and ending balance. The table should display the aforementioned information for a duration of your present age to 65. Display result in a table format as shown below.
Future Value Calculation
Initial Investment: $2000
Interest Rate: 12%
Deposit every 30 days: $100
Investment started: 50
Age Beg Bal Interest Deposits Ending Bal
51 2000 324.65 1200 3524.65
52 3524.65 519.01 1200 5243.66
53 5243.66 738.14 1200 7181.79
54 7181.79 985.2 1200 9366.99
55 9366.99 1263.76 1200 11830.74
56 11830.74 1577.82 1300 14708.57
57 14708.57 1944.67 1200 17853.24
58 17853.24 2345.54 1200 21398.77
59 21398.77 2797.5 1200 25396.28
60 25396.28 3307.08 1200 29903.36
61 29903.36 3881.62 1200 34984.98
62 34984.98 4529.4 1300 40814.38
63 40814.38 5272.5 1200 47286.88
64 47286.88 6097.58 1200 54584.46
65 54584.46 7027.83 1200 62812.29

So far, I have done this for the code

<html>

    <head>

        <title>Future Value Calculation</title>
        <style type = "text/css">
            table { width: 100% }
            th    { text-align : left } 
        </style>
        <script type = "text/javascript">
        <!--
        var EndBal;
        var principal = 2000.00;
        var rate = .12;
        
        document.writeln(
            "<table border = \"1\">" );
        document.writeln(
            "<thead><tr><th>Future Value Calculation</th>" );
        document.writeln(
            "<tr><th>Initial Investment:</th>" );
        document.writeln(
            "<tr><th>Interest Rate:</th>" );
        document.writeln(
            "<tr><th>Deposit every 30 days:</th>" );
        document.writeln(
            "<tr><th>Investment started:</th>" );
        documnet.writeln(
            "<tr><th>Age</th>" );
        document.writeln(
            "<th>Beg Bal</th>" );
        document.writeln(
            "<th>Interest</th>" );
        document.writeln(
            "<th>Deposits</th>" );
        document.writeln(
            "<th>Ending Bal</th>" );
        document.writeln( "</tr></thead><tbody>" );
        
        for ( var age = 28; age <= 65; ++age )
        {
            EndBal = principal * Math.pow(1.0 + rate, age );
            document.writeln( "<tr><td>" + age +
                "</td><td>" + EndBal.toFixed(2) +
                "</td><tr>" );
        }
        
        document.writeln( "</tbody></table>" );
        
        </script>
</head>

<body>

</body>

</html>

Thanks in advance for your help

javascript

3 Contributors
6 Replies
1K Views
17 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by poloblue

Taywin 312 Posting Virtuoso

13 Years Ago

This computation is awkward... Also, the way you learn how to use JavaScript is actually interfering with how to create a web page. It will ruin how you design a web page...

Anyway, I have changed certain things and give you a skeleton of what you need because I cannot stand the current display... If you want to use CSS, please do it right. The only part I don't do for you is the computation part...

<html>
<head>
  <title>Future Value Calculation</title>
  <style type = "text/css">
  table {
    width: 80%;
    border-collapse: collpase;
  }
  td {
    border: 1px inset gray;
    padding: 4px;
  }
  th {
    border: 1px inset brown;
    padding: 4px;
  }
  input { text-align: right; }
  .left { text-align: left; }
  .center { text-align: center; }
  .right { text-align: right; }
  </style>

  <script type = "text/javascript">
    /*
    Is this the equation for computation???
    P = C * ((1 + (r/n))^(nt))
    where
        P = future value
        C = initial deposit
        r = interest rate (expressed as a fraction: eg. 0.12)
        n = # of times per year interest is compounded
        t = number of years invested
    */
    var principal = 2000;
    var rate = .12;
    var deposit = 100;
    var age = 50;

    document.writeln("<h3>Future Value Calculation</h3>");
    document.writeln("Initial Investment: $"+principal+"<br/>");
    document.writeln("Interest Rate: "+(rate*100)+"%<br/>");
    document.writeln("Deposite every 30 days: $"+deposit+"<br/>");
    document.writeln("Invesment Started: "+age+"<br/>");

    document.writeln("<table>" );
    document.writeln("<tr><th>Age</th>");
    document.writeln("<th>Begin Bal.</th>");
    document.writeln("<th>Interest</th>");
    document.writeln("<th>Deposit</th>");
    document.writeln("<th>End Bal.</th></tr>");

    var EndBal, interest;
    for ( var currAge=age; currAge<=65; currAge++ ) {
      document.writeln("<tr>");
      document.writeln("<td class='center'>"+currAge+"</td>");
      document.writeln("<td class='right'>"+principal.toFixed(2)+"</td>");


      // compute new future value
      // in computation, do not forget "deposit" each month
      EndBal = principal * 1;  // *** FIX THIS!!!
      // now compute the interest per year and display it
      interest = EndBal - principal;  // *** FIXTHIS!!!

      // after computed it, you can now display using JavaScript
      document.writeln("<td class='right'>"+interest.toFixed(2)+"</td>");

      // deposit every month
      document.writeln("<td class='center'>"+(deposit*12).toFixed(2)+"</td>");

      // end balance
      document.writeln("<td class='right'>"+EndBal.toFixed(2)+"</td>");
      document.writeln("</tr>");

      // copy the value to the next year
      principal = EndBal;
    }

    document.writeln( "</table>" );
  </script>
</head>

</html>

AleMonteiro 238 Can I pick my title?

13 Years Ago

You should only create the elements by JS when needed. You can create the table in pure html and then just add the dynamic rows.

Something like this:

<html>
    <head>
        <title>Future Value Calculation</title>
        <style type = "text/css">
            table { width: 100% }
            th    { text-align : left } 
			th span { color: #008; margin-left: 15px; }
        </style>
        <script type = "text/javascript">
        // Start the script once the page has loaded
		window.onload = function()
		{
			var EndBal;
			var principal = 2000.00;
			var rate = 0.12;
			
			for ( var age = 28; age <= 65; ++age )
			{
				// Do calculations
				EndBal = principal * Math.pow(1.0 + rate, age );
				// Insert row
				var row = getById("tBody").insertRow(0); //Insert row at index 0
				// Create cells for the created row
				// Empty cells are set to &nbsp to be displayed in the table
				row.insertCell(0).innerHTML = age; 
				row.insertCell(1).innerHTML = EndBal.toFixed(2);
				row.insertCell(2).innerHTML = "&nbsp;";
				row.insertCell(3).innerHTML = "&nbsp;";
				row.insertCell(4).innerHTML = "&nbsp;";
			}
			
			// Set the header values
			getById("spnInitial").innerHTML = principal.toFixed(2);
			getById("spnRate").innerHTML = rate.toFixed(2);
			getById("spnDeposit").innerHTML = "...";
			getById("spnInvestment").innerHTML = "...";
        }
		
		// Helper function to get element by id
		function getById(id)
		{
			return document.getElementById(id);
		}
        </script>
	</head>

<body>
	<table border="1">
		<thead>
			<tr><th colspan="5">Future Value Calculation</th></tr>
			<tr><th colspan="5">Initial Investment:<span id="spnInitial"></span></th></tr>
			<tr><th colspan="5">Interest Rate:<span id="spnRate"></span></th></tr>
			<tr><th colspan="5">Deposit every 30 days:<span id="spnDeposit"></span></th></tr>
			<tr><th colspan="5">Investment started:<span id="spnInvestment"></span></th></tr>
			<tr>
				<th>Age</th>
				<th>Beg Bal</th>
				<th>Interest</th>
				<th>Deposits</th>
				<th>Ending Bal</th>
			</tr>
		</thead>
		<tbody id="tBody">
		
		</tbody>
	</table>
</body>

</html>

Hope it helps.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Taywin 312 Posting Virtuoso · Answer 1 · 2011-09-28T02:37:12+00:00

Just to add something... If you use "thead" tag, you should have "tfoot" as well. You may not see the problem now, but in the future when you work more in design you will...

AleMonteiro 238 Can I pick my title? · Answer 2 · 2011-09-28T02:42:17+00:00

AleMonteiro 238 Can I pick my title?

13 Years Ago

Taywin, I didn't know that. Why?

Taywin 312 Posting Virtuoso · Answer 3 · 2011-09-28T07:32:32+00:00

It will help your browser to know and parse the table data faster. If you leave out tfoot, with a very long data in the tbody, the browser will have to parse all the table data without knowing until it finds the last row of data in the tbody. Think of it as the browser is given a length to read and parse data before hand. Also, tfoot should come right between thead and tbody tags. Though, you may not need thead, tfoot, and tbody at all in your page if you do a simple page like this.

poloblue -3 Newbie Poster · Answer 4 · 2011-09-28T07:59:20+00:00

Taywin and ALeMonteiro,

Thank you for your help on clarifying some things on javascript and for the tips about the designing process. I really appreciate the help that both of you (Taywin and AleMonteiro) gave me on this assignment.