<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<?!= HtmlService.createHtmlOutputFromFile('CSS_Main_Form').getContent(); ?>
</head>
<body>
<?!= HtmlService.createHtmlOutputFromFile('HTML_Body').getContent(); ?>
</body>
<?!= HtmlService.createHtmlOutputFromFile('JS_Main_Form').getContent(); ?>
<div id="idSpnr" class="spinner"></div>
</html>
<form name = "VoltDiv">
<b><h1>Voltage Divider</h1></b>
<div style="clear:both;"> </div>
<label><p>VIN (V)</p></label>
<value style = "width:40%"><input type="number" inputmode="decimal" name="vin"></value><br>
<label><p>R1 (Ω)</p></label>
<value><input type="number" inputmode="decimal" name="r1"></value>
<mod><select id = "ohmsR1" onchange="clearIt(this)">
<option>Ω</option>
<option>KΩ</option>
<option>MΩ</option>
</select></mod><br>
<label><p>R2 (Ω)</p></label>
<value><input type="number" inputmode="decimal" name="r2"></value>
<mod><select id ="ohmsR2" onchange="clearIt(this)">
<option>Ω</option>
<option>KΩ</option>
<option>MΩ</option>
</select></mod><br>
<label><p>VOUT (V)</p></label>
<value style = "width:40%"><input type="number" inputmode="decimal" name="vout"></value><br>
<div style="clear:both;"> </div>
<input type="button" value="Calculate" onClick="calculate()">
<input type="reset" value="Reset"><br>
</form>
<div style="clear:both;"> </div>
<form name = "VoltDiv Diagram">
<img src="https://drive.google.com/uc?export=download&id=1OTKS9MHsEcHBKTQQFMXKIDIgwpqaRYAZ">
</form>
<script type="text/javascript">
function calculate()
{
var vin, r1, r2, vout, ohmsR1, ohmsR2, mult1, mult2;
var vinResult, r1Result, r2Result, voutResult;
// Read the variables into the script from the HTML form
vin = Number(document.VoltDiv.vin.value);
r1 = Number(document.VoltDiv.r1.value);
r2 = Number(document.VoltDiv.r2.value);
vout = Number(document.VoltDiv.vout.value);
ohmsR1 = document.getElementById("ohmsR1").value;
ohmsR2 = document.getElementById("ohmsR2").value;
if (ohmsR1 == "KΩ") { mult1 = 1000; }
else if (ohmsR1 == "MΩ") { mult1 = 1000000; }
else { mult1 = 1; }
if (ohmsR2 == "KΩ") { mult2 = 1000; }
else if (ohmsR2 == "MΩ") { mult2 = 1000000; }
else { mult2 = 1; }
if (r1 > 0 & r2 > 0 & vout > 0) { vinResult = vout * (((r1 * mult1) + (r2 * mult2)) / (r2 * mult2)); }
else { vinResult = vin; }
if (vin > 0 & r2 > 0 & vout > 0) { r1Result = ((vin / vout) - 1) * (r2 * mult2); }
else { r1Result = r1; }
if (vin > 0 & r1 > 0 & vout > 0) { r2Result = (1 / ((vin / vout) - 1)) * (r1 * mult1); }
else { r2Result = r2; }
if (vin > 0 & r1 > 0 & r2 > 0) { voutResult = vin * ((r2 * mult2) / ((r1 * mult1) + (r2 * mult2))); }
else { voutResult = vout; }
document.VoltDiv.vin.value = vinResult.toFixed(6);
document.VoltDiv.r1.value = r1Result.toFixed(3);
document.VoltDiv.r2.value = r2Result.toFixed(3);
document.VoltDiv.vout.value = voutResult.toFixed(6);
}
</script>
<style type="text/css">
body
{
text-align: center;
}
form
{
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;
}
img
{
width:80%;
height:auto;
}
label
{
display: inline-block;
overflow: hidden;
width: 38%;
padding: 5px;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid gray;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
background: #2A6881;
font-size: 100%;
}
value
{
display: inline-block;
overflow: hidden;
width: 30%;
padding: 5px;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
font-size: 100%;
}
mod
{
display: inline-block;
overflow: hidden;
width: 28%;
padding: 5px;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
font-size: 100%;
}
input[type="number"], textarea, select
{
text-align: center;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 6px;
margin-bottom: -5px;
outline: none;
border: 1px solid gray;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
font-size: 100%;
/* removes up down arrows from number input fields (Firefox)*/
-moz-appearance: textfield;
}
/* removes arrow from select fields */
select
{
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
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;
font-weight:600;
-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;
}
p
{
font-size: 100%;
line-height: 100%;
margin-top: 1px;
margin-bottom: 1px;
color: #ffffff;
font: 100% Arial, Helvetica, sans-serif;
}
h1
{
font-size: 100%;
line-height: 100%;
margin-top: 1px;
margin-bottom: 1px;
color: #000000;
font: 100% Arial, Helvetica, sans-serif;
font-weight: 600;
}
/* removes up down arrows from number input fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
</style>