FavToDoTab

ToDo app - tabbed panes - duplicates check - favorites task https://github.com/exexzian/FavToDoTab

by exex

HTML

<div id="tabs">
    <ul id="tab">
        <li><a href="#tabs-1">Tasks</a>

        </li>
        <li><a href="#tabs-2">Favorites</a>

        </li>
    </ul>
    <div id="tabs-1">
         <h2>List Your To-Do task and Click them when its Done</h2>

        <form name="checkListForm">
            <input id="txt" type="text" name="checkListItem" />
        </form>
        <div id="button" class="disabled">Add Task!</div>
        <br/>
        <div id="list" style="color:blue">
            <ul id="listItems"></ul>
        </div>
    </div>
    <div id="tabs-2">
        <p>Favorite Tasks:</p>
        <div id="list2" style="color:blue">
            <ul id="listItems2"></ul>
        </div>
    </div>
</div>

CSS

h2 {
    font-family:arial;
}
form {
    display: inline-block;
}
.enabled {
    display: inline-block;
    height:20px;
    width:90px;
    background-color:green;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
    cursor: pointer;
}
#list {
    font-family:garamond;
    color:yellow;
}
img {
    margin-left:10px;
}
.item {
    display:inline;
    margin-top:2px;
    margin-left:2px;
    margin-right:10px;
    margin-bottom:2px;
    background-color: black;
    color:white;
    border-radius: 5px;
}
#tabs {
    outline-color: transparent;
}
#tabs .ui-tabs-nav li {
    margin-top: 0.6em;
    font-size: 80%;
    background:#006600;
    color: yellow;
}
#tabs .ui-tabs-nav li.ui-tabs-selected, #tabs .ui-tabs-nav li.ui-state-active {
    margin-top: 0em;
    font-size: 100%;
    background:#00FF00;
    color:red;
}
#tabs .ui-tabs-panel {
    background: #f5f3e5 url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;
    border-width: 0px 1px 1px 1px;
}
#chk {
    color: blue;
}
#listItems {
    list-style-type:none;
    padding:0px;
    margin:0px;
}
#listItems2 {
    list-style-type:none;
}
a {
    color: yellow;
}
/*.ui-icon .ui-icon-star {
    display:inline-block;
    height:15px;
    width:15px;
    background:yellow;
}*/
 .disabled {
    background:#C1BFBF;
    display: inline-block;
    height:20px;
    width:90px;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
    cursor: pointer;
}
#tabs li a {
    color: black;
}
#tabs li a:hover {
    color: white;
}

JavaScript

$(document).ready(function () {
    $("#tabs").tabs();

    $('#button').removeAttr('onclick');

    var $getList = localStorage.getItem("listKey");
    var $getFav = localStorage.getItem('favKey');
    $("#listItems").append($getList);
    $("#listItems2").append($getFav);

    $('#txt').on('focus keyup', function () {
        var $taskText = $(this).val();

        if ($.trim($taskText).length === 0) {
            $('#button').off('click').addClass('disabled');

        } else {
            /************/
            $('#txt').keypress(function (e) {

                if ((e.which == 13) || (e.keyCode == 13)) {
                    e.preventDefault();
                    enableClick();
                    $('#button').removeClass('disabled');
                }
                $('#button').addClass('enabled');
            });

            /************/
            $('#button').on('click', enableClick).removeClass('disabled').addClass('enabled');

        }
    });

    $('#list').on('click', 'li', function () {
        if ($(this).children().is(':checked')) {
            $(this).remove();
        }
    });

    //store task/fav list before closing
    $(window).on('beforeunload', function () {
        var $listAfter = $("#listItems").html();
        var $favList = $("#listItems2").html();
        localStorage.setItem("listKey", $listAfter);
        localStorage.setItem("favKey", $favList);
        //  return 'saved';
    });

    //favorutes .ui-icon-star
    $('#listItems').on('click', 'img', function () {
        var $img = $(this);

        var $list = $('#listItems2');
        var $taskText = $(this).parent().text();
        if ((checkDuplicates($taskText, $list) == true) || ($('#listItems2').children().length == 0)) {
            $('#listItems2').append('<li class="curItem"><input type="checkbox" class = "item1" value= ""/>' + $(this).parent().text() + '<img src = "http://s10.postimg.org/s00agp76t/home.png" width="20" height="20" style="display:...