This epic Dart program contains sparse amounts of errors and warnings. This code has associated html and css. It imports the 'dart:math', 'dart:html', and 'dart:js' packages as well.
Find this at dartpad.dartlang.org/?source=f66a3a3a-7fec-48bf-a8f5-ef0ccb8fdb3b.
Created with <3 with dartpad.dartlang.org.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>empty-dust-5559</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script type="application/dart" src="main.dart"></script> | |
| </head> | |
| <body> | |
| <script data-require="chart.js@2.5.0" data-semver="2.5.0" | |
| src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> | |
| <h2>Calculate mortgage (FMR)<h2> | |
| <div> | |
| <table> | |
| <tr> | |
| <td><label for=principal>Principal</label></td> | |
| <td><input type=number id=principal value=180.000 /></td> | |
| </tr> | |
| </tr> | |
| <tr> | |
| <td><label for=setPrincipal>range</label></td> | |
| <td><input type=range id=setPrincipal min="20000" max="300000" step=5000 /></td> | |
| </tr> | |
| <tr> | |
| <td><label for=interest>Interest</label></td> | |
| <td><input type=number id=interest value=1.29 /></td> | |
| </tr> | |
| <tr> | |
| <td><label for=payment>monthly payment</label></td> | |
| <td><input type=number id=payment value=0 /></td> | |
| </tr> | |
| </table> | |
| <button onclick="updatePrincipal(255.00)" id=updatePrincipal>update Principal</button> | |
| </div> | |
| <div> | |
| <ol id="orderedList"> | |
| <li> foo | |
| </ol> | |
| </div> | |
| </body> | |
| </html> |
| import 'dart:math'; | |
| import 'dart:html'; | |
| import 'dart:js'; | |
| void main() { | |
| // double principal = double.parse((querySelector('#principal') as InputElement).value); | |
| // RangeInputElementBase setPrincipal = (querySelector('#setPrincipal') as RangeInputElementBase); | |
| new FmrApp(); | |
| } // main | |
| class FmrApp{ | |
| InputElement principalElement = querySelector('#principal'); | |
| RangeInputElement setPrincipal = querySelector('#setPrincipal'); | |
| InputElement interestElement = querySelector('#interest'); | |
| ButtonElement buttonUpdatePrincipal = querySelector('#updatePrincipal'); | |
| OListElement orderedList = querySelector('#orderedList'); | |
| InputElement payment = querySelector('#payment'); | |
| double interest; | |
| double principal; | |
| FmrApp() | |
| { | |
| initElementEventListeners(); | |
| interest = double.parse(interestElement.value); | |
| principal = double.parse(principalElement.value); | |
| payment.value = FmrLib.getMonthlyPayment(10, interest, principal).toString(); | |
| printNumbers(); | |
| } | |
| double updatePrincipal(double amount){ | |
| InputElement principal = querySelector('#principal'); | |
| principal.value = amount.toString(); | |
| return amount; | |
| } | |
| void updatePayment(){ | |
| double c = FmrLib.getMonthlyPayment(10, this.interest, principal); | |
| payment.value = c.toStringAsFixed(0); // c.toStringAsPrecision(2); | |
| } | |
| void printNumbers(){ | |
| var numbers = new Iterable.generate(5, (i) => i); | |
| var listItem = new LIElement(); | |
| for (var iter = numbers.iterator; iter.moveNext();) { | |
| var number = iter.current; | |
| var li = new LIElement(); | |
| li.innerHtml = "foo ${number}"; | |
| orderedList.append(li); | |
| print(number); | |
| } | |
| } | |
| void initElementEventListeners() | |
| { | |
| principalElement.onBlur.listen((e){ | |
| updatePayment(); | |
| }); | |
| setPrincipal.onMouseMove.listen((e){ | |
| _onMouseMove(e); | |
| updatePayment(); | |
| }); | |
| setPrincipal.onMouseLeave.listen((e){ // onTouchLeave | |
| print('setPrincipal onMouseLeave fired'); | |
| updatePayment(); | |
| }); | |
| buttonUpdatePrincipal.onClick.listen((e){ | |
| // Do Stuff | |
| updatePayment(); | |
| }); | |
| } // initElementEventListeners | |
| void _onMouseMove(MouseEvent event) { | |
| // Element dragTarget = event.target; | |
| principalElement.value = setPrincipal.value; | |
| } | |
| } // class | |
| class FmrLib | |
| { | |
| static double getMonthlyPayment(int years, double interest, double principal) | |
| { | |
| double r = (interest/100/12); // | |
| int N = 12 * years; // Number of monthly payments | |
| // double c = 800.00; // fixed monthly payment | |
| double c = (r / (1-pow(1+r, -1*N)))*principal; | |
| return c; | |
| } | |
| static double getDebtRemaining(double principal, int years, double interest, int t) | |
| { | |
| double q = 1+interest; | |
| double remDebt = principal * (pow(q, years) - pow(q, t))/(pow(q,years)-1); | |
| return remDebt; | |
| } | |
| } | |
| // var setData2 = [{ x: 4, y: 2}, {x: 6, y: 3}, {x: 8, y: 4}]; | |
| // var setOptions2 = {scales:{xAxes:[{type:'linear', position:'bottom'}] }} | |
| // var ctx2 = document.getElementById("myChart2"); | |
| // var myLineChart = new Chart(ctx2, { type: 'line' | |
| // ,data: { datasets: [{label: 'Scatter Dataset', data: setData2}]} | |
| // ,options: setOptions2}); | |
| input { margin: 0 1ex;} | |
| h2 {font-size: 24px;} | |
| div {font-size: 20px;} |