JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class='container'>
    <div class='row'>
        <div class='col-xs-1'>
            <i class='fa fa-cog' data-toggle="modal"   
            data-target="" ></i>
            <!-- Modal -->
        </div>
        <div class='col-xs-6 col-xs-offset-2 list'>
            <ul>
                To-Do List
            </ul>
        </div>
    </div>
    <div class='row'>
        <div class='col-xs-4 col-xs-offset-4'>
            <form class='form-inline' id='add-to-list-form'>
                <div class='form-group'>
                    <label class='sr-only' for="input_list_item">Add Item to List</label>
                    <input type='text' class='form-control' id='add_list_item' placeholder='Add new item to list...'/>
                </div>
            </form>
        </div>
        <div class='col-xs-2 col-xs-offset-5'>
            <input class="btn btn-primary submit-new-item" type="submit" value='Add'/>
        </div>
    </div> 
</div>

CSS

ul {
    background-color: white;
    height: 30px;
    font-size: 20px;
    text-align: center;
}
li {
    background-color: rgba(0, 0, 0, 0.2);
    height: 30px;
    color: white;
    text-align: center;
    font-size: 20px; 
}

#add_list_item {
    margin-top: 300px;

}
body {
    background-image: url('http://designreflect.com/wp-content/uploads/2012/09/paper-textures/20-Seamless-Paper-Texture.jpg');
}
#add-to-list-form {
    position: absolute;
}
.submit-new-item {
    position: absolute;
    margin-top: 340px;
}
.fa-cog {
    font-size: 20px;
    color: grey;
    margin-top: 5px;
}

JavaScript

$(function() {
    //initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    
    //add user input to end of current list
    $('.submit-new-item').on('click', function() {
        var $add_list_item = $('#add_list_item').val();
        $('ul').append('<li>'+$add_list_item+'</li>');
        
        //clear form after submission and refocus input field
        $('#add-to-list-form').get(0).reset();
        $('#add_list_item').focus();
    });
    
    //animate settings icon and show tooltip
    $('.fa-cog').on('mouseover', function() {
        $(this).attr('class', 'fa fa-cog fa-spin').css('cursor', 'pointer');
    });
    
    //stop settings icon animation
    $('.fa-cog').on('mouseleave', function() {
        $(this).attr('class', 'fa fa-cog');
    });
   
});