Created
April 3, 2025 06:54
-
-
Save A-ZCode/e2d5ffadb04a1b69f59b30b385510feb to your computer and use it in GitHub Desktop.
Simple tip calculator that lets users calculate a tip based on their bill amount.
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> | |
| /* Style inputs with type="text", select elements, and textareas */ | |
| input[type=text], select, textarea { | |
| width: 100%; /* Full width */ | |
| padding: 12px; /* Some padding */ | |
| border: 1px solid #ccc; /* Gray border */ | |
| border-radius: 4px; /* Rounded borders */ | |
| box-sizing: border-box; /* Make sure padding and width stay in place */ | |
| margin-top: 6px; /* Add a top margin */ | |
| margin-bottom: 16px; /* Bottom margin */ | |
| resize: vertical; /* Allow vertical resizing */ | |
| } | |
| /* Style the submit button */ | |
| input[type=submit] { | |
| background-color: green; | |
| color: white; | |
| padding: 12px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| /* Hover effect for the submit button */ | |
| input[type=submit]:hover { | |
| background-color: #45a049; | |
| } | |
| /* Add a background color and some padding around the form */ | |
| .container { | |
| border-radius: 5px; | |
| background-color: #f2f2f2; | |
| padding: 20px; | |
| max-width: 400px; /* Adjust width */ | |
| margin: auto; /* Center the form */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <form onsubmit="calculateTotal(); return false;"> | |
| <label for="billAmount">Bill Amount</label> | |
| <input type="text" id="billAmount" name="billAmount" placeholder="Enter bill amount..."> | |
| <!-- Dropdown Menu for Tip Selection --> | |
| <label for="tip">Tip Percentage</label> | |
| <select id="tip" name="tip"> | |
| <option value="0.1">10%</option> | |
| <option value="0.15" selected>15% (Standard)</option> | |
| <option value="0.2">20%</option> | |
| <option value="0.25">25%</option> | |
| </select> | |
| <input id="TipBill" type="submit" value="Calculate"> | |
| </form> | |
| <p id="result"></p> | |
| </div> | |
| <script src="tipCalculator.js"></script> | |
| </body> | |
| </html> |
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
| const calculateTipBillButton = document.getElementById('TipBill'); | |
| function calculateTotal() { | |
| let billAmount = parseFloat(document.getElementById("billAmount").value); | |
| let tipPercentage = parseFloat(document.getElementById("tip").value); | |
| // const calculateTipBillButton = document.getElementById('TipBill'); | |
| if (isNaN(billAmount) || billAmount <= 0) { | |
| document.getElementById("result").textContent = "Please enter a valid bill amount."; | |
| return; | |
| } | |
| let tipAmount = billAmount * tipPercentage; | |
| let totalAmount = billAmount + tipAmount; | |
| document.getElementById("result").textContent = `Tip: R${tipAmount.toFixed(2)} | Total Bill: R${totalAmount.toFixed(2)}`; | |
| } | |
| calculateTipBillButton.addEventListener('click',calculateTotal); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment