<!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 = "Resistors">
<b><h1>SERIES RESISTANCE</h1></b>
<div style="clear:both;"> </div>
<span2><p>R1 (Ω)</p></span2> <span><input type="number" inputmode="decimal" name="seriesR1"></span><br>
<span2><p>R2 (Ω)</p></span2> <span><input type="number" inputmode="decimal" name="seriesR2"></span><br>
<span2><p>Total Ω</p></span2> <span><input type="number" inputmode="decimal" name="seriesRTotal" disabled></span><br>
<div style="clear:both;"> </div>
<b><h1>PARALLEL RESISTANCE</h1></b>
<div style="clear:both;"> </div>
<span2><p>R1 (Ω)</p></span2> <span><input type="number" inputmode="decimal" name="parallelR1"></span><br>
<span2><p>R2 (Ω)</p></span2> <span><input type="number" inputmode="decimal" name="parallelR2"></span><br>
<span2><p>Total Ω </p></span2> <span><input type="number" inputmode="decimal" name="parallelRTotal" disabled></span><br>
<div style="clear:both;"> </div>
<input type="button" value="Calculate" onClick="calculate()">
<input type="reset" value="Reset"><br>
</form>
<script type="text/javascript">
function calculate()
{
var sr1, sr2, pr1, pr2, sResult, pResult;
// Read the variables into the script from the HTML form
sr1 = Number(document.Resistors.seriesR1.value);
sr2 = Number(document.Resistors.seriesR2.value);
pr1 = Number(document.Resistors.parallelR1.value);
pr2 = Number(document.Resistors.parallelR2.value);
sResult = (sr1 + sr2);
pResult = (1 / ((1 / pr1) + (1 / pr2)));
document.Resistors.seriesRTotal.value = sResult;
document.Resistors.parallelRTotal.value = pResult;
}
</script>
<style type="text/css">
<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;
}
span
{
display: inline-block;
overflow: hidden;
width: 40%;
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%;
}
span2
{
display: inline-block;
overflow: hidden;
width: 40%;
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%;
}
input[type="number"], textarea
{
text-align: center;
display: block;
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%;
}
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;
}
</style>