Currency Converter — Free Currency Converter For Your Web Site...

Currency Converter — Free Currency Converter For Your Web Site:

Enhance the quality of your web site by adding Time Genie's currency converter to your pages. Allow your users to easily obtain the current exchange rates for 183 countries which use 159 currencies plus the price of gold and SDR's.

• Time Genie has 2 currency converters that you can add to your web site.
• The other currency converter will convert 10 major currencies instantly and is extremely easy to add to your web site.

An example of what the currency converter will look like on your web site when using the default settings is show below:

This popular currency exchange tool is free to use for both commercial and non–commercial web sites. All that is required is that you keep the links back to Time Genie visible and accessible.

There are 2 steps to adding Time Genie's currency converter to your web site:

1. Insert the currency converter into your web site using JavaScript.

2. Add some code to your cascading style sheet. Sample code appears below that you can copy and paste or modify.

If you need assistance, please send us an email.

About This Currency Converter:

Time Genie's currency converter is updated daily.

There are many benefits to using Time Genie's currency converter which include:

• This currency converter is lightweight and designed for speed of download and calculations.
• You can control the appearance and visual look of the currency converter by using a cascading style sheet. More information about this option plus an example that can be easily copied and pasted is provided below.
• The results are provided instantly (real time) and users do not need to go to another page to get the answers.
• Time Genie's currency converter will convert hundreds of world currencies plus the price of gold.
• You can use Time Genie's currency converter for free on both commercial and non–commercial web sites.
• Updates are done automatically without you doing a thing. New rates are automatically updated daily for you and when new currencies are added, your currency converter will update automatically too!
• If you need assistance then please send us an email and we will be glad to help you.

In exchange for using Time Genie's currency converter, there will be small links to Time Genie. These links must always remain visible and accesible.

JavaScript:

Simply copy and paste the following HTML code into your web site where you want the currency converter to appear:

<script language="JavaScript" type="text/javascript"> <!-- hide this script from old browsers function temp(form) { var a = parseFloat(form.Amount.value, 10); var f = parseFloat(form.RateFrom.value, 10); var t = parseFloat(form.RateTo.value, 10); var c = 0; c = a * f / t; c = Math.round(1000*c)/1000; form.Exchange.value = c; } // done hiding from old browsers --> </script> <script type="text/javascript" src="http://www.timegenie.com/currency/converterjs.js"> </script>

»Remember to add the style code to your cascading style sheet as seen below to change the look and feel of the currency converter.

Cascading Style Sheets:

You can adjust the look of the currency converter easily using your cascading style sheet.

Here is some sample style code that you can copy, paste and use. This will create a currency converter that looks like the currency converter example shown above:

div.fxborder { border: 1px solid #000000; width: 225px; padding: 5px; margin: 10px; background-color: #cccccc; } div.fxheader { color: #ffff00; text-align: center; font-size: 18px; background-color: #000000; font-family: optimum, verdana, tahoma, arial, sans-serif, serif; margin-bottom: 15px; width: inherit; } p.fx { color: #000000; font-weight: bold; font-size: 11px; } select.fx { color: #333333; font-size: 11px; font-weight: normal; border: 1px solid #000000; } option.fx { color: #333333; font-size: 11px; font-weight: normal; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fx { font-weight: normal; padding-left: 5px; font-size: 11px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fxsubmit { font-weight: normal; padding-left: 5px; font-size: 11px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fxresults { color: #ff0000; font-size: 12px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; text-align: center; } a.fxlink { color: #0000ff; }

Here is a breakdown of the style code. The information is color coded so you can see which part of the currency converter is adjusted as seen below in the sample HTML code.

Used to control the border around the currency converter and even the background color.

Used in the heading that states "Currency Converter".

Used to control the words "Amount:", "From:", "To:" and "Result:".

Adjust the text within the drop down lists.

Provides further control, if needed of the text within the drop down lists.

Allows you to adjust the input box where the amount to be converted is entered.

Allows you to adjust the submit button.

Allows you to adjust the currency conversion results.

Changes the color of the link to Time Genie. Please remember that the link color must always be visible and should not blend in with the background color.

Here is a brief look at the HTML used in the currency conversion file and where each aspect can be adjusted using your style sheet:

<div class="fxborder">
<div class="fxheader">Currency Converter</div>
<form action="">
<p class="fx">Amount:<br />
<input name="Amount" value="1" maxlength="15" size="15" class="fx" />
<br />From:<br />
<select name="RateFrom" class="fx">
<option class="fx" value="0.3363">Argentine Peso</option>
</select>

<select name="RateTo" class="fx">
<option class="fx" value="0.3363">Argentine Peso</option>
</select>
</p>
<p class="fx">
<input name="calc" value="Convert" type="button" onclick="temp(this.form)" class="fxsubmit" /><br />
Result:<br />
<input name="Exchange" readonly="readonly" size="15" class="fxresults" />
</p>
</form>
<p class="fx">&rarr;<a href="http://www.timegenie.com/currency_converter" title="free currency converter for your web site" class="fxlink">Free currency converter</a><br />
&rarr;<a href="http://www.timegenie.com/" title="world time and time zone converter" class="fxlink">Time zone converter</a></p>
</div>

Brief Cascading Style Sheet Tutorial:

Essentially cascading style sheets allow you to adjust the look of your HTML code easily.

There are three methods of doing this but we will only focus on two.

The first option is to add the style code directly to your cascading style sheet. This is known as the linked method.

The second option is for those that either do not have a cascading style sheet or that would prefer to add the style code directly to a page. This method is known as the global method.

Option 1:

If you choose the first option, the linked method, then you will need to have a cascading style sheet. If you do not have an existing cascading style sheet then you can make one. A name for a cascading style sheet can be anything you want as long as the file extension is css. Here is an example for a cascading style sheet file: style.css

Once you have created your css file, you simply copy and paste the sample style code as seen above into the file. Then upload to your server.

Next, in your HTML, in between the <head> and </head> tags you must link to your cascading style sheet and thus the reason why it is known as the linked method. Here is the code you would add between the <head> and </head> tags:

<link href="http://www.your-domain-name.com/style.css" rel="stylesheet" type="text/css" />

Obviously you wil want to change your-domain-name with the name of your domain.

Option 2:

The second option, known as the global option does not use a css file, but rather you place the code directly in each page that is affected by the style code. The style code will then only affect the pages you add the code to. This has a global effect only and thus the reason why it is known as the global method.

You enter the style code between the following HTML:

<style type="text/css">
<!--

style code goes here

-->
</style>

Your style code must then be added between the <head> and </head>.

Here is a sample of the code that you can place directly into your HTML between the <head> and </head> if you have chosen option 2.

<style type="text/css"> <!-- div.fxborder { border: 1px solid #000000; width: 225px; padding: 5px; margin: 10px; background-color: #cccccc; } div.fxheader { color: #ffff00; text-align: center; font-size: 18px; background-color: #000000; font-family: optimum, verdana, tahoma, arial, sans-serif, serif; margin-bottom: 15px; width: inherit; } p.fx { color: #000000; font-weight: bold; font-size: 11px; } select.fx { color: #333333; font-size: 11px; font-weight: normal; border: 1px solid #000000; } option.fx { color: #333333; font-size: 11px; font-weight: normal; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fx { font-weight: normal; padding-left: 5px; font-size: 11px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fxsubmit { font-weight: normal; padding-left: 5px; font-size: 11px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; } input.fxresults { color: #ff0000; font-size: 12px; border: 1px solid #000000; font-family: Tahoma, Verdana, Arial, sans-serif, serif; text-align: center; } a.fxlink { color: #0000ff; } --> </style>

Once you have added the style code to your web site by using either option 1 or 2, you can then adjust the look and feel of the currency converter.

There are plenty of options available to you and you can use an online tutorial to learn the basics.

But as example, the p.fx affects the paragraphs in the currency converter and looks like this:

p.fx {
color: #000000;
font-weight: bold;
font-size: 11px;
}

If you notice, the style code says the color is black as noted by #000000, the text is bold as noted by font-weight: bold and the text is 11 pixels in height as noted by font-size: 11px.

If you want to, you could make the text blue, the font italics and the font size to be 18px by simply doing this:

p.fx {
color: #0000ff;
font-weight: italics;
font-size: 18px;
}

As soon as you did this and uploaded the changes, the currency converter would immediately change its look.

Cascading style sheets provide you with great ability to adjust the look of the currency converter but if you are new to cascading style sheets, then it is suggested you simply use the example code provided.

— Back To Top —

You can change these times by setting your preferences. Additionally, Your Clock allows you to compare the time for up to 14 different cities around the world.

City		Time	GMT±
Vancouver		2:13 PM — Fri, Nov 20	-8:00
Perth		6:13 AM — Sat, Nov 21	+8:00
Nairobi		1:13 AM — Sat, Nov 21	+3:00
Vladivostok		8:13 AM — Sat, Nov 21	+10:00
Reykjavík		10:13 PM — Fri, Nov 20	+0:00

— Back To Top —