JSFiddle - React, Tailwind, and code Playground

by xls2web

HTML

<script src="https://cdn.rawgit.com/xls2web/x2w/Relink/x2w.js"></script>
<div id="xliFrameContainer"></div>

<div id="xlsCallParameters">
	<p>Create JSON based on the following range (e.g. 'Sheet1!A1:B4')</p>
	<input id="input10">
	<button id="goXls2JSON" onclick="xlsQuery()">Go!</button>
</div>
<div id="logDiv"></div>

CSS

#xliFrameContainer {
    float:left; 
    overflow: hidden; 
    min-width: 200px;
    height: 200px;
}
#xlsCallParameters {
   float:left; 
   overflow: hidden; 
   margin-left: 25px;
   width: 30%;  
}

#logDiv {
    clear: both;
	    background: #eee;
	    display: block;
	    margin: 0.5em;
	    min-height: 12em;
	    max-height: 12em;
	    overflow: scroll;
	    position: relative;
	    width: 97%;
	
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    
	    font-family: 'Open Sans', sans-serif;
	    font-size: 0.9em;
        
        white-space: pre-wrap;      /* CSS3 */   
        white-space: -moz-pre-wrap; /* Firefox */    
        white-space: -pre-wrap;     /* Opera <7 */   
        white-space: -o-pre-wrap;   /* Opera 7 */    
        word-wrap: break-word;      /* IE */
}

JavaScript

//Find file by token and load into #xliFrameContainer
$(function ()
{    $("#xliFrameContainer").xls2web("SDEB69797A53B9EE1D!252/-4162847905282696472/t=0&s=0&v=!ANDh8Xi_vXzcWGw");
});

//Query the content of range of cells specified in the form input   
function xlsQuery() {   	
   	$("#xliFrameContainer").xls2JSON($("#input10").val());  
}

//Tell what to do after the JSON response is received 
function xls2JSONcallback(response){   
   log("Response JSON = " + JSON.stringify(response), "logDiv");     
}