CSSPlusLegacy sandbox

Fill in a number and hit enter!

• Anything below 7 gives you a red border
• 7 produces a green border
• Anything greater than 7 produces an orange borde
• And as a safety measure, anything else produces a black border (such as text, etc)

// When the <input>'s value changes
$("input").change(function() {

    // If the value is less than 7, add a red border
    if ($(this).val() < 7) {
        $(this).css("border", "5px solid red");
    }
    
    // Else if the value is equal to 7, add a green border
    else if ($(this).val() == 7) {
        $(this).css("border", "5px solid green");
    }
    
    // Else if the value is greater than 7, add an orange border
    else if ($(this).val() > 7) {
        $(this).css("border", "5px solid orange");
    }
    
    // Else if the value is anything else, add a black border
    else {
        $(this).css("border", "5px solid black");
    }
});