JSFiddle - React, Tailwind, and code Playground

by Ryan Morris

HTML

<form id="myForm">
    
    <input type="hidden" value="" name="secret" />
    
    <input type="text" placeholder="describe your issue" name="issue" />
    
    <label>Priority:</label>
    <select name="priority">
        <option value="0">Low</option>
        <option value="1">Medium</option>
        <option value="2">High</option>
    </select>
    
    <label>Are you my boss?</label>
    <input type="checkbox" value="1" name="is_boss" />
        
    <input type="submit" value="submit" />
    
</form>

CSS

body{
    font-size:12px;
}

input,select{
    display:block;
    margin-bottom:10px;
}

input[type=submit] {
 margin-top:10px;   
}
}

JavaScript

// Add two event listeners to the form and/or its inputs

// One event listener will check to see if the user types in "urgent" to the issue description, and if so, will increase the priority automatically AND color the form with a red border and/or background.
// Expect to use:
// the "input" event
// "change" event
// $(selector)
// new RegExp("urgent") and/or /urgent/.test()
// .css()
// .on()
// .val()
// element.checked (can be true/false)

var re = new RegExp("urgent");
var form = $("form");

$("input[name='issue']").on('input', function() {
    if (re.test(this.value)) {
        form.css({"background-color":"red"});
        $("select[name='priority']").val(2);
    }
});

// One event listener will check if the user check the "is_boss" checkbox, and if so, will force priority to be high. Otherwise it will change the value back to low (when unchecked). 
$("input[name='is_boss']").on('change', function() {
    if (this.checked) {
         $("select[name='priority']").val(2); 
    }
});