Tip Calculator with HTML, CSS, and JavaScript

Creating Tip Calculator with HTML, CSS, and JavaScript

Creating Tip Calculator with HTML, CSS, and JavaScript

Nowadays technology terminology also contributes in this section by using a calculator that how much a person should contribute to give a tip to the helper. So Hey guys Welcome back to Codewithrandom, Today in this new blog I’ll tell you how we can Create a Tip Calculator Using HTML, CSS, and JavaScript which is a little upper than a normal calculator and intermediate project for front-end developers.

‘Tip’ is not a trading tip actually the word tip only exists in the restaurant for the helpers who do the service for the sake of customers who come to enjoy their leisure life with family & friends. It is basically an amount given after the bill amount to the helper or bouncer in the club or 5-star restaurant.

I hope you have got an idea for this project

HTML Code for Tip Calculator

<body>

    <div id="container">

        <h1>Tip Calculator</h1>

        <div id="calculator">

            <form>
                    <label>How much was your bill? <br>
                        $ <input type=" text" id="billAmount">
                    </label>

                    <label>How was your service? <br>
                        <select id="serviceQuality">
                            <option disabled selected value="0">-- Choose an option --</option>

                            <option value="0.3">30% - Outstanding</option>

                            <option value="0.2">20% - Good</option>

                            <option value="0.15">15% - Okay</option>

                            <option value="0.1">10% - Bad</option>

                            <option value="0.05">5% - Terrible</option>
                        </select>
                    </label>

                    <label>
                        How many people are sharing the bill?<br>
                        <input type="text" id="totalPeople"> people
                    </label>
                    <button type="button" id="calculate">Calculate!</button>

            </form>
            

        </div> <!--calculator -->

        <div id="totalTip">
            <sup>$</sup><span id="tip">0.00</span>
            <small id="each">each</small>
        </div> <!--totalTip-->


    </div><!-- container -->




</body>

In this HTML code we have defined the structure of the calculator, we created a list which has the percentage and we have defined the label for it and created a button which will calculate the result and it will display the user.

Portfolio Website using HTML and CSS (Source Code)

CSS Code for Tip Calculator

body {
    background: #333 url(https://photos-2.dropbox.com/t/2/AACXQ_67JHXFKvEaqJWfsntp3cdvZ5wouSYvGO6wvJXxrg/12/670825672/jpeg/32x32/1/_/1/2/cutlery.jpg/EMbmxb0FGB0gBygH/hFUR9L79V2OIV-qumnK9gEZDFufrBDC0AvCr9pctqno?size=1280x960&size_mode=3) center center no-repeat;
    background-size: cover;
    color: orange;
}

#container {
    width: 400px;
    margin: 40px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: url(https://photos-3.dropbox.com/t/2/AADc4QWfisqOp9ossiflh-MjZfYwwMsTMxogUkSELkEBog/12/670825672/jpeg/32x32/1/_/1/2/paper-pattern.jpg/EMbmxb0FGB4gBygH/HXFrPb4KgB-jYL8JrSohX_9NNPGgbKsDnptQBOEO-xo?size=1280x960&size_mode=3) top left repeat;
    box-shadow: 0 10px 15px -8px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
}

h1 {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: solid 1px #ddd;
}

form {
    text-align: left;
}

form label {
    display: block;
    margin: 25px 0;
    font-weight: bold;
}

form input,
form select {
    padding: 8px;
    margin: 10px 0;
}

form input [type="text"] {
    width: 90px;
}

button {
    background: #6c2726;
    color: white;
    border: none;
    border-bottom: solid 4px #222;
    text-transform: uppercase;
    font-size: 18px;
    padding: 20px 30px;
    width: 100%
}


button:hover {
    background: #4c2827;
    border-bottom-color: #111;
}

button:active {
    position: relative;
    top: 1px;
}

#totalTip {
    font-size: 50px;
    margin-top: 40px;
}

#totalTip:before {
    content: "Tip Amount";
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-transform: upppercase;
}

#totalTip sup {
    font-size: 24px;
    top: -18px;
}


#totalTip small {
    font-size: 14px;
    font-weight: bold;
    display: block;
}

In this code of CSS we have styled and set the each element to their position so that it doesn’t get messy and things look properly. Also we have padded and gave the margin where it was required so that every thing is arrange systematic. Now lets code the JavaScript part to make the calculator working.

50+ Html ,Css & Javascript Projects With Source Code

JavaScript for Tip Calculator

// script.js

// Custom function
function calculateTip() {
    
    // Store the data of inputs
    var billAmount = document.getElementById("billAmount").value;
    var serviceQuality = document.getElementById("serviceQuality").value;
    var numPeople = document.getElementById("totalPeople").value;
    
    // Quick validation
    if(billAmount === "" || serviceQuality == 0) {
        window.alert("Please enter some values to get this baby up and running!");
        return; // this will prevent the function from continuing
    }
    
    // Check to see if this input is empty or less than or equal to 1
    if(numPeople === "" || numPeople <= 1) {
        numPeople = 1;
        
        document.getElementById("each").style.display = "none";
        
    } else {
        
        document.getElementById("each").style.display = "block";
        
    }
    
    // Do some math!
    var total = (billAmount * serviceQuality) / numPeople;
    total = Math.round(total * 100) / 100;
    total = total.toFixed(2);
    
    
    // Display the tip!
    document.getElementById("totalTip").style.display = "block";
    document.getElementById("tip").innerHTML = total;
    
}

// Hide the tip amount on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";

// Clicking the button calls our custom function
document.getElementById("calculate").onclick = function() { calculateTip(); };

//hide tip amount on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";

//Clicking the button
document.getElementById("calculate").onclick = function() {
    calculateTip();
};

In this JS part we have added the mathematical concept and the id which is defined the html code for amount and % of service and no of persons we have defined them in the JS code and pass on some conditions in which if its satisfies then it will give the solution or else it will give the error. Let us see the final output for Tip Calculator.

Final Output Of Tip Calculator with HTML, CSS, and JavaScript


We have successfully created our  Tip Calculator using HTML, CSS and Javascript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – @harshh9



Tags: ,

Leave a Reply