The goal of this assignment is to help you practice the materials we covered in this course and familiarize yourself with the JavaScript Syntax and with using JavaScript to manipulate the DOM. As part of this assignment, you are expected to implement a simplified Task list application according the the specification outlined in the project description below. You must submit all deliverables in the format specified in your course Learning Management System. To earn full points for this project must fulfill all the requirements outlined in the requirements section.

You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page should provide a user an interface to add and remove a task as well as mark a task as completed. For this version of the assignment, the tasks will be added directly in the HTML page by manipulating the DOM. Moreover, you should maintain an array that stores task details. Each task comprise of three fields:

• task-title: which is a one-line description of the task
• task-priority: which can be one of low-, medium- or high-priority.
• task-status: Which can be, either completed, or pending

Requirements

Your implementation should address the following requirements:

• Your code must be implemented using JavaScript running in the browser.
• Your JavaScript code must be implemented in a separate file, and linked to your HTML (i.e. do not write the JavaScript code directly in the HTML)
• Your HTML page should provide a form to allow the user to specify the details of a new task (i.e. task-title, as text; task-priority, as a select tag; and a task-status as a radio button selection), and a submit button.
• Adding a task should append that task in an array as well as append the task-list in the HTML (i.e. append a new
• item with the task details to the DOM). The task should display all task information, and provide additional controls to allow a user to 'remove' that task (i.e. have a remove button next to the task) and to mark the task as complete (i.e. have a mark as complete button next to the task)
• Programmatically register an 'onsubmit' event that will handle adding a new task to the DOM.
• Programmatically register events to handle the remove and mark as complete.
• When removing a task, remove it both from the array and the DOM.
• When marking a task as complete, have that task shown as strike-through, by programmatically updating its CSS styles (for example, set the text-decoration property).
• Use HTML, CSS and Bootstrap to style your page. Your styling of the task-list page must be visually appealing and the content of the page must be relevant to this assignment.
• Your HTML page, the CSS styling and your separate javascript file, along with any other resources you might use (ie. images)