TO DO app CS50 Mobile assignment #1

This is the Todo app assignement for this course. And here is the work I did so far:

https://codepen.io/kravmaguy/pen/OGqZqN

The problem with the logic I wrote is that the count of unchecked and the total count is only correct after you submit a todo,

I have to fix it so that it automatically updates on a delete or a checked event and not just after a todo has been submitted, so please tell me what I have to do to make it work?

here is the updated todo list now its working in all circumstances except one thing is still not correct, on clicking checkbox it does subtract from the count as intended but it does not add to the count on reclicking it
https://codepen.io/kravmaguy/pen/OGqZqN?editors=0010

I think this is the correct version, open to suggestions on how to shorten the code and make it more organized:
https://codepen.io/kravmaguy/pen/OGqZqN?editors=0010

1 Like

@kravmaguy man you are good learner fixing each thing itself make you learn fast ,i like your project ,it’s awesome man.
Every thing is working perfectly
Happy coding

@gunjan no everything is not working perfectly, you will test it out you will see its not working perfectly in all cases. something is still wrong with the logic. also the code looks like a mess and alot of repetition of code… very far from perfect.

Which specific cases?

@kravmaguy I don’t know what specific case you are testing as of basic it’s working fine and yeah i found that you need to correct your code for checked and unchecked box , it is not working

@RandellDawson @Gunjan
reguarding this todo app
https://codepen.io/kravmaguy/pen/VNRopE?editors=0010

observe on line 50 in the code regarding function checkcheckedMod()

    } else {
        $("#unchecked-count").html($b.filter(":not(:checked)").filter(":not(:hidden)").length-1);	

And tell me why it never gets to this else statement?
You see what im trying to do is say the following:
Upon hiding/deleting any todo, first check if it is already checked, if it is do nothing, because we already decreased the unchecked count prior so we dont want to do anything with it. However if the item is not already checked and its deleted we need to decrease the unchecked count, because it doesnt exist anymore. So why is this function not running, or why is it not running like I want it to?

After the logic is fixed I will work on shortening the code and styling it better.

I read through your code and honestly it was a bit confusing with all the repeat code. I refactored what you had and simplified the logic and broke it down into smaller pieces to make it easier to read. I believe trying to deal with unchecked checkboxes that were hidden vs. not hidden was complicating your logic, so instead of hiding the items when clicking the delete button, I completely remove the item from the DOM which simplifies everything.

const classNames = {
  TODO_ITEM: "todo-container",
  TODO_CHECKBOX: "todo-checkbox",
  TODO_TEXT: "todo-text",
  TODO_DELETE: "todo-delete"
};

function updateTotal() {
  $("#item-count").text(
    $("#todo-list").children().length
  );
  updateUnchecked();
}

function updateUnchecked() {
  var $checkBoxes = $("." + classNames.TODO_CHECKBOX);
  $("#unchecked-count").text(
    $checkBoxes.filter(":not(:checked)").length
  );
}

function addItem(listItem) {
  $("#todo-list").append(`
    <li class=${classNames.TODO_ITEM}>
      <input type="checkbox" class="${classNames.TODO_CHECKBOX}">
      <label>${listItem}</label>
      <button>delete</button>
    </li>
  `);
  updateTotal();
}

function newTodo() {
  let listItem = $("#input").val();
  if (listItem.length < 3) {
    alert("You need a todo of @ least 3 letters");
  } else {
    addItem(listItem);
    $("#input").val('');
  }
}

$(document).on("click", "li button", function() {
  $(this)
    .parent()
    .fadeOut("slow", function() {
      $(this).remove(); 
      updateTotal();
    });
});


$(document).on('change', "." + classNames.TODO_CHECKBOX, updateUnchecked);
1 Like