Assignment 2: JavaScript Objects, Object Oriented Concepts and HTML5 javaScript API

Page 1 of 3
Assignment 2: JavaScript Objects, Object Oriented Concepts and HTML5
javaScript API (Application programming interface) (25%)
Due:
The purpose of this exercise is to test your knowledge of changing objects using its prototypes and
prototypal inheritance. You will be enhancing the Dynamic Task list that you have created in Assignment
1 with custom JavaScript object and extend the functionality of your application by adding methods for
tasks and using HTML5 local storage functionality. The user interface will also be enhanced using
JavaScript drag and drop, mouse over and css.
Instructions
1) Creating prototypal inheritance: In assignment 1, you have created generic custom object for
task that had a number of attributes (task name, description etc). For this assignment, you will
demonstrate your knowledge of protypal inheritance by creating a top level task object and
different types of tasks based on category. For example, you may have a task category of Grocery
that will have different attributes than a task category of Education. However, both types of tasks
will need to inherit some generic attributes and methods from the parent task object.
2) Dynamically change the user interface for task creation: Change the user interface to allow
users to choose the category/type of task to be created and dynamically change the data entry from
so that only fields relevant to the type of tasks being entered are shown to the user. In addition,
when the task is being shown provide visual distinguishing features to different types of tasks
being created.
3) Enhance reordering of task by using HTML5 drag-and-drop: In assignment 1, you have
allowed users to reorder the tasks without drag and drop. For assignment 1, enhance the recording
functionally by allowing users to drag and drop tasks and reorder them.
4) Save information into local storage: Provide the user to save the tasks and related information to
be saved to the HTML5 local storage. Test this by close your browser and going to your page
again and ensuring that the information remains in the local storage. Enhance the “Clear tasks”
functionality from assignment 1 to clear the local storage.
Requirements
1. Package your HTML and JavaScript code as a zip file and submit on D2L dropbox for assignment
2 .
Evaluation
This assessment is graded out of 20 points and will be evaluated using the following rubric.
Assessments that are not acceptable or not received will receive a grade of zero.
Page 2 of 3
Criteria
Does Not Meet
Expectations
Partially Meets
Expectations
Meets
Expectations Max Points
Creating
prototypal
inheritance
Only one task object
is created. No
separate objects for
different categories
of tasks are created
and no evidence of
prototypal
inheritance is
shown.
(1 point)
Parent task object is
created and objects
for different
categories of tasks
created but does
not fully show
prototypal
inheritance
(4 points)
Parent task object is
created and child
object (different
categories of tasks)
inherit from the
parent object clearly
showing prototypal
inheritance
(7 points)
7
Dynamically
change the
user
interface for
task creation
Only one of the
following features
are implemented:
1) Task entry
interface is
dynamically
changed
based on
type of task
entered.
2) Task edit
interface is
dynamically
changed
based on
type of task
being edited.
3) Different
tasks are
visually
distinguished
when
displayed.
 (0 points)
Only two of the
following features
are implemented:
4) Task entry
interface is
dynamically
changed
based on
type of task
entered.
5) Task edit
interface is
dynamically
changed
based on
type of task
being edited.
6) Different
tasks are
visually
distinguished
when
displayed.
(4 points)
All three features
are implemented
7) Task entry
interface is
dynamically
changed
based on
type of task
entered.
8) Task edit
interface is
dynamically
changed
based on
type of task
being edited.
9) Different
tasks are
visually
distinguished
when
displayed.
(7 points)
7
Page 3 of 3
Criteria
Does Not Meet
Expectations
Partially Meets
Expectations
Meets
Expectations Max Points
Enhance
reordering of
task by using
HTML5
drag-anddrop
User it not able to
reorder the tasks
using drag and
drop.
(0 points)
User is able to
reorder the tasks
using drag and drop
and but order for the
tasks are not
changed in the
array and object
(just a visual
reordering)
(3 points)
User is able to
reorder the tasks
using drag and drop
and the order for the
tasks are changed
in the array and
object (not just a
visual reordering)
(6 points)
6
Save
information
into local
storage
No task information
is saved to the local
storage
(0 points)
Some (not all) task
information is saved
to the local storage
(3 points)
All task information
is fully saved
(including task
ordering
information) in local
storage
(5 points)
5