Description
In this assignment, you will practice creating a jQuery plug-in. Please check the instructions and
requirements to complete this assignment.
◼ Instructions
In Assignment 3, you created a to-do list web application. In this assignment, you need to print only the
list element to a pdf file—not to a browser console or HTML page. The list should be printed using a
browser printing feature. Only the list items and their content should be printed; all other page elements
must not be printed.
Tips: jQuery does not have the print feature, so you need to use the JavaScript print() function. Notice
that the print() function does not accept any data or parameters. It can be chained to a document or
window object, such as window.print(); . The best way to print just part of the page is by creating one.
Here is how to create a window/document and print out using JS functions:
1. Create a window using the ‘open()’ function. It’s better to use a variable so we can work on the
window object later:
E.g. var print_window = window.open();
2. Write content to the window object using the ‘write()’ function. This function can take any type of
content, but you need to pass the content as a string or DOM object. You can pass one or
multiple elements, e.g. write (“content”, “div”):
E.g. print_window.document.write(“print me”)
3. Now, print the content using the print() function. As with the open() function, above, just chain a
document/window to the print() function:
E.g. print_window.document.print();
4. Finally, close the window using the close() function, window.close() :
E.g. print_window.close();
If you followed the steps above, you now only need to figure out how to format your content using jQuery
function, then pass it to the write function. You can use this example:
var print_window = window.open(); // Create a new window
var world = “world”; // content
print_window.document.write(“Hello” + ‘ ‘, world); // add content to the page
print_window.print(); // print hello world
print_window.close(); // close the window
◼ Requirements
1. The list elements should print under each other; not in one line.
2. Print only the list content; not the whole DOM object.
3. Print the list using the style listed below:
Page 2 of 3
a. The font must be bold.
b. The font size must be 14 points.
c. The font color must be black.
4. The list should be entitled ‘List:’ and the title font size should be 16 points.
5. All current list items should be printed. That means if the list content was updated, you should
print the most recently updated version of this content.
Please refer to the rubric at the end of this document for evaluation details.
Submission
1. Name your folder plug-in_project.
2. Right-click on the folder and select ‘Send to -> Compressed (zipped) folder’.
3. Upload the zipped folder to the Assignment 4 Dropbox
Wrap up your project:
Now, check all project folders and files, ensuring that they all open without any problems. Next, zip your
main/root folder, and send only that zip folder. Here are some links that may help with file formatting:
• How to zip a file in Windows 10: https://www.laptopmag.com/articles/how-to-zip-files-windows-10
• Free file compressor application for Windows: http://www.7-zip.org/download.html
• How to zip a file in Mac: https://www.lifewire.com/how-to-zip-and-unzip-files-and-folders-on-amac-2260188
• Free file compressor application for Mac: https://theunarchiver.com/
• How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/theacademy/save-word-doc-pdf/
Figure 1: An example
of possible output
Page 3 of 3
Evaluation
This assessment is graded out of 25 points and will be evaluated using the following rubric.
Learners may receive partial scores or zero for unacceptable work.
Excellent: 5
point
Good: 3
point
Fair: 1
point
Poor: 0
point Score
The list elements printed under each other; not in
one line. /5
Only the list content was printed; not the whole DOM
object. /5
The list was printed using the required style, and the
list was entitled ‘List:’ and the title font size was 16
points.
/5
All current list items were printed. That means if the
list content was updated, the most recently updated
version of this content was printed.
/5
Coding
There are no
errors in
coding on the
site, as found
by me or an
online
validator.
There are
1-3 coding
errors on
the site, as
found by
me or an
online
validator.
There are
4-5 coding
errors on
the site, as
found by
me or an
online
validator.
There are
more than
6 coding
errors on
the site,
as found
by me or
an online
validator.
/5
TOTAL /25
