Major changes in CSS and JavaScript

[katsuroyasu]

This is not urgent, but please add my CSS after all the important tasks are complete. I reorganised and made a massive change to the design.

You can discard my HTML changes since it is now irrelevant after modifying the last JavaScript.

However, just make sure to change the "Task AssignedTo" line to "col-7" and the "Task 2 DueDate" line to "col-5" in the createTaskHTML() of the todo-list.js because the date will be fixed.

Lastly, I forgot to commit to every change I made in my earlier code. I'll make a habit to do so next time.

[katsuroyasu]

General Changes and Fixes

• Automatically formatted all document files with Ctrl + Shift + F to make all of the codes readable
• Renamed all JavaScript files, especially todo-list.js → TaskManager.js to fit the sprint objectives with a much more convenient file name

HTML Changes

• Removed some unnecessary comments, especially the todo list tags are moved in the TaskManager.js, since it's easier to use the search Ctrl + F and wouldn't be editing major changes to the skeleton structure of the website
• Rearranged ./js/TaskManager.js and ./js/FormValidation.js script tags because TaskManager relies on the FormValidation script

FormValidation Changes

• Added const taskManager in line 6 to import the user's form input to the TaskManager.js file
• Added the missing DOMs inside the submit EventListener to receive the user's input from the form
• Moved the event.preventDefault(); outside the if statement to prevent refreshing the page after submitting the form
• Changed to one if statement to simplify and import the values to the TaskManager.js file

TaskManager Changes

• Moved all the code inside the class TaskManager{}, similar script format from the Quiz Assessment, and removed unnecessary and duplicated codes
• Modified the const task = from the addTask factory function in simpler code because it's repeating the same property assignments
• Added this.render() inside the addTask factory function to export the user's input with render()
• Moved and edited the HTML template inside the createTaskHTML(task), which fixed the undefined export issue
• Fixed all the ${variables} of the HTML template to correctly link back to the factory function
• Added ${task.Status.toLowerCase()} inside the Status class of the HTML template to link to the CSS stylesheet and match the same ${task.Status}
• Added taskID="${task.ID}" to place a unique tag and ID into the HTML template (and for the next sprint)
• Moved the displayList DOM inside the render() so the result will be exported inside the unlisted #list HTML tag
• Added a .forEach loop inside the render() to create a new task list from the HTML template from createTaskHTML(task) with user's inputted data

New Issues

• [ ] In line 39 of the FormValidation.js, it's supposed to be .valueAsDate instead, but it's temporarily put as .value because I struggled to fix the DueDate format in the task list (for now)
• [ ] In line 64 of the TaskManager.js, it might be the cause of continuing to export continuously duplicated input set of values (arrays?) every time you click the submit button after creating the first list
• [ ] In line 23 of the TaskManager.js, I haven't put anything inside the getTasksWithStatus(status) (so that might also be the cause of the duplicated task issue
• [ ] For the TaskManager.js, I haven't added getAllTasks() and possibly also addTask(task) that seems to be required in the PDF instructions of Sprint 2 (because I want to at least have most of the important issues fixed before Sprint 3)
• [ ] Lastly, for line 23 of the TaskManager.js, it might be possible to find an alternative code to create a unique ID for Sprint 3 and onwards otherwise we might encounter lots of issues

[sarahloui-se]

Am currently working on this merge. In future, CSS commits and HTML/JS commits need to be two separate commits - this is a difficult PR to work through