JSFiddle - React, Tailwind, and code Playground

by ericbarnard

HTML

<label for="spreadsheetId">
Spreadsheet Id:    <input class="userInput" type="text" id="spreadsheetId" value="0AtLECWwqJYmYdHQ0UGZ5c21hdG1xcFRYR1lfVGM4d2c"/>
</label>
<br/>
<label for="query">
Query:    
<textarea class="userInput" id="query" rows="5">
select A, B, C WHERE A=46123
</textarea>
<br/>


<button id="pullData">Execute Query</button>
<br/>

<div id="resultSet">
    <iframe src="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq=select+A%2C+B%2C+C+WHERE+A%3D46123&key=0AtLECWwqJYmYdHQ0UGZ5c21hdG1xcFRYR1lfVGM4d2c"/>        
</div>

CSS

#spreadsheetId{
     width: 350px;
     height: 40px;  
}
#query{
   width:100%;
   min-height:150px;
}

JavaScript

// the Good Stuff
$('#pullData').click(function(){
   
   var query = $('#query').val();
   var spreadsheetId = $('#spreadsheetId').val();
   
   var src = "https://docs.google.com/spreadsheet/tq?tqx=out:html" 
   src += "&tq=" + escape(query);
   src += "&key=" + spreadsheetId;   
       
   var frame = document.createElement('IFRAME');
   frame.src = src;

   $('#resultSet').empty().append(frame);
    
});