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="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">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;   
}

.warning{
  background-color:#ff9900;
  border: 1px solid red;
  color: white;
}

.low-priority{
 background-color:#ccc;
}
.high-priority{
    background-color:#f90;
}




.changed{
 outline: 1px solid red;

JavaScript

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

// Expect to use:
//     the "input" event
//     "change" event
//     $(selector)
//     new RegExp("urgent") and/or /urgent/.test()
//     .css()
//     .on()
//     .val()
//     element.checked property, can be true or false

// Part 1
//
// 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.
    
var formEl = $("#myForm");

$("select[name='priority']").on('change', function() {
   
    switch($(this).val()) {
     
        case "low":
            
            formEl.addClass("low-priority");
            formEl.removeClass("high-priority");
            break;
            
        case "high":
            
             formEl.addClass("high-priority");
            formEl.removeClass("low-priority");
            
            break;
            
    }
    
});

$("input[name='issue']").on("input", function(e) {
    
    var value = $(this).val();
    
    var urgentRe = new RegExp("urgent"); // /urgent/
    
    if (urgentRe.test(value)) {
        
        $(this).addClass("warning");
        
        $("select[name='priority']")
            .val("high")
            .addClass("changed");
        
    } else {
     
        $(this).removeClass("warning");
        
    }
    
});

// Part 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).