JAVASCRIPT tagcloud.html Questions I need help with. Define an external

JAVASCRIPT tagcloud.html </html> Questions I need help with. Define an external

ID: 3917438 • Letter: J

Question

JAVASCRIPT
tagcloud.html

</html>

Questions I need help with.

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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/> <title>Make a Tag Cloud</title> <link rel="stylesheet" type="text/css" href="tcstyle.css" /> <script type="text/javascript" src="tagcloud.js"> </script> </head> <body> <h1>Tag Cloud Form</h1> <form action=""> <fieldset> <label for="tags">Enter a bunch of tags separated by spaces.</label><br /> <textarea name="tags" id="tags" rows="10" cols="100">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</textarea> <br /> <input type="button" name="makecloud" id="makecloud" value="Make Cloud" onclick="makeCloud()"/> <input type="button" name="savecloud" id="savecloud" value="Save Cloud" onclick="saveCloud()"/> <input type="button" name="loadcloud" id="loadcloud" value="Load Cloud" onclick="loadCloud()"/> <input type="button" name="cleararea" id="cleararea" value="Clear TextArea" onclick="clearArea()"/> <input type="reset" value="Reset TextArea" /> </fieldset> </form> <h1>Tag Cloud</h1> <div></div>  <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a> </p> </body>

</html>

Questions I need help with.

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
1. grab the contents of the textarea, a string of tags separated by spaces.
2. parse that string into an array of tag strings, sorted by lexicographic ordering. (Remember this array may have repeat tags.)
3. Create two arrays: One array contains unique tags and second corresponding array will contain the frequencies of each of those tags.
4. 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.
5. keep track of the maximum frequency for the set of tags. (Write a helper function to compute this.)
6. create a div element containing all the tags as span elements as described above. (You should write a helper fuction to achieve this.)
7. 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.
8. 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.)
9. 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.
10. remove the div element already belonging to tagcloud.html and replace it with the new div you just created. The new div should 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".

Make a Tag Cloud- Mozilla Firefox Ele Edit iew Higtory Bookmarks Ioos Help C × ? D file://C: Documents and Setti gs Keith Ouellette My Documents XMLXHTML Keith Homepage courses 40 10 (HoevorH? G Google 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 11me lime lemon lemon lemon peach peach mango guava mango lemon lemon lemon peach cherry cherry cherry lime 1ime plum pineapple cherry pineapple pear plum tangerine [JavaScript Application plum: 4 occurrences Make Cloud Save Cloud Load Cloud Clear TeA Tag Cloud apple banana cherry grape guava lemon lime mango peach pear pineapple plum tangerine Done

Explanation / Answer

function makeCloud() { //grabs texarea text, splits into an array, and sorts the array var tags = document.getElementById("tags").value.split(" ").sort(); var uniqueTags = []; var frequencyTags = []; for (var i = 0; i

Navigate

JAVASCRIPT Write a program called calendar.js that displays a calendar month for

JAVASCRIPT, i need a flowchart and pseudocode. Design a program that will allow

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

JAVASCRIPT tagcloud.html </html> Questions I need help with. Define an external

Question

Explanation / Answer

Related Questions

Navigate