https://github.com/massoncorlette/todolist

Focusing on Single Responsibility Principle, web pack, plugins, general review.
https://github.com/massoncorlette/todolist

Last synced: about 22 hours ago
JSON representation

Focusing on Single Responsibility Principle, web pack, plugins, general review.

• Host: GitHub
• URL: https://github.com/massoncorlette/todolist
• Owner: massoncorlette
• Created: 2024-06-09T03:12:35.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-08T06:09:52.000Z (2 months ago)
• Last Synced: 2024-09-08T07:25:12.746Z (2 months ago)
• Language: JavaScript
• Homepage: https://massoncorlette.github.io/todolist/
• Size: 466 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# todolist

Focusing on Single Responsibility Principle, web pack, plugins, general review.  

Want to take my time to keep my code modular, and logical with keeping DOM seperated from app logic - following S.R.P

The design I want to go for a modern minimalistic look that most websites seem to adhere to nowadays. 

Something of the looks of this:

https://culturedcode.com/things/features/

Libraries: https://github.com/date-fns/date-fns

https://www.npmjs.com/package/date-fns

To-do object properties: title, details(optional), duedate(optional), important toggle, checklist toggle

Want to add an extra feature for habit tracker,

where for everyday you can add if you did 

the habit. (E.g - exercise, studying, reading).

PSEUDO:

INDEX.js

display upon DOMload

  initializeSidebarButton();

//////////////

Helpers.js

  projects[];

  allTasks[];

  makeProject factory(title,notes, complete, date, delete add methods)

    this.tasksArray[];

    function addProject

    function deleteProject

  makeTask factory function(task,complete,important,+ delete and add methods)

    function addTask

      *push to project's tasksArray[], also allTasks[]

    function deleteTask

      *delete from project's tasksArray[], also allTasks[]

    function editTask

      *update task

  function displayImportant()

    importantTasks[];

     *filter allTasks to put into importantTasks

//////////////////////

DOM.js

toggleSidebarButton();   

  toggles sidebar 

clearBody(); (Make's things more modular)

  function to clear DOM in body sense I will be doing it alot

newProject();

  'click' event listener addProject();

    import makeProject();

      user inputs new project title in sidebar

      adds Project title and date to side bar, with edit delete 

deleteProject();

  'click' event listener deleteProject();

    import deleteProject();

      delete option clicked in sidebar

      remove from array and remove from sidebar

      remove projects tasks from allTasks[]

projectDetails();

  'click' event listener for every project in sidebar

   displays project details(tasks, notes, date) in body

updateProject();

  user input notes, add tasks, adddate in body

  newTask();

    'click' event listener to add task in body

    displays task details in body for project

    optional important toggle add to allTasks()

sidebarAllTasks();

    'click' event to display all tasks in body

sidebarImportant();

    'click' event to display all important tasks from any project in body

sidebarCalendar();

    'click' event to display calendar with 

    projects and what is completed

Functionality: Will display in body upon what option is clicked on sidebar. 

I want to aim to use a calendar library. All projects and tasks should 

be deleted and added in their respective arrays. Need for projects and tasks to be saved on clients computer upon reload. 

Have a edit option for every task and project. 

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text

displayTasks

  return taskInformation (get task info row)

displayAllTasks(taskArray)

  const taskInfo = displayTasks

  

displayAllTasks(); //function call

eventListeners 'click'  //event listeners

  displayAllTasks(allTasks)