Assessment 4: Write and design a plug-in from scratch Solution

Due: see the course outline for a specific date




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:




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();




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”)




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();




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




The list elements should print under each other; not in one line.



Print only the list content; not the whole DOM object.



Print the list using the style listed below:



Page 1 of 3



The font must be bold.



The font size must be 14 points.



The font color must be black.



The list should be entitled ‘List:’ and the title font size should be 16 points.







































Figure 1: An example




of possible output




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




Name your folder plug-in_project.
Right-click on the folder and select ‘Send to - Compressed (zipped) folder’.
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-a-mac-2260188



Free file compressor application for Mac: https://theunarchiver.com/



How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/the-academy/save-word-doc-pdf/










































Page 2 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




Good: 3




Fair: 1




Poor: 0




Score










point




point




point




point




































The list elements printed under each other; not in


























/5


one line.






























































Only the list content was printed; not the whole DOM


























/5


object.






























































The list was printed using the required style, and the


























/5


list was entitled ‘List:’ and the title font size was 16




























points.


































All current list items were printed. That means if the


































list content was updated, the most recently updated


























/5


version of this content was printed.














































































































There are


There are


There are














There are no






more than
















1-3 coding


4-5 coding
















errors in






6 coding
















errors on


errors on
















coding on the






errors on








Coding






the site, as


the site, as


/5






site, as found






the site,










found by


found by










by me or an






as found
















me or an


me or an
















online






by me or
















online


online
















validator.






an online
















validator.


validator.


























validator.
































































TOTAL




/25















































































































































Page 3 of 3