Showing various views of the table which include

• Top View
• Front view
• Side view
• Bottom view

Single page structure

Single page structure is made so that the user can see the various views on a single page just by clicking on some buttons.

Receiving values

Values are received by making use of 6 Text Fields which are shown one at a time.

Drawings

All drawings are made with the help of one canvas. Each time the user clicks on a button to show a view, canvas is cleared and then drawings are made.

Code for clear function

	function canvasclear(){
	context.clearRect(0,0,600,450);
	}
					

Bootstrap

Little bit Bootstrap is used to make layout of the page and for designing buttons and text-fields.

Reseting values

Once the values are given and the user wants to change them, then he can click on the reset button to change. The button is only visible when all the values are given by the user.

Query selector all

This is the javaScript method used to put all the elemets of the same type inside a container, into an array.

Number of legs

The user can also give the number of legs. The length between the legs are calculated by using the formula.

length_legs_dist = (total - (length_legs*values[5]))/(length_legs+1);