Interactive Tip Calculator with HTML and JavaScript

by
Tiempo de lectura: 3 minutos

html
Copy code

In this tutorial, we are going to build an interactive tip calculator that allows users to input their bill amount and desired tip percentage. As users enter these values, the calculator will automatically display the total amount to pay, which can be useful in situations like dining at a restaurant.

Here are the step-by-step instructions:

Step 1: Preparation Before we begin, make sure you have a code editor installed, such as Visual Studio Code, and a web browser to test your project.

Step 2: HTML Structure
Let’s start by creating the basic HTML structure for our tip calculator. Open your code editor and create an HTML file with the following content:

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <h1>Tip Calculator</h1>
        <label for="billAmount">Bill Amount:</label>
        <input type="number" id="billAmount" placeholder="Enter bill amount">

        <label for="tipPercentage">Tip Percentage:</label>
        <input type="number" id="tipPercentage" placeholder="Enter tip percentage">

        <button id="calculate">Calculate</button>

        <p>Total Amount with Tip: <span id="totalAmount"></span></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 3: CSS Styles (styles.css)
Create a CSS file called styles.css in the same folder as your HTML file and add some basic styles to enhance the appearance of the calculator:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.calculator {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10html
Copy code

In this tutorial, we are going to build an interactive tip calculator that allows users to input their bill amount and desired tip percentage. As users enter these values, the calculator will automatically display the total amount to pay, which can be useful in situations like dining at a restaurant.




    





Here are the step-by-step instructions:



Step 1: Preparation Before we begin, make sure you have a code editor installed, such as Visual Studio Code, and a web browser to test your project.



Step 2: HTML Structure
Let's start by creating the basic HTML structure for our tip calculator. Open your code editor and create an HTML file with the following content:



<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <h1>Tip Calculator</h1>
        <label for="billAmount">Bill Amount:</label>
        <input type="number" id="billAmount" placeholder="Enter bill amount">

        <label for="tipPercentage">Tip Percentage:</label>
        <input type="number" id="tipPercentage" placeholder="Enter tip percentage">

        <button id="calculate">Calculate</button>

        <p>Total Amount with Tip: <span id="totalAmount"></span></p>
    </div>

    <script src="script.js"></script>
</body>
</html>


Step 3: CSS Styles (styles.css)
Create a CSS file called styles.css in the same folder as your HTML file and add some basic styles to enhance the appearance of the calculator:


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.calculator {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
}

input, button {
    margin: 10px;
    padding: 5px;
    font-size: 16px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


Step 4: JavaScript Logic (script.js)
Create a JavaScript file called script.js in the same folder as your HTML file and add the following code:


document.addEventListener("DOMContentLoaded", function() {
    const billAmountInput = document.getElementById("billAmount");
    const tipPercentageInput = document.getElementById("tipPercentage");
    const calculateButton = document.getElementById("calculate");
    const totalAmountSpan = document.getElementById("totalAmount");

    calculateButton.addEventListener("click", function() {
        const billAmount = parseFloat(billAmountInput.value);
        const tipPercentage = parseFloat(tipPercentageInput.value);

        if (!isNaN(billAmount) && !isNaN(tipPercentage)) {
            const tipAmount = (billAmount * (tipPercentage / 100)).toFixed(2);
            const totalAmount = (billAmount + parseFloat(tipAmount)).toFixed(2);
            totalAmountSpan.textContent = `$${totalAmount}`;
        } else {
            totalAmountSpan.textContent = "Enter valid values";
        }
    });
});


html

Copy code


This JavaScript code is responsible for performing calculations when the "Calculate" button is clicked. It takes the bill amount and tip percentage entered by the user, calculates the tip amount, and displays the total amount to be paid on the page.


Step 5: Testing
Save all the files and open them in your web browser. You should see the tip calculator in action. Enter the bill amount and the desired tip percentage, then click "Calculate" to see the result.


This tutorial enables you to create an interactive tip calculator using HTML, CSS, and JavaScript. You can customize it and add more features according to your needs and expertise.



				 Post Views: 16

Leave a Comment