CODEWITHSUNDEEP
javascriptconverterscurrency
Andrew P
Andrew P

Reputation: 1597

Javascript: Simple currency converter with previous conversions

what i aim to do is a very simple currency converter. Basically, you type in a number, and press a button, a text is displayed that says "x dollars is y euros". Press the button again, a new text is displayed where the old one was, and the old one is displayed under the new one.

I've come so far that when something is entered in the field, it pops up below, and if you press the button again (with the same or a different value) it becomes a list of text.

To clarify what it is i'm saying here, take a look at this jsfiddle: http://jsfiddle.net/w8KAS/5/

Now i want to make it so that only numbers work, and so that number(x) is converted when the button is pressed and displayed below next to some fitting text (like "x dollars is y euros")

This is my js code, check the jsfiddle full code (html, js, css)

Any suggestions?

var count = 0;

function validate() {

   var amount = document.querySelector("#amount");

   if(amount.value.length > 0) {
       amount.className = 'correct';
   }

   else {
    amount.className = 'empty';
   }

   if (document.querySelector('.empty')) {
    alert('Något är fel');
   }

   else {
   addconvert(amount.value);
   }    
}

function addconvert(amount) {

   var table = document.querySelector('#tbody');
   var tr = document.createElement('tr');
   var amountTd = document.createElement('td');


   var amountTextNode = document.createTextNode(amount);

   amountTd.appendChild(amountTextNode)
   tr.appendChild(amountTd);

   table.insertBefore(tr, table.firstChild);

   count++;     
}



var button = document.querySelector(".button");

button.onclick = validate;

Upvotes: 1

Views: 4064

Answers (3)

tdmartin
tdmartin

Reputation: 251

You need a conversion rate (there are APIs for that), and then you can just add them together in a string

var convRate = 1.3; 
var amountTextNode = document.createTextNode(amount + " dollars is " + amount*convRate + " euros");

Regarding the API, Yahoo will tell you what you need without even the need to sign-in

$.ajax({
  url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDEUR%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback="
}).done(function(data) { 
  convRate = data.query.results.rate.Rate
});

Upvotes: 1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Your number validation is failing. Change the first part of your validation to this:

 function validate() {

    var amount = document.querySelector("#amount");
    var amountNum = parseFloat(amount.value);  //This is the numeric value, use it for calculations

    if(amount.value.length > 0 && !isNaN(amountNum) ) {
        amount.className = 'correct';
        amount.value = amountNum;
    }
    ...

Working here: http://jsfiddle.net/edgarinvillegas/w8KAS/6/

Cheers

Upvotes: 2

Dan Fox
Dan Fox

Reputation: 1723

To make sure that only numbers work, you can test the variable amount.value using the isNaN function. This will return true if the user's input is Not-a-Number, so if it returns false, you can proceed with your conversion.

if (!isNaN(amount.value)){
  addconvert(+amount.value)  // the plus symbol converts to a number
} else {
  // display error here
}

Inside your addconvert function, you can add code to will multiply your input amount by an exchange rate to get a rough conversion.

function addconvert(){
  // ...

  var euros = 0.74 * amount
  var text = amount + ' dollars is ' + euros + ' euros'
  var amountTextNode = document.createTextNode(text);

Upvotes: 0

Related Questions