Color change HTML
Although it's best to try and you should show your attempts, I assume you're stuck and cannot figure it out on your own. Below is a simple demonstration, if you enter a number in the input field which is below 25
it appears red, between 25-50
, orange, and above, it appears green.
It would be better if you can use this example to implement your understanding now, or customise this as you wish.
const input = document.getElementById('number')
input.onkeyup = function () {
let value = Number(input.value)
if (value < 25) input.style.color = "red"
// Here we check as long as the number is above 25, but below 50, we update to orange.
if (value > 25 && value <= 50) input.style.color = "orange"
if (value > 50) input.style.color = "green"
}
<input type="text" id="number">
This jquery example will come in handy.
$("#myinput").keyup(function() {
var myvalue = $(this).val();
if (myvalue <= 25) {
var color = "red";
} else if (myvalue > 25 && myvalue <= 50) {
var color = "orange";
} else {
var color = "green";
}
$(this).attr("style", "color:" + color);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="text" id="myinput">