How to create a tip calculator with JavaScript

With the programming languages ​​CSS and JavaScript, we can easily create a tip calculator application from visitors to employees. How to do … Let’s just open up your computer and do some of the simple steps below.

Tutorials

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML code.

                    Kalkulator Tip    

Kalkulator Tip

Jumlah Tagihan: Tip (%): Jumlah Tip: Total Tagihan:

Save the above HTML code in the xampplite folder – htdocs – create a new folder named Calculator tip – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / CalculatorTip.

4. Enter the following CSS code.

html {    background-color: #d2691e;    height: 100%;}h1 {    color: white;    font-family: Arial, Helvetica, sans-serif;    text-align: center;}#container {    height: 325px;    width: 350px;    background-color: #e9967a;    display: grid;    grid-template-columns: 100px 1fr;    grid-template-rows: 75px 75px 75px 75px ;    grid-template-areas:     ". bill-amount"    ". tip-percentage"    ". tip-amount"    ". total-bill"    "btn btn";    margin: 0 auto;    border: 5px solid #88B169;    padding: 25px;}#bill-amount {    grid-area: bill-amount;    height: 25px;    width: 250px;}#tip-percentage {    grid-area: tip-percentage;    height: 25px;    width: 250px;}#tip-amount {    grid-area: tip-amount;    height: 25px;    width: 250px;}#total-bill {    grid-area: total-bill;    height: 25px;    width: 250px;}#btn {    grid-area: btn;    height: 25px;    width: auto;}

Save the CSS code in the xampplite folder – htdocs – create a new folder named Calculator tip – Save the CSS code under the name style.css.

5. Reload the URL address: http: // localhost / CalculatorTip. Initial display of the tip calculator, but not yet usable.

6. To use the tip calculator, enter the following JavaScript code.

let btn = document.getElementById('btn');btn.addEventListener('click', function(){    let billAmount = document.getElementById('bill-amount').value;    let tipPercentage = document.getElementById('tip-percentage').value;        let tipAmount = document.getElementById('tip-amount').value = billAmount / tipPercentage;    document.getElementById('total-bill').value = parseFloat(billAmount) + parseFloat(tipAmount);})

Save the JavaScript code in the xampplite folder – htdocs – create a new folder named Calculator tip – Save the CSS code under the name main.js.

7. Reload the URL address: http: // localhost / CalculatorTip. First view of the tip calculator.

Display when the tip calculator is used to calculate employee tips from visitors.

Calculator display when counting is finished.

8. Done.

This is the explanation from the tutorial ‘How to Make a Tip Calculator with JavaScript’. Much luck.






Leave a Reply

Your email address will not be published.