To-do list application encompassing JS OOP common principles / best practices


To-do list application encompassing JS OOP common principles / best practices. Layout and design inspired by Todoist (

--> link to page <--

front page screenshot

JS modules and responsibilities listed below

createDOM (service provider)

  • Create elements and add to document
  • Can also create elements and return them to other modules
  • Calls updateDOM to load active projects / tasks

updateDOM (service provider)

  • Handles updating DOM elements
  • Updates DOM with current active projects / tasks
  • addProjectDOM

setupEventListeners (service provider)

  • Query elements and setup event listeners
  • Calls appLogic functions

appLogic (controller / coordinator)

  • Responsible for logic of running application
    • Add / remove projects and tasks
    • Editing of projects and tasks
    • Calls storage and updateDOM modules

Storage (information holder)

  • Maintains state of application

New lessons / material incorporated

  • SOLID principles
  • Modular patterns

Pending tasks

  • Task edit / delete buttons
  • Project links (event listeners)
  • Completed task function
  • Format dates in DOM
  • Today / This week
  • View / modify project of a single task
  • Add dropdown for task priority selection
  • Set task circle color based on priority
  • Sort tasks based on priority / due date
  • Add dropdown for sorting
  • Setup local storage
  • keyboard listener for adding task / project (enter, escape key)
  • Add CSS / styling (beautify)
  • Show / hide nav bar
  • Add hover effect to project li element (shows edit and delete button)
  • Add title attribute to project divs
  • Add footer

Future features

  • add keyboard listener (up / down) to dropdown menus
  • Option to hide completed tasks
  • Drag and drop tasks

Bugs to fix

  • expand/collapse transitions
  • shifting of buttons during hover (e.g. sort by, cancel task)