FavToDoTab v 0.1.1

ToDo app - tabbed panes - duplicates check - favorites task - Editable list 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">
        <p>List Your To-Do Task and Click Them When Its Done</p>
        <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

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;
    width: 400px;
}
#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;
}
.edit {
    background-color:#FFFF99;
}

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).siblings('span').text();
		if ((checkDuplicates($taskText, $list) == true) || ($('#listItems2').children().length == 0)) {
			$('#listItems2').append('<li class="curItem"><input type="checkbox" class = "item1" value= ""/>' + '<span class="display">'+$taskText+'</span><input type="text" class="edit" style="display:none"/><img src="images/home.png" height="20" width="20" style="display: inline-block"/></li>');

			$img.attr('src', 'images/star-full.png')

		} else {
			alert("this tast already exist in your ToDo list ");
		}
	});

	$('#list2').on('click', 'li', function() {
		if ($(this).children().is(':checked'))...