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>
<title>Page Title</title>
</head>
<body>
<script type = "text/javascript"></script>
<div id="container">
<div id="calculator">
<div id="form">
<h1 class="px">TIP CALCULATOR</h1>
<h2 class="px">Write your bill amount in rupees</h2>
<input id="billAmt" input type="number" placeholder="Bill Amount">
<h3 class="px">How was the service? <select id="servicequality">
<option value="0">Choose option</option>
<option value="0.0">0% </option>
<option value="0.1">10% </option>
<option value="0.2">20% </option>
<option value=0.3">30% </option>
</select></h3>
<button type="button" id="calculate">Calculate</button> <div id="button"></div>
<h4 class="px">Total Tip- <span id="Totaltip">000</span> </h4>
</div>
<h5 class="px">Total Bill- <span id=totalbill>000</span></h5>
</form>
</body>
</html>
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 { height: 400px; width: 350px; margin: 100px auto; background: #f7f7f7; box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1); border-radius: 20px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
background-color:lightgreen;
margin-top:2px;}
body {
background-color:skyblue;
text-align:center;
}
h3.px{
color:brown;
font-weight:bolder;
font-family:arial;
margin-right:-30px;
}
button{
background-color:red;
width:250px;
height:40px;
display:block;
border-radius:5px;
font-size:15pt;
color:white;
}
h4.px{
color:brown;
font-weight:bolder;
font-size:15pt;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
window.onload=function(){
var $=function(v){return document.getElementById(v)}
var billAmt=$('billAmt'),servicequality=$('servicequality'),Totaltip=$('Totaltip'),totalbill=$('totalbill'),calculate=$('calculate');
var Calculatetip=function(){
var tip=parseFloat(billAmt.value)*parseFloat(servicequality.value),amt=parseFloat(billAmt.value)+tip;
totalbill.innerHTML=amt;
Totaltip.innerHTML=tip;
}
calculate.onclick=Calculatetip;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run