Currency converter

James Eagan - Télécom Paris - Dept. INFRES

In this exercise, we are going to implement a currency converter. Note that the Mozilla web documentation or the w3schools web site can be helpful.

Create the skeleton of the project

Create a folder with three files:

currency/
- index.html
- style.css
- converter.js

Note: the mkdir and touch Unix commands can be useful; touch file.txt creates an empty file named file.txt.

Structure of the user interface

First, create the interface we are going to use. In the index.html file, create a skeleton of the web page. In this web page, we should see:

A title for a currency converter
- in the window bar of the browser (note: not displayed by all browsers)
- in the content of the page
a place to enter the amount to convert (see the <input> tag)
a place to enter the exchange rate
a place to display the result
a button to do the calculation (see <button>)
later you can eventually replace the button with an automatic update when entering amounts.

Note: in this web page, there should no formatting.

Define the style

We will maintain a separation between the contents of the document (HTML), the style (CSS), and the logic (Javascript). Let's add a reference to the CSS file in the <head> section of the index.html file (e.g. <link rel="stylesheet" href="style.css">) then move on to the style.css file.

We are now going to add rules to manage the formatting of our interface. To do this, you need to have an idea of what you want to display. Take out a sheet of paper and draw the interface you want to create.

Now add CSS rules in the style.css file to display this design. You may have to go back to the index.html file to add identifiers or classes to certain elements or add <div> or <span> tags to structure the HTML file. Remember that these changes should describe the intent or structure of the content, not their formatting.

Add functionality

Let's move on to JavaScript. In the converter.js file, you can now write the code to do the conversion, i.e.:

a function that takes an amount and an exchange rate and returns the converted value.
another function that retrieves these two values from the HTML document, passes them to the function written to them, and displays the result on the page.

Then let's connect it all: add a <script> tag that refers to the Javascript code (for instance at the end of the page, after the closing <body> tag so as not to slow down the loading of the page).