JSFiddle - React, Tailwind, and code Playground

by Ryan Morris

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <h2>Issue tracker</h2>
    
    <div id="issues">
        <h3>Issues</h3>
    </div>

    <h4>Add an issue</h4>
    
    <form id="myForm" role="form">
        
        <input type="hidden" value="" name="secret" />
        
        <div class="form-group">
            <input type="text" placeholder="describe your issue" name="issue" class="form-control" />
        </div>
        
        <div class="form-group">
            <label>Priority:</label>
            <select name="priority" class="form-control">
                <option value="0">Low</option>
                <option value="1">Medium</option>
                <option value="2">High</option>
            </select>
        </div>
        
        <div class="checkbox">
            <label>
                <input type="checkbox" value="1" name="is_boss" />
                Are you my boss?
            </label>
            <p class="help-block">Be honest!</p>
        </div>
        
        <input type="submit" value="submit" class="btn btn-default"/>
    </form>
</div>

CSS

#issues{
    display:none;
}

.urgent{
    color:#f90;
}

.invalid{
    color:red;
}
}

.boss-level{
    background-color:lightblue;
    background-image: url('http://images4.fanpop.com/image/photos/16500000/Rainbows-rainbows-16556370-400-332.gif');
}

JavaScript

// Form Events with jQuery

// Part 1
// Submission
//
// When a new issue is submitted
// a.  Add a new "issue" element to the #issues div
//     You can add this as a list/list-item
//     Or as a table row (you'll need to set up the table)
// b.  Empty out the form after submission

$issuesEl = $("#issues");

$("#myForm").on('submit', function() {
   
    //console.log($(this).serializeArray());
    
    // run validation
    if (validate()) {
  
        var $newLi = $("<li></li>");
        
        $newLi.append($("input[name='issue']").val());
        
        var selectedPriority = $("select[name='priority']").val();
        
        var selectedText = $("select[name='priority'] option:selected").text();
        
        // "New Description (Priority)"
        $newLi.append(" (" + selectedText + ")");
        
        if (selectedPriority == 2) {
          $newLi.addClass("urgent");   
        }
        
        $issuesEl.append($newLi);
        
        $issuesEl.show();
        
        $(this).trigger("reset");
        
    }
    
   // e.preventDefault();
    return false;
    
});


// Part 2
// Validation
// 
// Using jQuery/JavaScript
// Add some basic validation rules to the form
// a.  Description field is required
// b.  When the user submits the form validation should be checked
// c.  When invalid, display a message to the user somewhere in the page, ex: "Description is required, try again!"
// d.  Bonus: Add a style to fields so that they have a red border when invalid

function validate() {
 
    var issueName = $("input[name='issue']").val();
    
    // check if empty
    if (!issueName) {
         $("input[name='issue']").addClass("invalid");
        return false;
    }
    
    return true;
    
}


// Part 3
// Being nice to users 
//
// If a user types in the word "urgent" to the description
// Then the form should auto-select a priority of "medium"
// And the background of the form should be set to a "lightred"


// Part 4
// Being nice...