equiv (Equivalence)

Equivalence is a tiny app that outputs a converted version of the code you know, in to the one you wish to know.

by Sam Fereday

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <select id="known">
        <option value="js" selected>JavaScript</option>
        <option value="python">Python</option>
        <option value="typescript">TypeScript</option>
        <option value="csharp">C#</option>
      </select>
      <dl>
        <dd>
          <input type="radio" name="syntax" value="log"> Log</dd>
        <dd>
          <input type="radio" name="syntax" value="var"> Variable</dd>
        <dd>
          <input type="radio" name="syntax" value="function" checked> Function</dd>
      </dl>
      <div id="output-a" contenteditable="true"></div>
    </div>
    <div class="col-sm-6">
      <p>
        Equivalent in
      </p>
      <select id="not-known">
        <option value="js">JavaScript</option>
        <option value="python" selected>Python</option>
        <option value="typescript">TypeScript</option>
        <option value="csharp">C#</option>
      </select>
      <p>
        Is:
      </p>
      <div id="output-b" contenteditable="true"></div>
    </div>
  </div>
</div>

CSS

.container {
  padding-top: 1em;
}

.lead {
  text-align: center;
}

select {
  margin-bottom: 0.8em;
}

#output-a,
#output-b {
  font-family: consolas;
}

pre {
  min-height: 10em;
}

textarea {
  width: 100%;
  min-height: 10em;
}

JavaScript

// Dom
var a = document.getElementById("known");
var b = document.getElementById("not-known");

var atext = document.getElementById('output-a');
var btext = document.getElementById('output-b');

var radios = document.getElementsByName('syntax'),
firstRadio = null;

// Code
var Equivalence = function() {};

var syntaxDB = {
  js: {
    'function': 'function functionName(parameters) {}',
    'var': 'var variableName = value;',
    'log': 'console.log(variableName);'
  },
  python: {
    'function': 'def functionName( parameters ):\n    functionBody',
    'var': 'variableName = value',
    'log': 'print variableName'
  },
  typescript: {
  	'function': 'function functionName(parameters) {}',
    'var': 'var variableName = value;',
    'log': 'console.log(variableName);'
  },
  csharp: {
  	'function': 'public void functionName(type value)\n{\n    functionBody\n}',
    'var': 'type variableName = value;',
    'log': 'Console.WriteLine();'
  }
}

function find(str, obj) {
  var found;
  for (var key in obj) {
    found = obj[str];
  }
  return found;
}

function parse() {

  for (var i = 0, length = radios.length; i < length; i++) {

    if (radios[i].checked)
      firstRadio = radios[i];

    radios[i].addEventListener('change', function() {
      atext.innerHTML = '<pre>' + find(this.value, find(a.value, syntaxDB)) + '</pre>';
      btext.innerHTML = '<pre>' + find(this.value, find(b.value, syntaxDB)) + '</pre>';
    });

  }
  
  atext.innerHTML = '<pre>' + find(firstRadio.value, find(a.value, syntaxDB)) + '</pre>';
  btext.innerHTML = '<pre>' + find(firstRadio.value, find(b.value, syntaxDB)) + '</pre>';
  
}

a.addEventListener('change', parse);
b.addEventListener('change', parse);

parse();