JSFiddle - React, Tailwind, and code Playground

by Seetha Chitti

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>
        <ul id="issueList">
            
        </ul>
    </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;
}

.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

$("#myForm").on('submit', function() {
   
    console.log($(this).serializeArray());
    var newIssue = $('input:text').val();
    var priority = $('select option:selected').text(); 
    var isBoss = $('input:checkbox').prop('checked');
    $('#issueList').append('<li>'+ formatIssue(priority,newIssue,isBoss) + '</li>');
    $('#issues').show();
    $('input:text').val('');
    $('select').val('0');
    return false;
    
});

function formatIssue(priority,description,isBoss){
    priority = priority || 'Low';
    var issue = " [" + priority + "] ";
    if(isBoss){
        issue += "(boss)";
    }
    return issue + description;
}

// 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


// 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 to the boss
//
// If a user checks "are you my boss?"
// Then the form should auto-select a priority of "high"
// and set the class of the form container to "boss-level"