In case you don’t know, a hue inverter takes a value between 0 and 360, adds 180 if the input is less than or equal to 180, and subtracts 180 if the input is greater than 180. I added some JavaScript to do that operation, but it isn’t working.
Here is the UI (there is no CSS yet): Click to see the image.
function invertHue() {
const inputHue = Number(document.getElementById("hue-i").value);
const outputHue = document.getElementById("hue-o").textContent;
var result;
try {
if (inputHue <= 180 && inputHue > 0) {
result = inputHue + 180;
outputHue = result;
} else if (inputHue > 180 && inputHue <= 360) {
result = inputHue - 180;
outputHue = result;
} else {
window.alert("The hue must be between 0 and 360.");
}
} catch (error) {
window.alert("There was an issue.");
}
}
<div class="input">
<input type="text" id="hue-i" placeholder="Enter hue here...">
<button id="invert-btn" onclick="invertHue()">Invert</button>
</div>
<div class="output">
<p id="hue-o">Inverted hue will appear here...</p>
</div>
What is going wrong in the code?
(p.s. I am using VS Code for my editor.)