-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.html
64 lines (55 loc) · 3.48 KB
/
tailwind.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
<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
-->
<html>
<head>
<title>Compound Interest Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
body{
background-color: whitesmoke;
}
.pane{
text-align: center;
background-color: powderblue;
font-family: Bahnschrift;
border: 2px groove deepskyblue;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 500px;
width: 600px;
box-shadow: 10px 5px 5px red;
}
</style>
</head>
<body class="bg-blue-700">
<div>
<div class="bg-white mx-auto text-center w-1/2 py-5 shadow-xl rounded-3xl my-96 max-w-2xl">
<h2 class="text-4xl font-semibold border-b pb-2 mx-6">Compound Interest Calculator</h2>
<!-- If the error attribute is present in the forwarded request, display it -->
<h3 class="bg-red-300 text-red-900 font-semibold text-xl w-80 rounded-lg my-2 mx-auto">${error}</h3>
<div>
<form action="/" method="post">
<div class="grid grid-cols-2 gap-4 my-5 mx-8">
<label for="principleamount" class="text-xl flex items-center">Principle Amount: <span class="text-gray-500 mx-1">$</span></label>
<input type="number" id="principleamount" name="principleamount" value="${principle}" class="w-full p-1 border-2 placeholder-blue-800 border-blue-700 appearance-none rounded-lg focus:outline-none focus:ring-2">
<label for="interest" class="text-xl flex items-center">Interest Rate (Percentage):</label>
<input type="number" id="interest" name="interest" min="1" max="100" value="${interest}" class="w-full p-1 border-2 placeholder-blue-800 border-blue-700 appearance-none rounded-lg focus:outline-none focus:ring-2">
<label for="years" class="text-xl flex items-center"># of Years:</label>
<input type="number" id="years" name="years" min="1" value="${years}" class="w-full p-1 border-2 placeholder-blue-800 border-blue-700 appearance-none rounded-lg focus:outline-none focus:ring-2">
<label for="compoundingperiod" class="text-xl flex items-center">Times per Year <span class="text-gray-500">(1 to 12)</span>:</label>
<input type="number" id="compoundingperiod" name="compoundingperiod" min="1" max="12" value="${compoundingPeriod}" class="w-full p-1 border-2 placeholder-blue-800 border-blue-700 appearance-none rounded-lg focus:outline-none focus:ring-2">
</div>
<button type="submit" class="bg-blue-300 text-xl font-semibold px-4 py-1 rounded-lg hover:bg-blue-800 hover:text-white">Calculate</button><br><br>
<p class="text-3xl font-mono text-green-600">Result: ${result}</p>
</form>
</div>
</div>
</div>
</body>
</html>