Our system has encountered an error. This exception has been automatically logged and reported. Z9JNMYTFFC8NZK58WFF3
Our system has encountered an error. This exception has been automatically logged and reported. GGY297WT3LDYYDE4W9EJ

How much will you be borrowing?

What will be the term of this mortgage (in years)?

What will be the interest rate?

Instructions: Enter numbers and decimal points. No commas or other characters.

This is your principal + interest payment, or in other words, what you send to the bank each month. But remember, you will also have to budget for homeowners insurance, real estate taxes, and if you are unable to afford a 20% down payment, Private Mortgage Insurance (PMI). These additional costs could increase your monthly outlay by as much 50%, sometimes more.

 

 
danielstern.ca Financial Calculator

Drawing shapes with SVG

Drawing shapes with SVG

blueRect.attr("fill","#0095cb");
magentaRect.attr("fill","#BE007F");
greenRect.attr("fill","#f95b00");
orangeRect.attr("fill", "#f95b00");

Here are a series of rectangles created using SVG. Setting the attributes, you can adjust the size and color of your elements.

Let's draw a rectangle for our page.

Make a container for our rectangle. Create a <div> tag in the body of our document by typing the following between the opening tag and closing tag. We give our container an id attribute so we can select it from other places in our code.

<div id="myDrawingSpace"></div> 

The script section within the body of our HTML file is a place we use JavaScript to program our page. Before we can draw a shape we need to create a space to draw within. Between the opening <script> tag and closing </script> tag within the body, add the following to create a drawing space:

var paper = Raphael("myDrawingSpace", 500, 500);

This creates a 500 x 500 pixel drawing space that you can draw shapes into. It begins in the upper left hand corner of the "myDrawingSpace" div.

Now we're ready to draw a shape. In the script area, below the last line of code we wrote, write the following:

var rectangle = paper.rect(50, 40, 30, 60);

This draws a rectangle in the drawing space. The first two numbers represent the x and y position of the rectangle. An x of 50 means the rectangle will be 50 pixels from the left edge of the drawing area. A y of 40 means the rectangle is positioned 40 pixels from the top of the drawing space. Try adjusting the x and y arguments and notice the effect.

The last two numbers, 30 and 60 represent the width and height of our rectangle,30 pixels wide, 60 pixels high. Try adjusting the width and height.

Next change the fill color of the rectangle and the color of the outline or stroke. Below the last code, but within the script area, add the following:

rectangle.attr("fill", "#ff0000");
rectangle.attr("stroke", "#0000ff");

Now our rectangle is red with a blue outline.

As you specify the rectangle's position and size around the drawing space, note the shape will only appear within the boundaries of the space it is created in. In this example, the space is 500 x 500 pixels. You can adjust the size of the space when you create it, or later while the program is running using the setSize() method.

Here is the code we ended up with.

Example:

<html>
  <head>
    <script src="raphael.js"></script>
  </head>
  <body>
    <div id='myDrawingSpace'></div>

    <script >
      var paper = Raphael("myDrawingSpace", 500, 500);

      var rectangle = paper.rect(50, 40, 300, 200);

      rectangle.attr("fill", "#0095cb");
      rectangle.attr("stroke", "#f95b00");
    </script>

  </body>
</html>

Extra:

Raphael also makes other shapes easily, check out these other elements:

<script>
    var paper = Raphael("myDrawingSpace", 500, 500);

    var c = paper.circle(100, 100, 70).attr({
      fill:"#BE007F"
    });

    var e = paper.ellipse(300,100,60,20).attr({
      fill:"#BE007F"
    });  
</script>
Fixed area visualizer: Sliders

Fixed area visualizer: Sliders

The values x, y, and area exist in relationship. Manipulating one value impacts the others.

Alter each value by entering a number into a text field, or by dragging a slider.

x * y = area

This shape appears to move with the sliders and respond to changes in the text boxes. What is actually happening, is that the page recalculates x and y anytime a textbox or slider changes, then redraws the rectangle. For example, as the x slider moves, it increments (or decrements) the x variable by one, and at each step the value for y is recalculated based on the specified fixed area, and the rectangle is redrawn.

In order to achieve this, we must connect the textboxes and sliders to the SVG rectangle using JavaScript. Using some jQuery functions will make using JavaScript easier.