index.html

<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/plotly.min.js"></script>
    <script src="js/data.js"></script>
    <script src="js/ml.min.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.popupoverlay.js"></script>
    <title>Visualroo</title>
</head>

<body>
	<div id='head'>
		<h3>Visualroo</h3>
  		<p>A web application to retrieve and visualize data using the Mockaroo.com API</p>
	</div>
    <div id="popup">
        <h2>How to set up your Mockaroo schema in Visualroo</h2>
        Visualroo works with any registered user's <a href="https://www.mockaroo.com/" target="_blank">Mockaroo</a> account. In Mockaroo create the schema, format it in JavaScript Object Notation (JSON), and save the schema. Start <a href="https://visualroo.my.to" target="_blank">Visualroo</a>, copy the schema link and API key to Visualroo, click the test API button, choose x and y variables, and click the Retrieve Data button. <br>
        <img id="myimg" src="img/1.png" alt="Share Link" >
        <div id="mymodal" class="modal">
            <span id="close" class="close">&times;</span>
            <img class="modal-content" id="img01">
        </div>
    </div>
	<div id='p1'>
		<h4>Data Visualization</h4>
		<div id='div1'></div>
		<div id='div2'></div>
	</div>
	<div id='p2'>
		<h4>API Configuration
            <div class="tooltip" id="popup_open">&#x24D8;
                <span class="tooltiptext">Click to learn how to set up your Mockaroo.com schema in Visualroo.</span>
            </div>
        </h4>
        <div id='form'>
			<div class="input_wrapper">
				<label for="url">Schema link </label>
				<input type="text" id="url" name="url" maxlength="39" value="https://api.mockaroo.com/api/0c0b0d20">
	  			<div class="tooltip"><a href="#" onclick="showHelp1();">&#x24D8</a>
 					<span class="tooltiptext">After creating your schema on mockaroo.com, click on 'Create API' button and enter the last part of the share link.</span>
				<img id="image-holder" alt="">
				</div>
	  		</div>
	  		<div class="input_wrapper">
		  		<label for="apikey">API Key</label>
		  		<input type="text" id="apikey" name="apikey" maxlength="10" value="92ae5410">
		  		<div class="tooltip">&#x24D8;
	 					<span class="tooltiptext">API key is the characters after 'key=' attribute in the sample URL.</span>
				</div>
				<input type="submit" value="Test API" onclick="testApi()">
				<div class="tooltip">&#x24D8;
	 					<span class="tooltiptext">Test the API paramteres.</span>
				</div>
				<div class="tooltip" id='apiresult'></div>
			</div>
			<div id='cnt' class="input_wrapper"></div>
			<div id='xcombo' class="input_wrapper"></div>
			<div id='ycombo' class="input_wrapper"></div>
	  	</div>
	</div>
	<script type="text/javascript" src="js/plot.js"></script>
</body>
</html>