JSFiddle - React, Tailwind, and code Playground

by John Satriano

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">

  <div id="buttonWrapper">
    <button id="submit">Click To Generate Phonetic Colors</button>
    </div>

    <div id="lyrics">
      <div id="textArea">


        <textarea id="foo">
So the FCC won't let me be 
Or let me be me, so let me see 
They try to shut me down on MTV 
But it feels so empty without me
        </textarea>
      </div>
      <div id="outputText">


        <iframe name="MyFrame" id="MyFrame"></iframe>
      </div>
      <div/>
    </div>

CSS

#buttonWrapper {
  height: auto;
  width: 100%;
}

#submit {
  width: 100%;
  height: 100%;
}

#outputText {
  width: 50%;
  height: 100%;
}

#MyFrame {
  width: 100%;
  height: 100%;
}

#textArea {
  width: 50%;
  height: 100%;
}

#foo {
  width: 100%;
  height: 100%;
}

#wrapper {

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#lyrics {
  display: flex;
  width: 100%;
  height: 95%;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

$('#submit').click(function(e) {
  e.preventDefault();

  // information to be sent to the server
  var info = $('#foo').val().replace(/\[.*\]/i, '');

  $.ajax({
    type: "POST",

    url: 'https://o6om5b3l21.execute-api.us-east-1.amazonaws.com/prod/colorLyrics',
    data: info,
    'contentType': 'text/plain',
    datatype: "text/html",
    success: function(msg) {
      var doc = document.getElementById("MyFrame").contentWindow.document;
      doc.open();
      doc.write(msg);
      doc.close();

    }
  });
});