<!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 = "OhmsLaw">
<p>Voltage (V)</p> <br><input type="number" inputmode="decimal" name="voltage"><br>
<p>Current (A)</p> <br><input type="number" inputmode="decimal" name="current"><br>
<p>Resistance (Ω)</p> <br><input type="number" inputmode="decimal" name="resistance"><br>
<p>Power (W)</p> <br><input type="number" inputmode="decimal" name="power"><br><br>
<input type="button" value="Calculate" onClick="calculate()">
<input type="reset" value="Reset"><br>
</form>
<script type="text/javascript">
function calculate()
{
var v, i, r, w, result;
// Read the variables into the script from the HTML form
v = Number(document.OhmsLaw.voltage.value);
i = Number(document.OhmsLaw.current.value);
r = Number(document.OhmsLaw.resistance.value);
w = Number(document.OhmsLaw.power.value);
// Allow for power to be calculated after voltage or current is calculated
document.OhmsLaw.power.value = v * i;
// Maintain the field value or do a calculation
if (document.OhmsLaw.voltage.value.length == 0)
{ document.OhmsLaw.voltage.value = r * i; }
else
{ document.OhmsLaw.voltage.value = v; }
if (document.OhmsLaw.current.value.length == 0)
{ document.OhmsLaw.current.value = v / r; }
else
{ document.OhmsLaw.current.value = i; }
if (document.OhmsLaw.resistance.value.length == 0)
{ document.OhmsLaw.resistance.value = v / i; }
else
{ document.OhmsLaw.resistance.value = r; }
if (document.OhmsLaw.power.value.length == 0)
{ document.OhmsLaw.power.value = v * i; }
else
{ document.OhmsLaw.power.value = p; }
}
</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;
}
input[type="number"], textarea, select
{
text-align: center;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-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;
-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: 5px;
margin-bottom: 1px;
color: #000000;
font: 100% Arial, Helvetica, sans-serif;
}
</style>