115 lines
6.2 KiB
HTML
115 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title id="title"></title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<label id="input1Field"><label id="input1Text"></label><input type="text" id="input1" name="input1" value=""><br></label>
|
|
<label id="input2Field"><label id="input2Text"></label><input type="text" id="input2" name="input2" value=""><br></label>
|
|
<label id="input3Field"><label id="input3Text"></label><input type="text" id="input3" name="input3" value=""><br></label>
|
|
<label id="input4Field"><label id="input4Text"></label><input type="text" id="input4" name="input4" value=""><br></label>
|
|
<label for="selectComputation">What do you want to do?</label>
|
|
<select name="selectComputation" id="selectComputation"><br>
|
|
<option onclick="onComputationSelect(this.value);" value="nothingSelected" selected>-- Select computation type --</option>
|
|
<option onclick="onComputationSelect(this.value);" value="calculatePower">Get magnitude of power</option>
|
|
<option onclick="onComputationSelect(this.value);" value="area">Get Area</option>
|
|
<option onclick="onComputationSelect(this.value);" value="pointDistance">Get Point Distance</option>
|
|
</select>
|
|
<br>
|
|
<label id="output"></label><br>
|
|
<input type="button" value="Compute!" onclick="onClick()">
|
|
<script>
|
|
onComputationSelect("nothingSelected");
|
|
|
|
// Change the dialog labels if computation changes
|
|
function onComputationSelect(computation) {
|
|
//alert("Selected " + computation);
|
|
if (computation === "nothingSelected") {
|
|
console.log("Hiding text box...");
|
|
document.getElementById("input1").hidden = true;
|
|
} else {
|
|
console.log("Unhiding text box...");
|
|
document.getElementById("input1").hidden = false;
|
|
}
|
|
switch (computation) {
|
|
case "nothingSelected":
|
|
document.getElementById('title').innerHTML = "Calculator";
|
|
input1Field.hidden = false;
|
|
input2Field.hidden = true;
|
|
input3Field.hidden = true;
|
|
input4Field.hidden = true;
|
|
document.getElementById('input1Text').innerHTML = "Select a computation type to continue. ";
|
|
break;
|
|
case "area":
|
|
document.getElementById('title').innerHTML = "Calculator | Area";
|
|
input1Field.hidden = false;
|
|
input2Field.hidden = false;
|
|
input3Field.hidden = true;
|
|
input4Field.hidden = true;
|
|
document.getElementById('input1Text').innerHTML = "Enter the base: ";
|
|
document.getElementById('input2Text').innerHTML = "Enter the height: ";
|
|
break;
|
|
case "pointDistance":
|
|
document.getElementById('title').innerHTML = "Calculator | Point Distance";
|
|
input1Field.hidden = false;
|
|
input2Field.hidden = false;
|
|
input3Field.hidden = false;
|
|
input4Field.hidden = false;
|
|
document.getElementById('input1Text').innerHTML = "Enter x1: ";
|
|
document.getElementById('input2Text').innerHTML = "Enter y1: ";
|
|
document.getElementById('input3Text').innerHTML = "Enter x2: ";
|
|
document.getElementById('input4Text').innerHTML = "Enter y2: ";
|
|
break;
|
|
case "calculatePower":
|
|
document.getElementById('title').innerHTML = "Calculator | Power";
|
|
input1Field.hidden = false;
|
|
input2Field.hidden = false;
|
|
input3Field.hidden = true;
|
|
input4Field.hidden = true;
|
|
document.getElementById('input1Text').innerHTML = "Enter base: ";
|
|
document.getElementById('input2Text').innerHTML = "Enter power: ";
|
|
break;
|
|
|
|
}
|
|
}
|
|
function onClick() {
|
|
// Determine what the user wants us to do.
|
|
switch (selectComputation.value) {
|
|
case "area":
|
|
getArea();
|
|
break;
|
|
case "pointDistance":
|
|
getPointDistance();
|
|
break;
|
|
case "calculatePower":
|
|
calculatePower();
|
|
break;
|
|
}
|
|
}
|
|
function getArea() {
|
|
var [baseVal, heightVal] = [parseFloat(input1.value), parseFloat(input2.value)];
|
|
var area = (.5 * baseVal) * heightVal;
|
|
document.getElementById('output').innerHTML = "The area of " + baseVal + " and " + heightVal + " is " + area;
|
|
}
|
|
function getPointDistance() {
|
|
var [x1, y1, x2, y2] = [parseFloat(input1.value), parseFloat(input2.value), parseFloat(input3.value), parseFloat(input4.value)];
|
|
var a = (x2 - x1);
|
|
var b = (y2 - y1);
|
|
var distance = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
|
|
document.getElementById('output').innerHTML = "The distance of point (" + x1 + ", " + y1 + ") to point (" + x2 + ", " + y2 + ") is " + distance;
|
|
}
|
|
function calculatePower() {
|
|
var [base, power] = [parseFloat(input1.value), parseFloat(input2.value)];
|
|
var output = Math.pow(base, power);
|
|
document.getElementById('output').innerHTML = "The value of " + base + "^" + power + " is " + output;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|