Description
Objective
To gain a better understanding of the HTML, CSS, JavaScript, and event handling.
Description
The assignment is to write a page that will simulate the “magnetic poetry” that is sold in many
bookstores. The background color of the page should be black. A series of bold faced, black lettered
words should appear in white rectangular boxes. The words should start out together on the page and
the user of the page must be able to drag and drop them around the page to create sentences. The page
should also contain a single text box and a button with the label “Add Word”. When the user types
some text in the box and clicks the button, a new “magnetic” word should appear on the board.
1. All formatting should be done using a CSS properties.
2. Use a Button element to represent each word.
3. Set the CSS position of the words to absolute.
4. You will need to trap the mousedown, mousemove and mouseup events.
5. To move the words around you’ll need to use the clientX and clientY properties of the event and
the offsetTop and offsetLeft properties of the button objects.
6. Initialize the puzzle with a set of words.
