100 lines
5.8 KiB
HTML
100 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" href="res/css/tachyons.min.css" />
|
|
<link rel="stylesheet" href="res/css/app.css" />
|
|
<title>Resistor Color Code Calculator</title>
|
|
<script src="res/js/vue.min.js"></script>
|
|
</head>
|
|
<body class="sans-serif bg-near-white">
|
|
<div id="app" class="ph4 pv2 mw7 w-100 center">
|
|
<div class="cf ph2-ns">
|
|
<div class="fl w-100 w-100-ns pa2 tc">
|
|
<p class="f2 black-80 mb0">{{ resistorValueText }}</p>
|
|
<p class="mb4 black-60 mb0">Resistor Value</p>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns bb b--black-10">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>No. of Bands:</span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="bandCountSelection" class="w-30" v-model="bandCount" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="band in availableBands" v-bind:value="band.id" v-bind:selected="bandCount == band.id">{{ band.text }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>1<sup>st</sup> Band</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band1).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band1" class="w-30" v-model="selectedColors.band1" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in getValueColors(bandCount == 0)" v-bind:value="color.color" v-bind:selected="selectedColors.band1 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>2<sup>nd</sup> Band</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band2).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band2" class="w-30" v-model="selectedColors.band2" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in getValueColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band2 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns" v-if="bandCount != 0 && bandCount != 1">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>3<sup>rd</sup> Band</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band3).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band2" class="w-30" v-model="selectedColors.band3" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in getValueColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band3 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>Multiplier</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band4).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band4" class="w-30" v-model="selectedColors.band4" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in bandColors" v-bind:value="color.color" v-bind:selected="selectedColors.band4 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns" v-if="bandCount != 0">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>Tolerance</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band5).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band5" class="w-30" v-model="selectedColors.band5" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in getToleranceColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band5 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="cf ph2-ns" v-if="bandCount == 3">
|
|
<div class="fl w-50 pa2 tr">
|
|
<span>Tempco (PPM)</span>
|
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band6).hex }"></span>
|
|
</div>
|
|
<div class="fl w-50 pa2">
|
|
<select id="band2" class="w-30" v-model="selectedColors.band6" style="min-width: 100px;" v-on:change="computeResistorValue">
|
|
<option v-for="color in getPPMColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band6 == color.color">{{ color.color }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="res/js/app.js"></script>
|
|
</body>
|
|
</html>
|