JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="currency-box"></div>

<script>
  var currencyBoxArray = {
    'basic': {
      'name': 'Russian Rouble',
      'code': 'RUB'
    },
    'extended': [{
      'name': 'United States Dollar',
      'code': 'USD',
      'ratio': '64.05'
    }, {
      'name': 'Euro',
      'code': 'EUR',
      'ratio': '70.95'
    }, {
      'name': 'Great Britain Pounds',
      'code': 'GBP',
      'ratio': '83.14'
    }]
  };

</script>

SCSS

body {
  background: #fff;
}

.currency-box {
  font-family: sans-serif;
  .cb-row {
    margin-bottom: 10px;
    padding: 5px 10px;
    background: #ddd;
  }
  .cb-row-title {
    margin-bottom: 10px;
    span {
      display: inline-block;
      vertical-align: middle;
      &.cb-row-title-left {
        font-weight: bold;
      }
      &.cb-row-title-right {
        font-weight: bold;
      }
      &.cb-row-title-replacer {
        margin: 0 10px;
      }
    }
  }
  .cb-row-body {
    .cb-row-body-input {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
      text-align: center;
    }
    .cb-row-body-left {
      display: inline-block;
      vertical-align: middle;
    }
    .cb-row-body-right {
      display: inline-block;
      vertical-align: middle;
      margin-left: 30px;
    }
  }
}

JavaScript

var currencyBox = function(currArray) {
  if (!currArray) { console.log('ERR: There is no data array.'); }
	
  var params = {
  	'box':$('.currency-box'),
    'inputClass':'cb-row-body-input'
  };
  
  var currApp = {
    'init': function() {
      currApp.constructMarkup();
      currApp.setEvents();
    },
    'constructMarkup': function() {
      var template = '';
      $.each(currArray.extended, function(i, thisCurrency) {
        template += currApp.constructMarkupTemplate(thisCurrency);
      });
      params.box.html(template);
    },
    'constructMarkupTemplate': function(tc) {
      var template = '<div class="cb-row">';
      template += '<div class="cb-row-title">';
      template += '<span class="cb-row-title-left">' + currArray.basic.name + '</span>';
      template += '<span class="cb-row-title-replacer"> to </span>';
      template += '<span class="cb-row-title-right">' + tc.name + '</span>';
      template += '</div>';
			
      template += '<div class="cb-row-body">';
      
      template += '<div class="cb-row-body-left">';
      template += '<input data-input="0" class="'+params.inputClass+'" value="1" data-ratio="0" />';
      template += '<span class="cb-row-body-code">'+currArray.basic.code+'</span>';
      template += '</div>';
      
      template += '<div class="cb-row-body-right">';
      template += '<input data-input="1" class="'+params.inputClass+'" data-ratio="'+tc.ratio+'" />';
      template += '<span class="cb-row-body-code">'+tc.code+'</span>';
      template += '</div>';
      
      template += '</div>';
      
      template += '</div>';
      return template;
    },
    'setEvents':function(){
    	$(document).on('change keypress keyup','.'+params.inputClass,currApp.eventInputChange);
      $(document).on('click','.'+params.inputClass,currApp.eventInputClick);
    },
    'eventInputChange':function(e){
    	var $this = $(this);
      var thisIndex = $this.attr('data-input');
      var siblingIndex = thisIndex == "0" ? "1"...