Create Tip Calculator with HTML
CSS and JavaScript
In this Morning timer, as found in the review picture, there is a computerized clock that shows the ongoing time alongside some caution choices hour, minutes, am/pm. Clients can choose a period and set cautions for any time, whether AM or PM
Video Tutorial of Tip Calculator
Tip Calculator [Source Codes]
To Create A Tip Calculator with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Tip Calculator</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <h1>Tip Calculator</h1>
- <p>Enter the bill amount and tip percentage to calculate the total.</p>
- <label for="bill">Bill amount:</label>
- <input type="number" id="bill">
- <br/>
- <label for="tip">Tip percentage:</label>
- <input type="number" id="tip">
- <br/>
- <button id="calculate">Calculate</button>
- <br/>
- <label for="total">Total:</label>
- <span id="total"></span>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- * {
- box-sizing: border-box;
- }
-
- body {
- background-color: #282A35;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
-
- .container {
- background-color: #f2f2f2;
- max-width: 600px;
- margin: 100px auto;
- padding: 20px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- border-radius: 10px;
- }
-
- h1 {
- font-size: 40px;
- }
- label,p{
- font-size: 20px;
- }
- input {
- padding: 17px;
- border: 1px solid #ccc;
- border-radius: 8px;
- margin: 10px 0;
- font-size: 22px;
- width: 50%;
- }
-
- button {
- background-color: #1EA7EF;
- color: white;
- padding: 17px;
- border: none;
- cursor: pointer;
- margin: 10px 0;
- width: 90%;
- font-size: 20px;
- text-transform: uppercase;
- transition: background-color 0.2s ease;
- }
-
- button:hover {
- background-color: #785BF8;
- }
-
- #total {
- font-size: 28px;
- font-weight: bold;
- margin-top: 15px;
- }
Now paste the following codes into your script.js file
- const btnEl = document.getElementById("calculate");
- const billInput = document.getElementById("bill");
- const tipInput = document.getElementById("tip");
- const totalSpan = document.getElementById("total");
-
- function calculateTotal() {
- const billValue = billInput.value;
- const tipValue = tipInput.value;
- const totalValue = billValue * (1 + tipValue / 100);
- totalSpan.innerText = totalValue.toFixed(2);
- }
-
- btnEl.addEventListener("click", calculateTotal);
If you face any difficulties while creating Tip Calculator or your code is not working as expected, you can download the source code files by clicking download button.