Exercise #3

In this exercise you are to make a dynamic box sizing tool. It should use range sliders to size a box in width and height (up to 500px x 500px) and set the border width (1 to 20px) and set the border style via a drop-down.

sizer.html already contains most of the required HTML to create the tool. You will need to apply JavaScript event handlers and create functions and styling to make the tool work. It should update the div element with the id 'box' as the sliders and drop-down are changed. The page should reset to a default state when loaded. Current values should be shown next to the sliders and updated as they change.

Run the solved version if you need to see better how it should operate.