JSFiddle - React, Tailwind, and code Playground
by Dovy Paukstys
HTML
<div id="wrap">
<center>
<h1 class="TFdevs"><span id="TFdevs_number"></span> Envato Developers</h1>
<h2 class="TFitems"><span id="TFitems_number"></span> Known Envato Marketplace Items</h2>
<h3 class="TFsales">$ <span id="TFsales_number"></span> in Gross Revenue</h3>
<h4><a href="http://themeforest.net/collections/4201392-powered-by-redux-framework/" target="_blank">See the full list of Items Powered by Redux</a></h4>
</center>
<div id="collection"></div>
</div>
CSS
.envato_row {
float: none;
display: block;
overflow: hidden;
margin: 20px 0px 10px 0px;
}
.envato_item {
height : 174px;
width : 142px;
padding : 10px 21px 4px 21px;
float: left;
overflow: hidden;
text-align: center;
border-right: 1px solid #E4E4E4;
}
.envato_item a {
font-family: tahoma, helvetica, arial;
font-size: 8pt;
color : #434343;
color : #434343;
text-decoration: none;
}
.envato_item p {
height : 33px;
overflow: hidden;
margin : 5px 0px 5px 0px;
line-height: 1em;
}
.envato_item p a {
font-family: tahoma, helvetica, arial;
font-size: 10pt;
font-weight: bold;
color : #171717;
text-transform: capitalize;
text-decoration: none;
}
.envato_item .envato_separator {
position: relative;
background: #F4F4F4;
border-top: 1px solid #E4E4E4;
margin: 0px;
height: 4px;
}
.envato_item_noborder {
border-right: none;
}
.envato_thumb {
border: none;
width: 80px;
height: 80px;
}
.envato_details {
font-family: helvetica, arial, tahoma;
margin: 0px;
padding: 10px 0px 0px 0px;
text-align: left;
}
.envato_sales {
float: left;
width: 75px;
font-size: 8pt;
color : #434343;
}
.envato_cost {
text-align: right;
font-size: 13pt;
font-weight: bold;
color : #171717;
float: right;
width: 60px;
}
.envato_rating {
height : 9px;
background:...
JavaScript
if (!window.EnvatoServices) {
window.EnvatoServices = {};
}
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
window.EnvatoServices.Referral = new function() {
this.api_version = "edge/";
this.api_url = "http://marketplace.envato.com/api/";
this.callbacks = [];
this.referralId = "";
this.columnCount = 4;
this.grossSales = 0;
this.developers = [];
this.items = 0;
/* initiates the download of popular items
*/
this.getPopularFiles = function (placeHolder, marketplace) {
var request = this.prepareRequest("popular:", marketplace, placeHolder);
this.execute(request);
}
/* initiates the download of collection items
*/
this.getFilesFromCollection = function (placeHolder, id) {
var request = this.prepareRequest("collection:", id, placeHolder);
this.execute(request);
}
/* initiates the download of recently added items to spcific category
*/
this.getRecentFilesFromCategory = function (placeHolder, marketplace, category) {
var request = this.prepareRequest("new-files:", marketplace + "," + category, placeHolder);
this.execute(request);
}
/* initiates the download of recently added items by spcific author
*/
this.getRecentFilesFromAuthor = function (placeHolder, marketplace, author) {
var request = this.prepareRequest("new-files-from-user:", author + "," + marketplace, placeHolder);
this.execute(request);
}
/* creates a request object to identify the response when...