Created
August 15, 2020 21:13
-
-
Save master-elodin/bb2fcf6076a8d716e33c05eca2ae2d06 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tip Calculator</title> | |
| <style> | |
| #calculator { | |
| border: 1px solid black; | |
| border-radius: 10px; | |
| margin: 0 auto; | |
| padding-bottom: 20px; | |
| width: 350px; | |
| } | |
| #calculator table { | |
| margin: auto; | |
| } | |
| #calculator table thead { | |
| text-align: center; | |
| } | |
| #calculator button { | |
| border: 1px solid black; | |
| border-radius: 5px; | |
| margin: 5px auto; | |
| padding: 7px 30px; | |
| } | |
| #calculator td:first { | |
| text-align: right; | |
| } | |
| #calculator input { | |
| text-align: right; | |
| } | |
| #cheapskate { | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="calculator"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th colspan="2"> | |
| <h3>Tip Calculator</h3> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Bill Total:</td> | |
| <td><input id="total-input" type="number" placeholder="20.00" onkeyup="tipCalculator()"></td> | |
| </tr> | |
| <tr> | |
| <td>Tip (in %):</td> | |
| <td><input id="tip-input" type="number" placeholder="18" onkeyup="tipCalculator()"></td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" style="text-align: center;"> | |
| <button onClick="tipCalculator()" type="button"> | |
| CALCULATE | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Tip:</td> | |
| <td style="text-align: right;">$<span id="tip-output"></span></td> | |
| </tr> | |
| <tr> | |
| <td>Total With Tip:</td> | |
| <td style="text-align: right;">$<span id="output"></span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p id="cheapskate"></p> | |
| <script> | |
| // putting cheapskate into its own function so it isn't being recreated every time | |
| function cheapskate(tip) { | |
| if (tip < 15) { | |
| document.querySelector("#cheapskate").innerText = ` | |
| Oh, nice. ${tip}%? | |
| Maybe plan on tipping more next time, you cheapskate. | |
| `; | |
| } else { | |
| document.querySelector("#cheapskate").innerText = ''; | |
| } | |
| } | |
| function tipCalculator() { | |
| // using parseFloat instead of Number() just because it's more industry standard... didn't actually know Number() is a thing | |
| const bill = parseFloat(document.querySelector("#total-input").value); | |
| const tip = parseFloat(document.querySelector("#tip-input").value); | |
| if(isNaN(bill) || isNaN(tip)) { | |
| // don't keep processing if `bill` or `tip` aren't a number, since `tipCalculator` is called whenever the value of bill total or tip% changes | |
| return; | |
| } | |
| const tipTotal = bill * (tip / 100); | |
| const total = (bill * (tip / 100)) + bill; | |
| // switched to using 100 because it's easier to read | |
| document.querySelector("#tip-output").innerText = Math.round(tipTotal * 100) / 100; | |
| document.querySelector("#output").innerText = Math.round(total * 100) / 100; | |
| cheapskate(tip); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment