How it works - nickberliner1/check-list-app GitHub Wiki

User-side

Installation

To install this app, create a folder and in terminal, run git clone https://github.com/nickberliner1/check-list-app.git inside your folder. Then navigate to "fixed-app" (unless you want to see the broken one) and open index.html.

Using it

On the main screen, you can add whatever and however many tasks you'd like by typing them into the section labeled "what needs to be done?" and press enter. You can edit any task by doubling clicking on it, making your changes, and pressing enter. You can check off any completed tasks by clicking on the circle next to them, in which case you are able to filter tasks by "All", "Active", or "Completed". You can also clear all completed tasks, or one at a time by hovering over the task and clicking the "X" next to it.

Technically

Architecture

This app uses MVC architecture, where the Controller interacts with the Model and View. This allows users to manage tasks without reloading the page.

Javascript files, methods, and functions

  • app.js - Creates new To-Do List

  • controller.js - Takes a model and view and acts as the controller between them

    • setView() - Loads and initialises the view
    • showAll() - An event to fire on load. Will get all items and display them in the todo list
    • showActive() - Renders all active tasks
    • showCompleted() - Renders all completed tasks
    • addItem() - An event to fire whenever you want to add an item. Simply pass in the event object and it'll handle the DOM insertion and saving of the new item.
    • editItem() - Triggers the item editing mode.
    • editItemSave() - Finishes the item editing mode successfully.
    • editItemCancel() - Cancels the item editing mode.
    • removeItem() - By giving it an ID it'll find the DOM element matching that ID, remove it from the DOM and also remove it from storage.
    • removeCompletedItems() - ill remove all completed items from the DOM and storage.
    • toggleComplete() - Give it an ID of a model and a checkbox and it will update the item in storage based on the checkbox's state.
    • toggleAll() - Will toggle ALL checkboxes' on/off state and completeness of models.
    • _updateCount() - Updates the pieces of the page which change depending on the remaining number of todos.
    • _filter() - Re-filters the todo items, based on the active route.
    • _updateFilterState() - Simply updates the filter nav's selected states.

  • helpers.js

    • Simply updates the filter nav's selected states
    • Attach a handler to event for all elements that match the selector, now or in the future, based on a root element
    • Find the element's parent with the given tag name
    • Allow for looping on nodes by chaining

  • model.js - Creates a new Model instance and hooks up the storage

    • create() - Creates a new todo model.
    • read() - Finds and returns a model in storage. If no query is given it'll simply return everything. If you pass in a string or number it'll look that up as the ID of the model to find. Lastly, you can pass it an object to match against.
    • update() - Updates a model by giving it an ID, data to update, and a callback to fire when the update is complete.
    • remove() - Removes a model from storage.
    • removeAll() - WARNING: Will remove ALL data from storage.
    • getCount() - Returns a count of all todos.

  • store.js - Creates a new client side storage object and will create an empty collection if no collection already exists

    • find() - Finds items based on a query given as a JS object.
    • findAll() - Will retrieve all data from the collection.
    • save() - Will save the given data to the DB. If no item exists it will create a new item, otherwise it'll simply update an existing item's properties.
    • remove() - Will remove an item from the Store based on its ID.
    • drop() - Will drop all storage and start fresh.

  • template.js - Sets up defaults for all the Template methods such as a default template

    • show() - Creates an <li> HTML string and returns it for placement in your app.
    • itemCounter() - Displays a counter of how many to dos are left to complete.
    • clearCompletedButton() - Updates the text within the "Clear completed" button.

  • view.js - View that abstracts away the browser's DOM completely. It has two simple entry points:

    • bind() - Takes a todo application event and registers the handler.
    • render() - Renders the given command with the options.