70 lines
2.2 KiB
HTML
70 lines
2.2 KiB
HTML
|
<!-- retoor <retoor@molodetz.nl> -->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Calculator</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Calculator</h1>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Add / Subtract</legend>
|
||
|
|
<input type="number" id="left" placeholder="Left operand">
|
||
|
|
<input type="number" id="right" placeholder="Right operand">
|
||
|
|
<button onclick="calculate('add')">Add</button>
|
||
|
|
<button onclick="calculate('subtract')">Subtract</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Clamp</legend>
|
||
|
|
<input type="number" id="value" placeholder="Value">
|
||
|
|
<input type="number" id="low" placeholder="Low">
|
||
|
|
<input type="number" id="high" placeholder="High">
|
||
|
|
<button onclick="calculate('clamp')">Clamp</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Clamp to Byte</legend>
|
||
|
|
<input type="number" id="byte_value" placeholder="Value">
|
||
|
|
<button onclick="calculate('clamp_to_byte')">Clamp to Byte</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<p id="output"></p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function calculate(operation) {
|
||
|
|
const resultEl = document.getElementById('output');
|
||
|
|
let url;
|
||
|
|
if (operation === 'add' || operation === 'subtract') {
|
||
|
|
const left = document.getElementById('left').value;
|
||
|
|
const right = document.getElementById('right').value;
|
||
|
|
url = '/' + operation + '?left=' + encodeURIComponent(left) + '&right=' + encodeURIComponent(right);
|
||
|
|
} else if (operation === 'clamp') {
|
||
|
|
const value = document.getElementById('value').value;
|
||
|
|
const low = document.getElementById('low').value;
|
||
|
|
const high = document.getElementById('high').value;
|
||
|
|
url = '/clamp?value=' + encodeURIComponent(value) + '&low=' + encodeURIComponent(low) + '&high=' + encodeURIComponent(high);
|
||
|
|
} else if (operation === 'clamp_to_byte') {
|
||
|
|
const value = document.getElementById('byte_value').value;
|
||
|
|
url = '/clamp_to_byte?value=' + encodeURIComponent(value);
|
||
|
|
}
|
||
|
|
fetch(url)
|
||
|
|
.then(function(response) {
|
||
|
|
return response.json().then(function(data) {
|
||
|
|
if (!response.ok) {
|
||
|
|
resultEl.textContent = 'Error: ' + (data.error || 'Unknown error');
|
||
|
|
} else {
|
||
|
|
resultEl.textContent = 'Result: ' + data.result;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function() {
|
||
|
|
resultEl.textContent = 'Error: Network error';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|