-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (69 loc) · 3.69 KB
/
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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="google-site-verification" content="hwIIUiqoyg7EeVwo8zjTaJb8-0baGDISVFTwXreNg1E" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content ='EMI calculator'>
<meta name="theme-color" content="#87CEEB"/>
<title> EMI calculator </title>
<!-- styesheet ilnks -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css">
<!-- script links -->
<script src ="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src ="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" defer></script>
<script src ="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js" defer></script>
<script src ="index.js" defer></script>
<!-- Service worker-->
<script>
if ('serviceWorker' in navigator){
window.addEventListener('load',()=>{
navigator.serviceWorker.register("/sw.js",{scope:'/index.html'}).then(reg =>{
console.log('Registered!',reg);
}).catch(err =>{
console.log('Registration failed',err);
});
console.log('service worker registered');
});
}
</script>
<!-- add a manifest-->
<link rel = 'manifest' href ='manifest.json'>
</head>
<body style="color : lightyellow">
<!--HEADING-->
<div class="myheader" style="color : black;">
<h1>EMI calculator</h1>
</div>
<!-- container -->
<div class="mycontainer">
<!-- form to take user prompt -->
<div class="myform" style ='background-color: rgb(255, 86, 86);'>
<label for="amt"> Enter the Amount </label>
<input type="number" id="amt"><br>
<label for="rate"> Enter the annual rate of interest % </label>
<input type="number" id="rate"><br>
<label for="time"> Enter the time period in years </label>
<input type="number" id="time"><br>
<button id="compute">compute</button>
</div>
<!-- A summary of the results -->
<div class="myresults" style="background-color : rgb(66, 187, 248);">
<h3 class="myamount"></h3>
<h3 class ="mymonthly"></h3>
<h3 class="myinterest"></h3>
</div>
<!-- monthly installments data -->
<div class ='mydisplay' style="background-color: rgb(254, 254, 254);">
<h3>the monthly interests to be paid are shown in the table below</h3>
<!-- a div to hold the table, and the wrapper classes induced by jquery -->
click on 'amount paid so far'
<div class="tableHolder">
<!-- after calculating results, the datatable and related wrapper classes will be added to this div -->
</div>
</div>
</div>
</body>
</html>