html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<div class="container">
<h3 class="cal">
<small class="text-body-secondary">Tip Calculator</small>
</h3>
<div class="wrapper">
<p>Bill Amount</p>
<div class="input-group flex-nowrap">
<input type="text" id="amount" class="form-control" placeholder="Amount to be paid" aria-label="Username" aria-describedby="addon-wrapping">
<span class="input-group-text" id="addon-wrapping">₹</span>
</div>
<p style="margin-top: 10px;">How was the service ?</p>
<select id="services" class="form-select" aria-label="Default select example">
<option selected disabled hidden>Select</option>
<option value="0.25">25% - Top Notch</option>
Enter to Rename, Shift+Enter to Preview
css
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
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.wrapper {
padding: 20px;
}
select {
width: 100%;
}
button {
margin: 20px auto;
width: 150px;
height: 50px;
background-color: #20c8c8;
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
}
.tip {
text-align: center;
Enter to Rename, Shift+Enter to Preview
js
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
alert("pls subscribe my channel 🙂")
window.onload = () =>
{
document.querySelector('#calculate').onclick = calculateTip;
}
function calculateTip() {
let amount = document.querySelector('#amount').value;
let persons = document.querySelector('#persons').value;
let service = document.querySelector('#services').value;
if (amount === '' && service === 'Select') {
alert("Please enter valid values");
return;
}
if (persons === '1')
document.querySelector('#each').style.display = 'none';
else
document.querySelector('#each').style.display = 'block';
let total = (amount * service) / persons;
total = total.toFixed(2);
document.querySelector('.tip').style.display = 'block';
document.querySelector('#total').innerHTML = total;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Запуск