Javascript Currency Conversion

Question

Is it possible to recalculate currency with Javascript or Jquery.

For example:

<div id="price">$99.00</div>

would be changed to

<div class="gbp" id="price">£63.85</div>

If a class of "GBP" was applied to the div tag?

You have to manually do the conversion when applying the class — Tushar, Sep 26 '15 at 13:17
Sure it's possible. Whzt have you tried ? What is not working ? Take a look to [How to ask a good question](http://stackoverflow.com/help/how-to-ask) — Emrys Myrooin, Sep 26 '15 at 13:21
It's very simple to get and change that text. Question is really lacking in details and signs of research effort — charlietfl, Sep 26 '15 at 13:34
Hm, i think (hope) that question is not so banal, but, really, without details - it is very hard to guess... Let's try.... :) In one moment, on page - input value get .gbp class - that class change should trigger (i guess!) currency conversion function? If so, maybe this could help: http://stackoverflow.com/questions/2457043/most-efficient-method-of-detecting-monitoring-dom-changes — sinisake, Sep 26 '15 at 13:49
I'm not a javascript developer, I wanted to know if it was possible before asking somebody to do it — Adam Scot, Sep 29 '15 at 10:38

score 3 · Accepted Answer · answered Sep 26 '15 at 13:49

You can do that using MutationObservers:

(function() {
  var observer = new MutationObserver(function(mutations) {
    // for the class attribute, only the last mutation is important
    var mutation = mutations[mutations.length - 1],
        el = mutation.target;

    calculatePrice(el);
  });

  var config = {
    attributes: true,
    attributeFilter: ['class']
  };


  document.addEventListener('DOMContentLoaded', function() {
    var price = document.querySelector('#price');
    observer.observe(price, config);

    [].forEach.call(document.querySelectorAll('button'), function(btn, i) {
      btn.addEventListener('click', function(e) {
        price.className = this.id;
      });
    });
  });

  function calculatePrice(el) {
    var currencies = {
      usd: 1,
      gbp: 0.65,
      brl: 3.90
    };
    
    var types = {
      usd: '$',
      gbp: '£',
      brl: 'R$'
    };

    var currentType = Object.keys(types).filter(function(t) {
      return el.textContent.slice(0, types[t].length) === types[t];
    });
    
    currentType = currentType[0];
    
    var newType = el.className;
    
    var vl = Number(el.getAttribute('data-price')) * currencies[newType];
    el.textContent = types[newType] + vl.toFixed(2);
  }
})();

<div id='price' data-price='99' class='usd'>$99.00</div>
<button id='usd'>Change the class to 'usd'</button>
<button id='gbp'>Change the class to 'gbp'</button>
<button id='brl'>Change the class to 'brl'</button>

As you can see, the button's event handlers only changes the className of the input:

btn.addEventListener('click', function(e) {
  price.className = this.id;
});

And the observer gets that change, and do the conversion for you.

Javascript Currency Conversion

1 Answers1