This weekend I made a super cool todo list app. It does everything it’s supposed todo and more, but I’m slightly worried about how big my HTML page is now. It’s stuffed full of angular directives and looks like Bootstrap has thrown up on it. I think my Makers training has taught alarm bells to ring in my head when something starts to look busy and complex, so I’m not sure if what I’ve done is correct. Technically the logic in the HTML page is all display logic, but I’m looking forward to having a coach review it so they can tell me if I need to move certain things into the controller.

Having said all that, it’s got a few nifty features such as inline editing and buttons that become disabled when they’re not needed. Plus angular form validation is pretty neat too, even it introduces more mess into the HTML page.

Here’s how the inline editing works:

<td class="col-md-7">
  <span class="col-md-12" ng-hide="editorEnabled"></span>
  <input class="col-md-12 edit-box" ng-show="editorEnabled"
  ng-model="task.description">
</td>

A button toggles editorEnabled’s boolean value, which controls whether the task description is shown, or an input field that allows the task description to be updated using ng-model. In case you’re wondering how the buttons work…

<td class="col-md-4">
  <button type="button" id="editing" ng-disabled="editorEnabled"
  ng-click="editorEnabled=!editorEnabled"
  class="btn btn-primary edit-task-btn">
    <span class="glyphicon glyphicon-pencil"></span> Edit
  </button>
  <button type="button" id="editing" ng-show="editorEnabled"
  ng-click="editorEnabled=!editorEnabled"
  class="btn btn-success done-editing-btn">Done</button>
</td>

The edit button sets the value of editorEnabled, and becomes disabled if editorEnabled is true. The ‘Done’ button only appears when editorEnabled is true.

I tried to put a setPristine method in the task adding method in my controller, but all attempts to do this failed. This meant when a task was added and the field reset to blank, since the form was still ‘dirty’my error handling allowed a ‘Description is required’ message to show. So into the HTML it went, and now everything is working fine.

Here’s what I did to fix the bug:

<button class="btn btn-success add-task-btn"
ng-click="addForm.taskDescription.$setPristine()">Add task</button>

Bring on the code review…

Nat x

Ok, improving the design is on my todo list too...