todo.js

// curious what this is doing? https://learn.jquery.com/using-jquery-core/document-ready/
//bn notes: kind of a mess, lots of notes by myself you can ignore, couldn't get focus to work??? :/
$(document).ready(function() {
  // write your code here

  /*You should be working in `app.js` in `homeworks/homework-02/js`. I commented out the
  predefined list items in index.html because the todolist is empty when
  the page starts. You need to use those list items as a reference for
  the html that's to be inserted onto the page.
  */

  //Implement "No todos" and "New todos" following the guidelines listed here:

  /*No todos

  1. When there are no todos, #main and #footer should be hidden.*/


  /*

  New todos are entered in the input at the top of the app.
  1. The input element should be focused when the page is loaded, preferably by using the !!autofocus
  input attribute.
  --can't get autofocus to work??

  done-2. Pressing Enter creates the todo, appends it to the todo list,
  and clears the input.
  done--3. Make sure to !!!.trim() the input and then check that its
  not empty before creating a new todo.*/

  //think this kind of works a bit...
  // var todoText;



  $("footer").hide();

  $(".new-todo").keypress(function(event) {
    if (event.which === 13) {
      //grabbing new todo text from input
      var todoText = $(this).val().trim();
      if (todoText === '') {
        alert("enter a todo");
      } else {
        //create a new li and add to ul
        //not sure how to add a class so it looks right???
        //adding class to li breaks everything
        //adding label half works, but know prob this isn't correct
        $(".todo-list").append("<li><label>" + todoText + "</label></li>");
        $("footer").show();
      }
      //this empty string clears the text field after enter not sure if this is right place for it
      $(this).val("");
    }
  });
});

1. https://gist.github.com/donoage/9df4f9b2ec6bf75d30f3b71ba47a36fb#file-todo-js-L36, should be,

$('.main, footer').hide();

I know the instructions said to look for id main and id footer but that was a trick question ;)

2. https://gist.github.com/donoage/9df4f9b2ec6bf75d30f3b71ba47a36fb#file-todo-js-L43, this alert() works for now but in real production code, generally you would need to utilize some sort of a modal or a popup to display this message, just a tip!

3. https://gist.github.com/donoage/9df4f9b2ec6bf75d30f3b71ba47a36fb#file-todo-js-L46, an example for a proper looking list item was hidden right in your index.html file. https://github.com/ga-students/JS-NYC-3.20.17/blob/master/homeworks/homework-02/index.html#L32-L39. You would need to add all children elements as shown here to display a proper list item.

4. for autofocus, you can just add the text autofocus in the beginning tag of your input element.

<input class="toggle-all" type="checkbox" autofocus>

Let me know if you want to work with me more on this. I have a feeling that I can clear a lot of things up for you.

2/4
👍

-Stephen