Write the JavaScript code to add behavior to a web page for manipulating strings. The page UI allows the user to type a phrase into a text box. The user can click the “Go!” button to display the words in that phrase in reverse order. Each word in the phrase should be inserted as a span with a class of word, inside a div with the id of words. (The word class gives the spans their appearance in the screenshots below, giving them a border and a background and so on.) Every other word (the first, third, fifth, etc.) should also be underlined.

The user can optionally specify a “filter” text by typing into a text box with the id of filter. If a non-blank filter is specified, you should exclude any words from the phrase that contain that filter text, case-insensitively. For example, if the filter text is “abc,” exclude any words containing abc, ABC, aBc, etc. If any words are excluded, under the list of words you should modify the div with id of count to display text of the form, “5 word(s) filtered out.”

The code should work for multiple clicks of the button. On each click it should clear any previous information you injected. You may assume that words in the phrase are separated by single spaces. Do not use any JavaScript libraries such as jQuery or Prototype. Here is the relevant HTML code for the page:

Sentence Reverser!

Phrase:

Filter:

These screenshots show the initial state, and after phrases have been typed and “Go!” is clicked.

Sentence Reverser! Phrase: hello How ARE you? Filter: Go! ********... you? ARE How www. hello Sentence Reverser! Phrase: hello How ARE you? Filter: h Go! you? ARE ............. .......... 2 word(s) filtered out. Sentence Reverser! Phrase: she sells seashells by the sea shore Filter: Go! ********** shore www. sea the by Sentence Reverser! Phrase: she sells seashells by the sea shore Filter: SE Go! shore S............. S 3 word(s) filtered out. the by she S... seashells sells she