-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (97 loc) · 3.47 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ratio Calculator</title>
<style>
*
{
text-align: center;
color: #BCB5A1;
font-variant: small-caps;
margin: auto
}
body, input
{
background-color: #1A1617
}
input
{
border: 1px dotted #BCB5A1;
padding: 5px
}
input[type=submit]
{
cursor: pointer;
border-style: solid;
display: block;
}
input[type=reset]
{
margin-top: 10px;
display: block;
}
h1, p, table
{
margin-bottom: 15px
}
</style>
<script>
function calculate() {
var f1 = document.getElementById('f1');
var f2 = document.getElementById('f2');
var f3 = document.getElementById('f3');
var f4 = document.getElementById('f4');
var a = parseFloat(f1.value);
var b = parseFloat(f2.value);
var c = parseFloat(f3.value);
var d = parseFloat(f4.value);
var emptyFields = 0;
if (isNaN(a)) emptyFields++;
if (isNaN(b)) emptyFields++;
if (isNaN(c)) emptyFields++;
if (isNaN(d)) emptyFields++;
if (emptyFields == 0)
{
alert("You already have the answer, don't you see?");
return;
}
else if (emptyFields != 1)
{
alert("Please fill in three of those fields!");
return;
}
if (isNaN(a)) f1.value = b * c / d;
else if (isNaN(b)) f2.value = a * d / c;
else if (isNaN(c)) f3.value = a * d / b;
else if (isNaN(d)) f4.value = b * c / a;
}
window.addEventListener('load', function() {
document.getElementById('calculator-form').addEventListener('submit', function (event) {
event.preventDefault();
calculate();
});
});
</script>
</head>
<body>
<form id="calculator-form">
<h1>Ratio Calculator</h1>
<p>Fill in three of the fields below and press<br/>Enter to reveal the value of the fourth field.</p>
<table>
<tr>
<td><input type="text" id="f1" title="Field 1" tabindex="1"/></td>
<td rowspan="2">=</td>
<td><input type="text" id="f3" title="Field 3" tabindex="3"/></td>
</tr>
<tr>
<td><input type="text" id="f2" title="Field 2" tabindex="2"/></td>
<td><input type="text" id="f4" title="Field 4" tabindex="4"/></td>
</tr>
</table>
<input type="submit" value="Calculate"/>
<input type="reset" value="Reset"/>
</form>
<a href='https://github.com/felladrin/ratio-calculator' style='position:fixed;padding:5px 45px;width:128px;top:50px;right:-50px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);box-shadow:0 0 0 3px #bcb5a1, 0 0 20px -3px rgba(0, 0, 0, 0.5);text-shadow:0 0 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.3);background-color:#bcb5a1;color:#ffffff;font-size:13px;font-family:sans-serif;text-decoration:none;font-weight:bold;border:2px dotted #ffffff;-webkit-backface-visibility:hidden;letter-spacing:1px;'>Fork me on GitHub</a>
</body>
</html>