ICT-581 Assignment 4- Write and design a plug-in from scratch Solved 

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  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.