63 lines
2.8 KiB
HTML
63 lines
2.8 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>Point Finder</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<script>
|
||
|
|
// Change the dialog labels if computation changes
|
||
|
|
function onComputationSelect(computation) {
|
||
|
|
alert("Selected " + computation);
|
||
|
|
if (computation === "area") {
|
||
|
|
document.getElementById('input1Text').innerHTML = "Enter the base: ";
|
||
|
|
document.getElementById('input2Text').innerHTML = "Enter the height: ";
|
||
|
|
} else if (computation === "pointDistance") {
|
||
|
|
document.getElementById('output').innerHTML;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onClick() {
|
||
|
|
// Determine what the user wants us to do.
|
||
|
|
if (selectComputation.value === "area") {
|
||
|
|
getArea();
|
||
|
|
} else if (selectComputation.value === "pointDistance") {
|
||
|
|
getPointDistance();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getInput() {
|
||
|
|
var input1Val = parseFloat(input1.value);
|
||
|
|
var input2Val = parseFloat(input2.value);
|
||
|
|
return [input1Val, input2Val];
|
||
|
|
}
|
||
|
|
function getArea() {
|
||
|
|
var [baseVal, heightVal] = getInput();
|
||
|
|
var area = (.5 * baseVal) * heightVal;
|
||
|
|
document.getElementById('output').innerHTML = "The area of " + baseVal + " and " + heightVal + " is " + area;
|
||
|
|
}
|
||
|
|
function getPointDistance() {
|
||
|
|
var [baseVal, heightVal] = getInput();
|
||
|
|
|
||
|
|
}
|
||
|
|
function calculatePower() {
|
||
|
|
alert("Not implemented!");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<label><label id="input1Text">Select a computation type to continue.</label><input type="text" id="input1" name="input1"></label><br>
|
||
|
|
<label><label id="input2Text">Select a computation type to continue.</label><input type="text" id="input2" name="input2"></label><br>
|
||
|
|
<label for="selectComputation">What do you want to do?</label>
|
||
|
|
<select name="selectComputation" id="selectComputation"><br>
|
||
|
|
<option value="" selected>-- Select computation type --</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()">
|
||
|
|
</body>
|
||
|
|
</html>
|