JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<input id='amazon_url'>
<div id='iframe_container'>
</div>

CSS

input {
  height: 24px;
  font-size: 16px;
  padding: 2px 5px;
  width: 75%;
}

JavaScript

const $input = document.getElementById('amazon_url');
const $container = document.getElementById('iframe_container');

const KeyCode = Object.freeze({
  ENTER: 13
});

const FORMS = Object.freeze({
  fakespot: 'http://fakespot.com/analyze?url=',
  review_meta: 'http://reviewmeta.com/search?q=',
  camelcamelcamel: 'http://camelcamelcamel.com/search?sq='
});

const getIFrame = (id) => {
  // <iframe id="myIframe" src="http://getprismatic.com/" onLoad="iframeDidLoad();"></iframe>
  let $iframe = document.getElementById(id);
  if (!$iframe) {
    $iframe = document.createElement('iframe');
    $iframe.id = id;
    $container.appendChild($iframe);
  }
  return $iframe;
}

$input.addEventListener('keypress', event => {
  const {
    charCode
  } = event;

  if (charCode === KeyCode.ENTER) {
    for (const key in FORMS) {
      const url = FORMS[key];
      const query = encodeURIComponent($input.value);
      const iframe = getIFrame(key);
      iframe.src = `${url}${query}`;
    }
  }
});