Welcome folks today in this blog post we will be building a tip food calculator in html5 and css3 and javascript. All the full source code of the application is given below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Tip calculator</title> </head> <body> <div class="overlay"> <!-- MAIN --> <main> <form action=""> <h1>Tip Calculator</h1> <div class="group"> <label for="bill-value">How much was your bill?</label> <input type="number" name="bill-value" id="bill-value" class="fields" /> </div> <div class="group"> <label for="sharing">How many people share the bill?</label> <input type="number" name="sharing" id="sharing" class="fields" /> </div> <div class="group"> <p>How was your service?</p> <select name="dropdown" id="dropdown" placeholder="Select one..." class="fields" > <option value="">Select here...</option> <option value="10">10%</option> <option value="15">15%</option> <option value="20">20%</option> </select> </div> <button type="button" id="calculate">Calculate</button> </form> <div class="bottom"></div> </main> </div> <!-- RESULT --> <div class="result hidden"> <p>Tip amount: <span id="tip">0</span></p> <p>Total amount: <span id="total">0</span></p> <p>Each person owes: <span id="owes">0</span></p> <button id="btn-new">New</button> </div> <script src="script.js"></script> </body> </html> |
And now make an style.css file and copy paste the following code
]
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); body { margin: 0; padding: 0; background: url(../img-bg.jpg) no-repeat center/cover; background-attachment: fixed; background-color: #f4f4f4; position: relative; font-family: 'Lato', sans-serif; font-size: 20px; } /* MAIN */ main { width: 40%; background-color: #eee; margin: auto; border-radius: 25px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } h1 { background-color: #5f5f5f; margin: 0; border-radius: 25px 25px 0 0; line-height: 1.8; } .bottom { background-color: #5f5f5f; height: 3.5rem; margin-top: 2rem; border-radius: 0 0 25px 25px; } p { margin: 0; } input, select { font-size: 20px; border-radius: 5px; margin-top: 1rem; } .group { display: flex; flex-direction: column; margin: 1rem 3rem; } .overlay { height: 100vh; background-color: rgba(0, 0, 0, 0.7); } button { background-color: #5f5f5f; color: #fff; border: none; border-radius: 5px; padding: 1rem 2rem; font-size: 20px; width: 175px; } button:hover { background-color: #777777; cursor: pointer; } /* RESULT */ .result { background-color: #eee; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3rem 4rem; border: 2px solid #000; border-radius: 25px; text-align: center; } .result p { margin: 1rem; } .hidden { display: none; } .hidden { color: hsl(0, 58%, 68%); } |
And now make an script.js file and copy paste the following code
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
'use strict'; // CALCULATOR const billInput = document.querySelector('#bill-value'); const peopleInput = document.querySelector('#sharing'); const percentageInput = document.querySelector('#dropdown'); document.querySelector('#calculate').addEventListener('click', function () { const billValue = Number(billInput.value); const people = Number(peopleInput.value); const percentage = Number(percentageInput.value); if (billValue == '' || people == '' || percentage == '') { if (billValue == '') { billInput.style.background = '#dd8080'; } else if (people == '') { peopleInput.style.background = '#dd8080'; } else if (percentage == '') { percentageInput.style.background = '#dd8080'; } } else { billInput.style.background = '#fff'; peopleInput.style.background = '#fff'; percentageInput.style.background = '#fff'; const tip = billValue * (percentage / 100); const total = tip + billValue; const owes = total / people; document.querySelector('.result').classList.remove('hidden'); document.querySelector('#tip').textContent = tip; document.querySelector('#total').textContent = total; document.querySelector('#owes').textContent = owes; } }); //NEW BUTTON document.querySelector('#btn-new').addEventListener('click', function () { document.querySelector('.result').classList.add('hidden'); billInput.value = ''; peopleInput.value = ''; percentageInput.value = ''; }); |
And now if you open index.html file inside the browser you will see the following output
