(JAVASCRIPT)

Define an external JavaScript file tagcloud.js which contains the following functions:

makeCloud() This function is the event handler for button "Make Cloud". It should

grab the contents of the textarea, a string of tags separated by spaces.

parse that string into an array of tag strings, sorted by lexicographic ordering. (Remember this array may have repeat tags.)

	/td>
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	Tag Cloud Form
	Enter a bunch of tags separated by spaces.
	grape cherry cherry apple pineapple cherry apple banana apple pineapple banana pineapple apple pineapple pineapple pineapple banana apple banana peach plum peach plum grape lemon lemon peach lemon lime lime lemon lemon lemon peach peach mango guava mango lemon lemon lemon peach cherry cherry cherry lime lime plum pineapple cherry pineapple
	Tag Cloud
	src="http://www.w3.org/Icons/valid-xhtml11"
	alt="Valid XHTML 1.1" height="31" width="88" />

Create two arrays: One array contains unique tags and second corresponding array will contain the frequencies of each of those tags.

The unique tag array and the frequency tag array pair is an example of parallel arrays. If the unique array contains elements apple, banana, cherry in indeces 0, 1 and 2 respectively, then the frequency array will contain elements 5,3,4 (for example) in indices 0,1 and 2. Where 5,3 and 4 are frequencies for apple, banana and cherry respectively.

keep track of the maximum frequency for the set of tags. (Write a helper function to compute this.)

create a div element containing all the tags as span elements as described above. (You should write a helper fuction to achieve this.)

use the properties of the DOM address for the div element to set a .1em solid silver border for the div. Give the div a blue background. a silver foreground color, and an extra large serif font.

loop through all the span child elements (the tags) in the div (tag cloud) and assign a suitable font size to them. The font size should at least be 15pt. The font size will be determined by taking the frequency at which the tag occurs divided by the max number of occurrences, then the resulting fraction is multiplied by 20. This will give you a decimal number between 0 and 20. Round the number to nearest integer and add 15. Now append the string "pt" and you have a string that is something like "22pt". This string should be used in setting the font-size. (I suggest defining a helper function to do this step.)

Add onclick function to each span element. When you click on the span element it should alert how many times the tag appears. See image below for an example.

remove the div element already belonging to tagcloud.html and replace it with the new div you just created. The new divshould be in the same position in the DOM tree as the old div was.

saveCloud() This function is the event handler for button "Save Cloud".

loadCloud() This function is the event handler for button "Load Cloud".

clearArea() This function is the event handler for button "Clear TextArea".