Skip to content

Instantly share code, notes, and snippets.

@jamesgarrett

jamesgarrett/todo.js

Last active November 18, 2017 19:47
Show Gist options
  • Save jamesgarrett/1d184e8c49a9eb023dabeac5b26de9e7 to your computer and use it in GitHub Desktop.
Save jamesgarrett/1d184e8c49a9eb023dabeac5b26de9e7 to your computer and use it in GitHub Desktop.
Download ZIP
homework-02.js
Raw
todo.js
// I'm going to post revisions to this code, I'm not very happy with it. I just had a crazy week last week,
// and haven't had time to catch up on this yet
$(document).ready(function() {
const ENTER_KEY = 13;
var listItemCollection = [];
// on pressing any buttons or hitting enter, if the listItemCollection length is 0, hide main and footer
if ( listItemCollection.length === 0 ){
$('.footer').hide();
$('.main').hide();
}
$('.new-todo').autofocus = true;
$('.new-todo').keypress(function(key){
var userInput = $('.new-todo').val().trim();
if(userInput && key.which === ENTER_KEY) {
console.log(userInput);
var listItemId = _.uniqueId();
var listItemMarkup = (`<li class="to-dos" data-id="${listItemId}" >${userInput}</li>`);
listItemCollection.push({
content : listItemMarkup,
id : listItemId,
completed : false
});
if ( listItemCollection.length > 0 ){
$('.footer').show();
$('.main').show();
}
$('.todo-list').prepend(listItemMarkup);
$('.new-todo').val('');
}
});
$('.new-todo').on("click", "li", function(){
var listItemId = $(this).attr('data-id');
var listItemObject = _.find(listItemCollection, {id: listItemId});
listItemObject.completed = !listItemObject.completed;
$(this).toggleClass('completed');
});
// check the state of the checkbox -
// for each item 'to-dos'
// if prop.checked of li != prop.checked of .toggle-all
// prop.checked of li = prop.checked of toggle-all
$('.toggle-all').on('click', function(){
if ($('.toggle-all').is(':checked')){
console.log($('toggle-all'.attr('checked')));
} else {
console.log('no!');
}
});
// $('.todo-list').on('click', 'li', function(){
// var listItemId = $(this).attr('data-id');
// var listItemObject = _.find(listItemCollection, {id: listItemId});
// listItemObject.completed = !listItemObject.completed;
// $(this).toggleClass('completed');
// });
});
@donoage
Copy link

donoage commented Nov 18, 2017

Feedback

  • FYI, there was commented out lines of code in index.html that showed an example of how a todo item should look like.
<li>
	<div class="view">
		<input class="toggle" type="checkbox">
		<label>Buy a unicorn</label>
		<button class="destroy"></button>
	</div>
	<input class="edit" value="Rule the web">
</li>

Rating

2/4 - Feel free to submit an improved version for this and let me know!

Best,
Stephen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment