├── mystyle.css ├── index.html └── myscript.js /mystyle.css: -------------------------------------------------------------------------------- 1 | #calculator{ 2 | 3 | background-color:#273a63; 4 | width:450px; 5 | height:350px; 6 | color:#fff; 7 | padding:55px; 8 | padding-top:30px; 9 | border-style:none; 10 | border-radius:25px; 11 | margin:auto; 12 | margin-top:50px; 13 | 14 | 15 | } 16 | input { 17 | 18 | float:right; 19 | clear:both; 20 | width:125px; 21 | height:30px; 22 | margin-top:5px; 23 | text-align:center; 24 | font-weight:bold; 25 | 26 | } 27 | p { 28 | font-size:35px; 29 | 30 | } 31 | #addup{ 32 | 33 | background-color:#cc0000; 34 | border-style:none; 35 | border-radius:10px; 36 | width:220px; 37 | height:45px; 38 | color:#fff; 39 | font-size:30px; 40 | margin-right:120px; 41 | } 42 | h1{ 43 | 44 | font-size:65px; 45 | text-align:center; 46 | color:#1f80c9; 47 | /*margin-top:20px;*/ 48 | } 49 | #perc { 50 | 51 | color:#cd5c5c; 52 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Percentage calculator 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Percentage calculator

16 |
17 | 18 |

Bill Amount:

19 |

Percentage Tip

20 | 21 |

Tip amount:

22 |

Total:

23 |

24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | // define a function to perform our calculation. 2 | function calculate () { 3 | // retrieve the values from the amount and percentage fields 4 | // and store them in variables. 5 | var amount = $('#amount').val(); 6 | var percentage = $('#percentage').val(); 7 | 8 | // calculate the actual tip. 9 | var tip = amount * (percentage / 100); 10 | 11 | // also calculate the total. 12 | 13 | // Note the 'Number' function: amount is actually a string 14 | // and adding a number to a string just makes a longer 15 | // string, so we convert it to a number first. 16 | var total = Number(amount) + tip; 17 | 18 | // Store the values in the result fields 19 | 20 | // Note that we call the 'toFixed' function, 21 | // which is a property of all numbers. This 22 | // makes sure there are only two digits after 23 | // the decimal point. 24 | $('#tip').val( tip.toFixed(2) ); 25 | $('#total').val( total.toFixed(2) ); 26 | 27 | // submit event fucntions must return false, 28 | // to tell the browser not to load a new page. 29 | return false; 30 | } 31 | 32 | // attach our function to the form's submit event. 33 | $('#calculator').submit( calculate ); --------------------------------------------------------------------------------