11<!DOCTYPE html>
22< html lang ="en ">
33< head >
4- < meta charset ="UTF-8 ">
5- < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7- < title > Tip Calculator</ title >
8- < link rel ="stylesheet " href ="style.css ">
4+ < meta charset ="UTF-8 " / >
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " / >
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " / >
7+ < title > Tip Calculator</ title >
8+ < link rel ="stylesheet " href ="style.css " / >
99</ head >
1010< body >
11- < div class ="container ">
12- < h1 > Tip Calculator</ h1 >
13- < p > Enter the bill amount and tip percentage to calculate the total.</ p >
14- < label for ="bill "> Bill amount:</ label >
15- < input type ="number " id ="bill ">
16- < br />
17- < label for ="tip "> Tip percentage:</ label >
18- < input type ="number " id ="tip ">
19- < br />
20- < button id ="calculate "> Calculate</ button >
21- < br />
22- < label for ="total "> Total:</ label >
23- < span id ="total "> </ span >
11+ < div class ="container ">
12+ < h1 > Tip Calculator</ h1 >
13+ < p > Enter the bill amount and tip percentage to calculate the total.</ p >
14+
15+ < form id ="tip-form " autocomplete ="off ">
16+ < div class ="form-group ">
17+ < label for ="bill "> Bill Amount</ label >
18+ < input type ="number " id ="bill " name ="bill " placeholder ="e.g. 100 " required />
19+ </ div >
2420
21+ < div class ="form-group ">
22+ < label for ="tip "> Tip Percentage</ label >
23+ < input type ="number " id ="tip " name ="tip " placeholder ="e.g. 15 " required />
24+ </ div >
25+
26+ < button type ="submit " id ="calculate "> Calculate</ button >
27+ </ form >
28+
29+ < div id ="result ">
30+ < label > Total:</ label >
31+ < span id ="total "> $0.00</ span >
2532 </ div >
26- < script src ="index.js "> </ script >
33+ </ div >
34+
35+ < script src ="index.js "> </ script >
2736</ body >
28- </ html >
37+ </ html >
0 commit comments