<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<title>Widget</title>
<link href=”style.css” rel=”stylesheet”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script&gt;
<script>
$(document).ready(function(){
var ajaxFn = function () {
$.ajax({url: “https://spreadsheets.google.com/feeds/list/YOUR KEY/od6/public/values?alt=json”, success: function(result){
var a = JSON.parse(JSON.stringify(result));
var b= a.feed.entry
var temp_str=”;
var temp={};
b.forEach(function(item){
if(item.gsx$_cpzh4){
//this is for 3 coloum data
temp[item.gsx$_cn6ca.$t]=item.gsx$_cokwr.$t+”_”+item.gsx$_cpzh4.$t+”_”+item.gsx$_cre1l.$t;
}else{
if((item.gsx$_cn6ca)!=undefined && (item.gsx$_cokwr)!=undefined){
temp[item.gsx$_cn6ca.$t]=item.gsx$_cokwr.$t;
}
}
});
$(‘#code_us_value’).text(temp[‘% US’]*100);
$(‘#total_idea_val’).text(temp[‘Total Requests’]);
}});
}
//OR use BELOW line to wait 10 secs before first call
setInterval(ajaxFn, 1000);
});
</script>
</head>
<body>
<div class=”container”>
<div class=”widget-wrap”>
<p class=”bignumber total_idea”><span id=”total_idea_val”>333,221</span></p>
<p>Total requests for stickers</p>
<p class=”split”><span class=”us”>US: <span id=”us code_us_value”>83</span>%</span><span class=”nonus”>Non-US: 17%</span></p>
<img src=”img/x.png” alt=”” class=”img-multiply”>
<p>Cost to print & ship a sticker</p>
<p class=”split”><span class=”us”>US: $1.05</span><span class=”nonus”>EU: $1.73</span></p>
<img src=”img/eq.png” alt=””>
<p class=”bignumber”>$376,125</p>
<p>Needed to print & ship stickers</p>
<input type=”image” src=”img/donate.gif” class=”btn-donate” />
<p>or <span class=”buyone”>buy one</span> to send some in our store</p>
</div>
</div>
</body>
</html>

Advertisements