Resistor Colors Code

INDEX

<!DOCTYPE html>

<html>

<head>

<?!= HtmlService.createHtmlOutputFromFile('CSS_Main_Form').getContent(); ?>

</head>

<body>

<?!= HtmlService.createHtmlOutputFromFile('HTML_Body').getContent(); ?>

</body>

<?!= HtmlService.createHtmlOutputFromFile('JS_Main_Form').getContent(); ?>

</html>

HTML

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table><br>

</form>

JAVASCRIPT

function calculate()

{

// initialize the resistor bands vairables.

var band1, band2, band3, band4;

// copy in the user input from the ResistorCodes form.

band1 = Number(document.ResistorCodes.band1.value);

band2 = Number(document.ResistorCodes.band2.value);

band3 = Number(document.ResistorCodes.band3.value);

band4 = Number(document.ResistorCodes.band4.value);

// Do the math for the results to be passed back to the HTML form.

var ohms, kohms, mohms, gohms;

ohms = (band1 + "" + band2)*(band3);

kohms = (((band1 + "" + band2)*(band3))/1000);

mohms = (((band1 + "" + band2)*(band3))/100000);

gohms = (((band1 + "" + band2)*(band3))/10000000);

// Check if band multiplier value is in speicific ranges for KΩ, MΩ, and GΩ values.

// If it is in those ranges adjust the output for readability.

if(band3 < 100)

{

document.ResistorCodes.rCode.value = ohms + "Ω";

document.ResistorCodes.toleranceMinus.value = (ohms - ((ohms * band4) / 100)).toFixed(2) + "Ω";

document.ResistorCodes.tolerancePlus.value = (ohms + ((ohms * band4) / 100)).toFixed(2) + "Ω";

}

else if(band3 < 100000)

{

document.ResistorCodes.rCode.value = kohms + "KΩ";

document.ResistorCodes.toleranceMinus.value = (kohms - ((kohms * band4) / 100)).toFixed(2) + "KΩ";

document.ResistorCodes.tolerancePlus.value = (kohms + ((kohms * band4) / 100)).toFixed(2) + "KΩ";

}

else if(band3 < 10000000)

{

document.ResistorCodes.rCode.value = mohms + "MΩ";

document.ResistorCodes.toleranceMinus.value = (mohms - ((mohms * band4) / 100)).toFixed(2) + "MΩ";

document.ResistorCodes.tolerancePlus.value = (mohms + ((mohms * band4) / 100)).toFixed(2) + "MΩ";

}

else

{

document.ResistorCodes.rCode.value = gohms + "GΩ";

document.ResistorCodes.toleranceMinus.value = (gohms - ((gohms * band4) / 100)).toFixed(2) + "GΩ";

document.ResistorCodes.tolerancePlus.value = (gohms + ((gohms * band4) / 100)).toFixed(2) + "GΩ";

}

</script>

CSS

body

{

text-align: center;

}

table

{

width:80%;

padding:30px;

margin: auto;

background: #FFF;

border-radius: 10px;

-webkit-border-radius:10px;

-moz-border-radius: 10px;

box-shadow: 0px 0px 10px #524f49;

-moz-box-shadow: 0px 0px 10px #524f49;

-webkit-box-shadow: 0px 0px 10px #524f49;

}

th, td

{

border: 1px solid #257C9E;

}

input[type="button"], input[type="reset"]

{

background: #73AD21;

padding: 8px 20px 8px 20px;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

color: #fff;

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);

font: 100% Arial, Helvetica, sans-serif;

-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);

-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);

box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);

border: 1px solid #257C9E;

font-size: 100%; /* button size */

-moz-appearance: none;

-webkit-appearance: none;

}

input[type="button"]:hover, input[type="reset"]:hover

{

background: #2A6881;

-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);

-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);

box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);

-moz-appearance: none;

-webkit-appearance: none;

}

</style>