API tools faq
paste
Advertisement
redandwhite

First-JavaScript

redandwhite
Mar 2nd, 2012
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.22 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>JavaScript Loan Calculator</title>
  4. <style>
  5. /* This is a CSS style sheet: it adds style to the program output */
  6.  
  7. body {
  8.     font-family:Helvetica, Arial, sans-serif;
  9. }
  10.  
  11. .result {
  12.     font-weight: bold;
  13. } /* For elements with class="result" */
  14.  
  15. #payment {
  16.     text-decoration: underline;
  17. } /* For element with id="payment" */
  18.  
  19. table {
  20.     padding: 1em;
  21.     line-height: 2em;
  22. }
  23.  
  24. tr:hover{
  25.     background-color:#E1E1E1;
  26. }
  27.  
  28. .top {
  29.     background-color:#CAFFC7;
  30. }
  31.  
  32. .bottom {
  33.     background-color:#FFC;
  34. }
  35.  
  36. .title {
  37.     text-align:center;
  38.     background-color:#EDEDED;
  39.     margin:1em 0;
  40.     padding:1em 0;
  41.     font-size:1.4em;
  42. }
  43.  
  44. .compute-button {
  45.     color: #900;
  46.     padding: 0.2em 0.5em;
  47.     margin: 0.5em 0;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <!--
  53.  This is an HTML form that allows the user to enter data and allows
  54.  JavaScript to display the results it computes back to the user. The
  55.  form elements are embedded in a table to improve their appearance.
  56.  The form itself is given the name "loandata", and the fields within
  57.  the form are given names such as "interest" and "years". These
  58.  field names are used in the JavaScript code that follows the form.
  59.  Note that some of the form elements define "onchange" or "onclick"
  60.  event handlers. These specify strings of JavaScript code to be
  61.  executed when the user enters data or clicks on a button.
  62. -->
  63. <form name="loandata">
  64.   <table>
  65.     <tr class="top title"><td colspan="2">
  66.     <b>Enter Loan Information:</b></td></tr>
  67.     <tr class="top">
  68.       <td>1) Amount of the loan (any currency):</td>
  69.       <td><input type="text" name="principal" onChange="calculate();"></td>
  70.     </tr>
  71.     <tr class="top">
  72.       <td>2) Annual percentage rate of interest:</td>
  73.       <td><input type="text" name="interest" onChange="calculate();"></td>
  74.     </tr>
  75.    
  76.    
  77.     <!-- discount checkbox -->
  78.     <tr class="top">
  79.         <td>2a) Eligible for 10% discount on interest?</td>
  80.         <td>
  81.             <input type="checkbox" name="discount" onChange="calculate()">
  82.         </td>
  83.     </tr>
  84.     <!-- external account checkbox -->
  85.     <tr class="top" style="display:none">
  86.         <td>2b) Monthly payments from external <br>account?
  87.             (+0.25% interest)
  88.         </td>
  89.         <td>
  90.             <input type="checkbox" name="externalAccount" onChange="calculate()">
  91.         </td>
  92.     </tr>
  93.    
  94.     <tr class="top">
  95.       <td>3) Repayment period in years:</td>
  96.       <td><input type="text" name="years" onChange="calculate();"></td>
  97.     </tr>
  98.     <tr><td></td>
  99.       <td><input type="button" class="compute-button" value="Compute" onClick="calculate();"></td>
  100.     </tr>
  101.     <tr class="bottom title">
  102.         <td colspan="2"><b>Payment Information:</b></td></tr>
  103.     <tr class="bottom">
  104.       <td>4) Your monthly payment:</td>
  105.       <td>$<span class="result" id="payment"></span></td>
  106.     </tr>
  107.     <tr class="bottom">
  108.       <td>5) Your total payment:</td>
  109.       <td>$<span class="result" id="total"></span></td>
  110.     </tr>
  111.     <tr class="bottom">
  112.       <td>6) Your total interest payments:</td>
  113.       <td>$<span class="result" id="totalinterest"></span></td>
  114.     </tr>
  115.   </table>
  116. </form>
  117.  
  118. <script language="JavaScript">
  119. /*
  120.  * This is the JavaScript function that makes the example work. Note that
  121.  * this script defines the calculate() function called by the event
  122.  * handlers in the form. The function reads values from the form
  123.  * <input> fields using the names defined in the HTML code above.  It outputs
  124.  * its results into the named <span> elements.
  125.  */
  126. function calculate() {
  127.     // Get the user's input from the form. Assume it is all valid.
  128.     // Convert interest from a percentage to a decimal, and convert from
  129.     // an annual rate to a monthly rate. Convert payment period in years
  130.     // to the number of monthly payments.
  131.     var principal = document.loandata.principal.value;
  132.     var calculatedInterest = parseInt(document.loandata.interest.value);
  133.    
  134.     if (document.loandata.discount.checked) {
  135.         calculatedInterest -= 10;
  136.        
  137.         if (calculatedInterest <= 0) {
  138.             calculatedInterest = 0.001;
  139.         }
  140.     }
  141.    
  142.     if (document.loandata.externalAccount.checked) {
  143.         calculatedInterest += 0.25;
  144.     }
  145.    
  146.    var interest = calculatedInterest / 100 / 12;
  147.        
  148.    var payments = document.loandata.years.value * 12;
  149.  
  150.    // Now compute the monthly payment figure, using esoteric math.
  151.    var x = Math.pow(1 + interest, payments);
  152.    var monthly = (principal*x*interest)/(x-1);
  153.  
  154.    // Get named <span> elements from the form.
  155.     var payment = document.getElementById("payment");
  156.     var total = document.getElementById("total");
  157.     var totalinterest = document.getElementById("totalinterest");
  158.  
  159.     // Check that the result is a finite number. If so, display the
  160.     // results by setting the HTML content of each <span> element.
  161.     if (isFinite(monthly)) {
  162.         payment.innerHTML = monthly.toFixed(2) + " x " + payments +" monthly payments.";
  163.        
  164.         today = new Date();
  165.        
  166.         yearDue = parseInt(today.getFullYear());
  167.        
  168.         yearDue += parseInt(document.loandata.years.value);
  169.         total.innerHTML = (monthly * payments).toFixed(2) + "<br/> due by "+ today.getDay() + "/" + today.getMonth() + "/" + yearDue;
  170.         totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2) + " at " +calculatedInterest+"%";
  171.     }
  172.     // Otherwise, the user's input was probably invalid, so display nothing.
  173.     else {
  174.         payment.innerHTML = "";
  175.         total.innerHTML = ""
  176.         totalinterest.innerHTML = "";
  177.     }
  178. }
  179. </script>
  180. </body>
  181. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!