JavaScript/hw4part2.html at master · marbleindex/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
   <head>
      <!--Kristian Reyes 10/10/2020 -->
      <title>CNIT 133 Homework 4</title>
      <meta charset="utf-8">
      <meta name="description" content="homework 4 for CCSF CNIT 133">
      <meta name="keywords" content="HTML, CSS, Javascript, CCSF, Student">
      <meta name="author" content="Kristian Reyes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--bootstrap 	 -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <!--bootstrap 	 -->
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
         $(function() {  // jquery function to create alternating table colors
           $("table tr:nth-child(even)").addClass("striped");
         });
      </script>
      <style>       /* table styling */
         body,td {
         font-size: 10pt;
         }
         table {
         background-color: black;
         border: 1px black solid;
         border-collapse: collapse;
         }
         th {
         border: 1px outset silver;
         background-color: #800000;
         color: white;
         }
         tr {
         background-color: #ff7f50;
         margin: 1px;
         }
         tr.striped {  /* alternate table color using jquery function */
         background-color: #ffff00;
         }
         td {
         padding: 1px 8px;
         }
      </style>
      <script>
         function calcInterest() {   //function to calculate interest rates
         	var principal = 1000; //starting principal
         	var rate = 0.05;  //starting rate
         	var amount = 0;

         	// Amount = Principal * (1 + rate) number of years (exp)

         	while(rate <= 0.07){  // while rate is 7% or below
         		document.writeln("<table><tr><th> Year </th><th> Amount on Deposit </th><th> Interest Rate </th></tr><br>"); //creates table header row

         		for(n=1; n<=10; n++){  // starts at 1 year, stops at year 10, increments by one year each loop
         			amount = principal * Math.pow((1 + rate), n);  // math module to get exponent functionality
         			document.writeln("<tr><td> "+ n +" </td><td> "+ amount.toFixed(2) +" </td><td> "+ rate.toFixed(2) +" </td></tr>"); // fixed at two decimal points
         		}
         		document.writeln("<table>");
         		rate+=0.01;
         	}
         }
      </script>
   </head>
   <body>
      <main class="grid">
         <header  class="grid-area grid-area-1">
            <h2> Homework 4 - Part 2 </h2>
         </header>
         <nav class="grid-area grid-area-2">
            <ul>
               <li>
                  <a href="homework4.html" title="CNIT 133 - HW 4">
                  Return to CNIT 133 Homework 4 - Loops
                  </a>
               </li>
            </ul>
         </nav>
         <section class="grid-area grid-area-3">
            <h2> Compound Interest </h2>
            <h3> Principal of $1000 for %5, %6, and %7 Interest Rates </h3>
            <br>
            <script>
               calcInterest();


            </script>
         </section>
         <footer class="grid-area grid-area-4">
            <p>
               &#169; 2020 Kristian Reyes
            </p>
         </footer>
      </main>
   </body>
</html>