Tip calculator Code in Javascript.
We need three files.
- index.php
- min.js
- style.css
index.php
<!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="./css/style.css" />
<title>Tip calculator</title>
</head>
<body>
<div class="overlay">
<!-- MAIN -->
<main>
<form action="">
<h1>Accurate Tip Calculator</h1>
<div class="group">
<label for="bill-value">your's bill</label>
<input
type="number"
name="bill-value"
id="bill-value"
class="fields"
/>
</div>
<div class="group">
<label for="sharing">Total No of customer who paid 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="">Plz select first ...</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>Total 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="./js/script.js"></script>
</body>
</html>
script.js
'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 = '';
});
style.css
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body {
margin-left: 10%;
margin-right: 10%;
padding: 0;
background: url(../img-bg.jpg) no-repeat center/cover;
background-attachment: fixed;
background-color: #2e2626;
position: relative;
font-family: 'Lato', sans-serif;
font-size: 30px;
font-style: italic;
}
/* MAIN */
main {
width: 90%;
background-color: rgb(59, 7, 7);
margin: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:left;
}
p {
margin: 0;
}
input,
select {
font-size: 20px;
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: #f32929;
color: #fff;
border: none;
margin-left: 10%;
font-size: 20px;
width: 175px;
}
button:hover {
background-color: #0a0a0a;
cursor: pointer;
}
/* RESULT */
.result {
background-color: rgba(38, 97, 48, 0.781);
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
padding: 3rem 4rem;
border: 4px solid #000;
text-align: right;
}
.result p {
margin: 1rem;
}
.hidden {
display: none;
}
h1 {
background-color: #ac594e3b;
margin: 0;
line-height: 2;
}
.bottom {
background-color: #ac594e3b;
height: 3.5rem;
margin-top: 2rem;
}