Making a Unit Converter

A unit converter is a program that will convert to and from different units, such as inches and miles. You can input "1 mile" and it will output "63360 inches". This is a tutorial for making a program like this in a couple different programming languages. I'm starting with just Java and PHP, but I may add more later.

The easiest way to do this is in 2 steps. First, convert the entered number into a base unit. Second, convert the base unit into the desired unit. So, to convert inches to miles, you would convert inches into feet and then feet into miles. This might sound more complicated than converting directly from inches to miles, but it is actually much easier to program.

To make this work, we first need to define a bunch of constants for the first step. Here are a few we might need for this example:

  • INCHES_IN_FOOT = 12
  • CENTIMETERS_IN_FOOT = 30.48
  • MILES_IN_FOOT = 0.000189

We could also define constants for the second step, but it is not really needed.

  • FEET_IN_INCH = (INCHES_IN_FOOT)-1 = 1/12
  • FEET_IN_CENTIMETER = (CENTIMETERS_IN_FOOT)-1 = 1/30.48
  • FEET_IN_MILE = (MILES_IN_FOOT)-1 = 1/0.000189

Now that we have constants, the first step is fairly simple. I'll use a generic switch case statement to demonstrate.

switch (starting_unit)

  case "inch":
    return (starting_value / INCHES_IN_FOOT);

  case "centimeter":
    return (starting_value / CENTIMETERS_IN_FOOT);

  case "mile":
    return (starting_value / MILES_IN_FOOT);

  case "foot":
    return (starting_value);

The second step is almost identical to the first. We just multiply by the constant instead of divide.

switch (ending_unit)

  case "inch":
    return (base_value * INCHES_IN_FOOT);

  case "centimeter":
    return (base_value * CENTIMETERS_IN_FOOT);

  case "mile":
    return (base_value * MILES_IN_FOOT);

  case "foot":
    return (base_value);

Now for the complete program in the different languages. I assumed the variables "starting_value", "starting_unit", and "ending_unit" are already filled with data. I'll leave that part up to you.

Java

There is no way to switch on a String in Java, so I'm using if/else statements instead. I embedded these statements in a helper method to make the code more readable.

class UnitConverter
{  
  //Declare constants
  public static final double INCHES_IN_FOOT = 12;
  public static final double CENTIMETERS_IN_FOOT = 30.48;
  public static final double MILES_IN_FOOT = 0.000189;

  public static void main(String args[])
  {
    //Initialize variables
    double starting_value, base_value, end_value;
    String starting_unit, ending_unit;

    //get value converted to base unit
    base_value = starting_value / getConstant(starting_unit);

    //get value converted to ending unit
    end_value = base_value * getConstant(ending_unit);

    System.out.println(end_value);

  }
  private double getConstant(String unit)
  {
    if(unit=="inch")
      return INCHES_IN_FOOT;
    else if(unit=="centimeter")
      return CENTIMETERS_IN_FOOT;
    else if(unit=="mile")
      return MILES_IN_FOOT;
    else
      return 1;
  }
}

PHP

PHP does allow Stings in a switch statement, but I still embedded it in a helper function for readability.

//define constants
define("INCHES_IN_FOOT",12);
define("CENTIMETERS_IN_FOOT",30.48);
define("MILES_IN_FOOT",0.000189);

//convert to base unit
$base_value = $start_value / getConstant($starting_unit);

//convert to end unit
$end_value = $base_value * getConstant($ending_unit);

//print end value
echo $end_value;

function getConstant($unit) {
  switch($unit) {
    case "inch":
      return INCHES_IN_FOOT;
    case "centimeter":
      return CENTIMETERS_IN_FOOT;
    case "mile":
      return MILES_IN_FOOT;
    default:
      return 1;
  }
}

The Easiest Way to Code CSS

One of the biggest advantages of programs like Dreamweaver is the ability to see changes to CSS in real time. If you change a color in CSS, the live preview instantly reflects it. The problem is the "browser" that Dreamweaver uses only displays correctly for very simple websites.

Ideally, you could make a change to CSS and have a real browser update on the fly. Luckily there is a Firefox extension called Firebug that does just that.

Firebug lets you modify, add, and delete CSS properties from inside the browser and instantly update the page without reloading.

Firebug is perfect for putting the finishing touches on a website, figuring out a good color to use, or testing different background images to name a few.

You can download Firebug at https://addons.mozilla.org/en-US/firefox/addon/1843. Click below for a screenshot of me changing CSS on the fly with Firebug.

Using Constants in PHP

Constants are an underused part of PHP. If you have a website with more than 5 pages, you should probably be using them.

I'm going to use an example to demonstrate the usefulness of constants. Let's say you have an image gallery and you let people upload images. Here's the function that adds an uploaded image to the gallery:

function addPicture($picture) {
  //Picture bigger than 100,000 bytes
  if($picture=>size > 100000)
    return false;
  //Picture's name is larger than 20 characters
  else if(strlen($picture=>name) > 20)
    return false;
  //Picture is not an accepted file type
  else if(strpos('jpg, gif, png',$picture=>type)===false)
    return false;
  //Passed all validation
  else
    return $picture=>add();
}

As you can see, we have certain requirements for a picture to be uploaded. We also have to tell people these requirements somewhere. Here are some instructions on our upload form:

<p>Your image must meet the following requirements:</p>
<ul>
  <li>It can't be larger than 100kb</li>
  <li>The file name can't be longer than 20 characters</li>
  <li>It must be in one of the following formats: jpg, gif, png</li>
</ul>

We also have similar instructions in our FAQ and other help pages. What happens if we want to increase the size to 200kb? We would have to replace the text everywhere it appears. This is time consuming and leaves a lot of room for human error.

Wouldn't it be nice if we only had to change the value once? Constants in PHP are a perfect solution to this problem. In PHP, constants are declared using the define() function. Here's the constants.php script that declares all our constants:

//maximum file size in bytes
define('MAX_FILE_SIZE',100000);
//maximum length of file name
define('MAX_FILENAME_LENGTH',20);
//accepted file types
define('FILE_TYPES','jpg, gif, png');

//maximum file size in kilobytes
define('MAX_FILE_SIZE_KB',intval(MAX_FILE_SIZE/1024));

Now we need to add these constants into our pages. Here's the revised addPicture() function:

//Load the constant declarations
include "constants.php";

function addPicture($picture) {
  //Picture bigger than MAX_FILE_SIZE
  if($picture=>size > MAX_FILE_SIZE)
    return false;
  //Picture's name is larger than MAX_FILENAME_LENGTH characters
  else if(strlen($picture=>name) > MAX_FILENAME_LENGTH)
    return false;
  //Picture is not an accepted file type
  else if(strpos(FILE_TYPES,$picture=>type)===false)
    return false;
  //Passed all validation
  else
    return $picture=>add();
}

Here's our revised instruction page:

<?php 
//Load the constant declarations
include "constants.php"; 
?>

<p>Your image must meet the following requirements:</p>
<ul>
  <li>It can't be larger than <?php 
      //display max file size in kilobytes
      echo MAX_FILE_SIZE_KB;
    ?>kb</li>
  <li>The file name can't be longer than <?php
      //Display max number of characters for file name
      echo MAX_FILENAME_LENGTH;
    ?> characters</li>
  <li>It must be in one of the following formats: <?php
      //Display list of allowed file types
      echo FILE_TYPES;
    ?></li>
</ul>

Hopefully this gives you an idea about how to use constants in your site. Here are some things to keep in mind about constants:

  • They are not variables and do not have a '$' in front.
  • They are generally named in all caps with underscores between words.
  • They can only hold scalar values (ie. no arrays or objects). If you want to store an array or object in a constant, use the serialize() function.

Real Time Stock Quotes with PHP

I wanted to create a custom widget to put in a website that pulls and formats stock data in real time. I came across Micro Stock, a free PHP script that does just that. This script was ok, but the code was written for PHP4 and not very flexible.

I decided to write my own script instead. I went with Google Finance, since it has the added bonus of correcting misspellings. Here is the function getStockInfo($url) that parses stock information from the passed url.

function getStockInfo($url){

  //Load content from passed url into $page variable
  $page = file_get_contents($url);
  
  // Get company name and stock symbol
    //Search and place matches in array
    preg_match("/<h1>([^<]*)<\/h1>[\s]* [\s]*\([a-zA-z]*,([^\)]*)\)/",$page,$temp);
    if(count($temp)>1) //If name found
      list(,$name,$symbol) = $temp;
    else //No name found
      list($name,$symbol) = array('Unknown','');

  // Get other info
    //Define reusable regular expressions
    $decimal = '[0-9]+[\.]?[0-9]*'; //Matches a decimal number
    $span_id = '[^"]*'; //Matches dynamic span ids used by google
    $span_class = 'ch[grb]'; //Matches classes for colored text
    
    //Long regular expression to match price and changes in price
    preg_match('/<span class="pr" id="'.$span_id.'">('.$decimal.')<\/span><br>\n<span class=bld><span class="'.$span_class.'" id="'.$span_id.'">([\+\-]?)('.$decimal.')<\/span><\/span>\n<span class="'.$span_class.'" id="'.$span_id.'">\([\+\-]?('.$decimal.')%\)<\/span>/',$page,$text);

/*  $text holds formatted info
    $price holds the price in dollars
    $dir holds the direction of change ("+" or "-")
    $diff holds the change amount in dollars
    $percent holds the change amount in percent */ 

    if(count($text)>1)// Info found
      list($text,$price,$dir,$diff,$percent) = $text;
    else// No info found, fill with dummy data
      list($text,$price,$dir,$diff,$percent) = array('-','-','','','-');
    
    //Store data in array and return
    $result['name']  = $name;
    $result['symbol'] = trim($symbol);
    $result['price'] = $price;
    $result['diff']  = $diff;
    $result['percent'] = $percent;
    $result['dir'] = $dir;
    $result['text']  = $text;
    
    //Return array of data
    return $result;
}

The process is fairly straight forward. First, load the page into a variable. Then, pick out key data by searching for unique patterns.

The second step was the hardest part to do. I first looked at the source of a few Google Finance pages and found recurring patterns. I then translated those patterns into regular expressions, capturing the data I wanted to keep.

My example function only works with Google Finance, but the regular expressions could be altered to work with other sites.

Below is the return value when called with the following url: http://finance.google.com/finance?q=goog

Array
(
    [name] => Google Inc.
    [symbol] => NASDAQ:GOOG
    [price] => 442.93
    [diff] => 9.07
    [percent] => 2.09
    [dir] => +
    [text] => <span class="pr" id="ref_694653_l">442.93</span><br>
<span class=bld><span class="chg" id="ref_694653_c">+9.07</span></span>
<span class="chg" id="ref_694653_cp">(2.09%)</span>
)

This gives you the option of using pre-formatted text, but also gives you all the information you need to format it yourself. To see an example of this script in action, go to http://jeremydorn.com/demos/stocks.php

Using Javascript with Textfields

I'm going to look at different ways to manipulate textboxes using javascript. All of these examples are things I've had to use for various projects.

Here's what I'll cover:

  • Selecting text on focus
  • Creating a live preview
  • Keyboard shortcuts (ie. ctrl+b to bold text)
  • Advanced macros

Selecting Text On Focus

Let's start with the easy one. Here's the scenario: you have HTML code in a textbox that you want people to copy and paste. When the user clicks the textbox, the text should be highlighted.

<textarea onFocus='this.select();'>Click to select</textarea>
Example:

Creating a Live Preview

Here's the scenario: You allow users to create their own html template. You want them to see a live preview of the rendered HTML code as they type.

First, the javascript.

//Puts html in the preview pane
function updatePreview(html) {
  //Get preview element
  target = document.getElementById('preview');
  //Replace element's contents with passed text
  target.innerHTML = html;
}

Now, the html.

<!--Text area that user types in-->
<textarea onKeyUp='updatePreview(this.value);'></textarea>

<!--Element where preview is displayed-->
<div id='preview'></div>
Example:
Preview
No Text
Type HTML code here:

Keyboard Shortcuts

Here's the scenario: When a user fills out a textbox, you want their progress to be saved when they hit ctrl+s (Control + S), the standard keyboard shortcut for "save".

To actually save the data to a database, Ajax is required. I may get to this in a later tutorial, but for now, I'll assume you have a javascript function "saveData()" that does this. Here's the javascript.

//Find out which key is pressed
function interpretKey(e) {
  //Get window event (handle different browsers)
  e = (e) ? e : window.event;

  //Get key code (handle different browsers)
  key = (e.keyCode) ? e.keyCode : event.which;
  
  if(e.ctrlKey) //Control Key is pressed
    if(key==83) //S key is pressed
      saveData(); //Save the data
}

And here's the HTML.

<textarea onKeyDown='interpretKey(event);'></textarea>
Example:

Advanced Macros

A macro is a function that performs several tasks. They are often used to automate actions that humans repeatedly perform. I'm going to use the keyboard shortcuts we just made to preform macros.

Let's say you often type the following skeleton for an HTML file in a textfield:

<html>
<head>
  <title>title</title>
</head>

<body>

</body>
</html>

You want to automate this so you don't have to type it every time. Let's make the keyboard shortcut "Alt+1" type this for you.

First, the javascript.

//Define array of macros
var macros = new Array;

//Define first macro
macros[0] = {
  //Name of macro
  "name":
    "HTML Skeleton",
  //Key that triggers Macro
  "key":
    49, // "1" key
  //Text to insert into textbox
  "text": 
    "<html>\n"+
    "<head>\n"+
    "  <title>title</title>\n"+
    "</head>\n"+
    "<body>\n\n</body>\n"+
    "</html>",
  //Where to place cursor after inserting (from start of insert)
  "cursor_offset":
    52 //Places cursor 52 characters from start (Between the <body> tags)
};
function handleMacro(e) {
  //Get window event (handle different browsers)
  e = (e) ? e : window.event;

  //Get key code (handle different browsers)
  key = (e.keyCode) ? e.keyCode : event.which;
  
  if(e.altKey) { //Alt Key is pressed, check for macros
    for(i=0;i<macros.length;i++) {
      if(macros[i].key == key) { //One of the macros matches the key pressed
        //Do the macro
        addText01(macros[i].text,macros[i].cursor_offset);
    }
  }
  }
}
function addText01(text,offset) {
  //Get textbox element
  textbox = document.getElementById("textbox");
  
  //Get current cursor position.  This is where the text will be inserted.
  cursorPosition = getCursorPosition(textbox);
  if(cursorPosition==-1)
    return false;
  
  //Get the current text in the textbox
  currentText = textbox.value;
  
  //Generate new value with new text inserted
  newText = currentText.substr(0,cursorPosition) + text + currentText.substr(cursorPosition);
  textbox.value = newText;
  
  //Get the new cursor position
  if(offset || offset=='0') //Offset defined
    newCursorPosition = offset;
  else
    newCursorPosition = text.length;
    
  //Set the new cursor position
  setCursorPosition(textbox,cursorPosition+newCursorPosition);
  
  return true;
}
function getCursorPosition(node) {
//Firefox support
  if(node.selectionStart) return node.selectionStart;
//Catch Exception (unsupported browser)
  else if(!document.selection) return 0;
//IE support
    //Define character to search for
  var c = "\001";
  //Create empty range
  var sel  = document.selection.createRange();
  //Duplicate range
  var dul  = sel.duplicate();
  var len  = 0;
  //Move duplicate range to node
  dul.moveToElementText(node);
  //Set selected value to character
  sel.text = c;
  //Search for character
  len  = (dul.text.indexOf(c));
  //Delete character
  sel.moveStart('character',-1);
  sel.text = "";
  //Return character position
  return len;
}
function setCursorPosition (node, pos) {
// Firefox support
  if (node.selectionStart || node.selectionStart == '0') {
    node.selectionStart = pos;
    node.selectionEnd = pos;
    return;
  }
  
// IE Support
    // Create empty selection range
  var sel = document.selection.createRange ();
  // Move selection start and end to 0 position
  sel.moveStart ('character', -node.value.length);
  // Move selection start and end to desired position
  sel.moveStart ('character', pos);
  sel.moveEnd ('character', 0);
  sel.select ();
}

Now for the HTML.

<textarea id='textbox' onKeyDown='handleMacro(event);'></textarea>

Using this technique, you can easily define multiple macros. For a list of javascript key codes, check out http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

Example: