Added "Generate Code" button

pattiereaves · Sep 22, 2011 · 8a99db9 · 8a99db9
1 parent ba2e56f
commit 8a99db9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
@@ -52,7 +52,9 @@ font-size: 12px;
 height: 80px;
 padding: 10px;
 }
-
+select{
+	font-size: 14px;
+}
 input[type="text"] {
 	font-family: 'Liberation Sans', Helvetica, Arial, sans-serif;
 	padding:7px;
@@ -77,7 +79,14 @@ input.title-colorpicker {
 	width:30%;
 }
 
+#preview-canvas {
+	min-height:300px;
+}
+
 
+a.generate {
+	font-size: 18px;
+}
 /**************************************/
 /*               FOOTER               */
 /**************************************/

diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@ <h1>Interactive Bar Charts for Dummies | Hack Day Project Sept. 22, 2011</h1>
 
         <div class="title" name="title" onfocus="" onkeyup="">
 			<label for="title"></label>
-			<input id="title" type="text" size="40" value="Name your bar chart">
+			<input id="title" type="text" size="40" value="Name your bar chart" onclick="javascript:this.focus();this.select();">
 			<label for="titlesize">Title size:</label>  
 			<select id="titlesize">
 				<option value="8">8 px</option>
@@ -54,23 +54,23 @@ <h1>Interactive Bar Charts for Dummies | Hack Day Project Sept. 22, 2011</h1>
 
     <div class="span-11 colborder">
 
-    <h2>Data <span class="quiet">Copy &amp; paste your Excel date here</span></h2>
+    <h2>Data <span class="quiet small">Copy &amp; paste your Excel date here</span></h2>
 	<textarea id="data" class="fullwidth" onkeyup="getData()"></textarea>
 
 
 
     <h2>Chart options</h2>
 	    <div class="type"  onfocus="" onkeyup="">
 			<h4>Type</h4>
-			<div><input type="radio" name="charttype" value="h" /> <img src="images/hori-type.png" width="16" height="12"> Horizontal <input type="radio" name="charttype" value="v" /> <img src="images/vert-type.png" width="16" height="12"> Vertical </div>
+			<div><input type="radio" name="charttype" value="h" id="horitype" /> <label for="horitype"> <img src="images/hori-type.png" width="16" height="12"> Horizontal</label> <input type="radio" name="charttype" value="v" id="verttype" /> <label for="verttype"><img src="images/vert-type.png" width="16" height="12"> Vertical</label></div>
 		</div>	
 
         <div class="size" id="size" name="size" onfocus="" onkeyup="">
-			<h4>Size <span class="quiet">(in pixel)</span></h4>
+			<h4>Size <span class="quiet small">(in pixel)</span></h4>
 			<label>Width</label>
-			<input type="text" name="chartwidth" id="chartwidth" length="5" size="8" onkeyup="updateCode()" value="600">
+			<input type="text" name="chartwidth" id="chartwidth" length="5" size="8" onkeyup="updateCode()" value="600" onclick="javascript:this.focus();this.select();">
 			<label>Height</label>
-			<input type="text" name="chartheight" id="chartheight" length="5" size="8" onkeyup="updateCode()" value="300">
+			<input type="text" name="chartheight" id="chartheight" length="5" size="8" onkeyup="updateCode()" value="300" onclick="javascript:this.focus();this.select();">
 		</div>
 
 		<div class="color" id="chartcolor" name="chartcolor" onfocus="" onkeyup="">
@@ -90,13 +90,20 @@ <h4>Color</h4>
 
 		<h2>Preview</h2>
 
-		<div> 
+		<div id="preview-canvas"> 
 		PREVIEW GOES HERE
 		</div>
 
 
-		<div class="autoMargin">
-			<h2>Embed code <span class="quiet">Copy &amp; paste this into an HTML in your CMS/Blog</span></h2>
+		<div>
+		<p>
+
+		<a class="button positive generate"><img src="images/icons/tick.png"> Generate code</a><br/><br/>
+		</p>
+		</div>
+
+		<div>
+			<h2>Embed code <span class="quiet small">Copy &amp; paste this into an HTML in your CMS/Blog</span></h2>
 			<br>
 			<textarea id="codeOutput" class="fullwidth"></textarea>
 		</div>