-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (148 loc) · 9.37 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="4, 5 and 6 band resistor color code calculator." />
<meta name="keywords"
content="resistor calculator, resistor color code, resistor color code calculator, resistor color code calculator online, resistor colour code calculator, resistor colour code how to calculate, resistor colour code chart, resistor colour code calc, resistor colour code online, resistor colour code online calculator, resistor colour code, resistor colour codes" />
<title>Resistor Colour Code Calculator</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="resistor-calculator.css">
</head>
<body>
<div class="container clearfix">
<header>
<h1>Resistor Calculator</h1>
</header>
<div class="top-row clearfix">
<svg style="width:500px; height:220px" />
</div>
<div id="controls">
<div>
<label for="resistorBands">Number of bands:</label>
<select name="resistorBands" id="resistorBands" onchange="NumberOfBandSelection()">
<option value="4">4 Bands</option>
<option value="5">5 Bands</option>
<option value="6">6 Bands</option>
</select>
</div>
<br />
<div>
<div class="controls-section">
<div class="dropdown-container">
<div class="dropdown-control">
<div>
<label id="band1DropDownLabel" for="band1DropDown">Band 1:</label>
</div>
<select name="band1DropDown" id="band1DropDown" onchange="selectBand1()">
<option class="cb-none" value=""></option>
<option class="cw-black" value="0">0 Black</option>
<option class="cw-brown" value="1">1 Brown</option>
<option class="cw-red" value="2">2 Red</option>
<option class="cb-orange" value="3">3 Orange</option>
<option class="cb-yellow" value="4">4 Yellow</option>
<option class="cw-green" value="5">5 Green</option>
<option class="cw-blue" value="6">6 Blue</option>
<option class="cb-violet" value="7">7 Violet</option>
<option class="cw-grey" value="8">8 Grey</option>
<option class="cw-white" value="9">9 White</option>
</select>
</div>
<div class="dropdown-control">
<div>
<label id="band2DropDownLabel" for="band2DropDown">Band 2:</label>
</div>
<select name="band2DropDown" id="band2DropDown" onchange="selectBand2()">
<option class="cb-none" value=""></option>
<option class="cw-black" value="0">0 Black</option>
<option class="cw-brown" value="1">1 Brown</option>
<option class="cw-red" value="2">2 Red</option>
<option class="cb-orange" value="3">3 Orange</option>
<option class="cb-yellow" value="4">4 Yellow</option>
<option class="cw-green" value="5">5 Green</option>
<option class="cw-blue" value="6">6 Blue</option>
<option class="cb-violet" value="7">7 Violet</option>
<option class="cw-grey" value="8">8 Grey</option>
<option class="cb-white" value="9">9 White</option>
</select>
</div>
<div class="dropdown-control">
<div>
<label id="band3DropDownLabel" for="band3DropDown">Band 3:</label>
</div>
<select name="band3DropDown" id="band3DropDown" onchange="selectBand3()">
<option class="cb-none" value=""></option>
<option class="cw-black" value="0">0 Black</option>
<option class="cw-brown" value="1">1 Brown</option>
<option class="cw-red" value="2">2 Red</option>
<option class="cb-orange" value="3">3 Orange</option>
<option class="cb-yellow" value="4">4 Yellow</option>
<option class="cw-green" value="5">5 Green</option>
<option class="cw-blue" value="6">6 Blue</option>
<option class="cb-violet" value="7">7 Violet</option>
<option class="cw-grey" value="8">8 Grey</option>
<option class="cb-white" value="9">9 White</option>
</select>
</div>
</div>
</div>
<div class="controls-section">
<div class="dropdown-container">
<div class="dropdown-control">
<div>
<label id="multiplierDropDownLabel" for="multiplierDropDown">Multiplier:</label>
</div>
<select name="multiplierDropDown" id="multiplierDropDown" onchange="SelectMultiplier()">
<option class="cb-none" value=""></option>
<option class="cw-black" value="1">Black x1Ω</option>
<option class="cw-brown" value="10">Brown x10Ω</option>
<option class="cw-red" value="100">Red x100Ω</option>
<option class="cb-orange" value="1000">Orange x1kΩ</option>
<option class="cb-yellow" value="10000">Yellow x10kΩ</option>
<option class="cw-green" value="100000">Green x100kΩ</option>
<option class="cw-blue" value="1000000">Blue x1MΩ</option>
<option class="cb-violet" value="10000000">Violet x10MΩ</option>
<option class="cw-grey" value="100000000">Grey x100MΩ</option>
<option class="cb-white" value="1000000000">White x1GΩ</option>
<option class="cb-gold" value="0.1">Gold x0.1Ω</option>
<option class="cb-silver" value="0.01">Silver x0.01Ω</option>
</select>
</div>
<div class="dropdown-control">
<div>
<label id="toleranceDropDownLabel" for="toleranceDropDown">Tolerance:</label>
</div>
<select name="toleranceDropDown" id="toleranceDropDown" onchange="SelectTolerance()">
<option class="cb-none" value=""> </option>
<option class="cw-brown" value="1">Brown ±1%</option>
<option class="cw-red" value="2">Red ±2%</option>
<option class="cw-green" value="0.5">Green ±0.5%</option>
<option class="cw-blue" value="0.25">Blue ±0.25%</option>
<option class="cb-violet" value="0.1">Violet ±0.1%</option>
<option class="cw-grey" value="0.05">Grey ±0.05%</option>
<option class="cb-gold" value="5">Gold ±5%</option>
<option class="cb-silver" value="10">Silver ±10%</option>
</select>
</div>
<div class="dropdown-control">
<div>
<label id="tempCoDropDownLabel" for="tempCoDropDown">Temperature Coefficient:</label>
</div>
<select name="tempCoDropDown" id="tempCoDropDown" onchange="SelectTempCo()">
<option class="cb-none" value=""></option>
<option class="cw-brown" value="100">Brown 100ppm</option>
<option class="cw-red" value="50">Red 50ppm</option>
<option class="cb-orange" value="15">Orange 15ppm</option>
<option class="cb-yellow" value="25">Yellow 25ppm</option>
<option class="cw-blue" value="10">Blue 10ppm</option>
<option class="cb-violet" value="5">Violet 5ppm</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="resistor-calculator.js"></script>
</html>