Task's Overview

Showing different views of a table by accepting some values from the user.

Creating the User Interface.

  • Text Fields
  • Buttons
  • Canvas

Text Fields

What do we need from user

  • Length of table top
  • Breadth of table top
  • Height of table top
  • Height of legs
  • Width of legs
  • Length of legs

Canvas

Four canvases are created to show

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

Creating a Text field using HTML

    Tag

  • INPUT

    • Attributes

  • type ="text"
  • value="//assign a value that you want to give explicitely"

Buttons

CLICK TO DRAW

TAG

button

ATTRIBUTE

type="button"

onclick="//function made in javascript that you want to run."

Canvas

TAG

canvas

ATTRIBUTES

id="//any name you want to give"

width="//width of the canvas"

height="//height of the canvas"

creating variables in Javascript

Initailizing the canvas object

Drawing the real Table