CodePen Stats Checker

Developer
ZeroSpree
Size
9,083 Kb
Views
62,744
  1. CodePen Stats Checker Previews
  2. CodePen Stats Checker HTML Codes
  3. CodePen Stats Checker CSS Codes
  4. CodePen Stats Checker JS Codes

How do I make an codepen stats checker?

This is deprecated and no longer functional, but Luke fixed it here: https://codepen.io/LukeXF/details/PGOBzk/ so you're in luck :). What is a codepen stats checker? How do you make a codepen stats checker? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.

CodePen Stats Checker Previews
IQ Test

CodePen Stats Checker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CodePen Stats Checker</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body{margin:0;background:#ECF0F1;font:normal 16px/22px 'Open Sans', sans-serif;}
*:focus{outline:none}
::-webkit-input-placeholder{color:rgba(255,255,255, .5)}
::-moz-placeholder {color:rgba(255,255,255, .5)}
:-moz-placeholder {color:rgba(255,255,255, .5)}
:-ms-input-placeholder {color:rgba(255,255,255, .5)}
a{text-decoration:none}
a:hover{opacity:.6;text-decoration:underline}
h1, p{margin:0}
form h1{position:absolute;top:-50px;width:100%;left:0;color:#193B48;text-align:center;text-shadow:1px 1px #fff;}
label{width:100px;float:left;line-height:50px}
input[type=text]{background:rgba(255,255,255, .2);border:0;margin:0;font:normal 16px/20px 'Open Sans', sans-serif;padding:14px 10px;	color:#fff;width:100px;text-align:center;vertical-align:baseline;width:200px;float:left}
input[type=text]:active,
input[type=text]:focus{box-shadow:0 0 4px rgba(255,255,255, .8)}
input[type=submit]{display:block;margin-top:40px;width:100%;background:#193B48;box-shadow:0 2px 0 #000;border:0;color:#fff;	font:800 22px/50px 'Open Sans', sans-serif;text-transform:uppercase;float:left;position:relative}
input[type=submit]:active{top:2px;box-shadow:none}
.glow{animation:glow 1s infinite}
@keyframes glow{	0,100%{color:#fff}	50%{color:#FDA543}
}
.error-message{opacity:0;;z-index:-1;transition:opacity 250ms;color:#fff;background:#F63D3A;line-height:52px;text-align:center;width:100%;position:absolute;top:-65px;left:0}
.error-message.shown{opacity:1;z-index:1}
/*Icons, 16x16*/
.icn::before{display:inline-block;width:16px;height:16px;content:'';position:relative;top:3px;margin-right:5px;}
.icn.icn-codepen::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAt0lEQVR42sXTsQqCUBTG8Qjc09ldN4V6l3qP2ut1stUhHSvdLhgU+h6123/4BiMvGQUd+MHlePjg6HXUtu1XfhdgqbG81JCAKQqUOg8OcLCGwVGMes67gAgZdvCwFA8JckS2gAluyBQWoJJAvb1m3L4AH1ekOKHGQmr1Us34toCLhgo0mEtjD7CvEKLCGWFnhXvvCqoYOZLOS1zBxVbP4iGfcQODgxj1nE8u0gylcH6q313l//+ND240fI6rONevAAAAAElFTkSuQmCC);}
.icn.icn-heart::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAArElEQVQ4jc3SPQrCQBQE4A/1BKKnEI8h2CjY23iA9HoEbyGIB7G10AvYRQRLbUPUwkVCSPxJIQ5Mse/NzHu7LP+ENla4IMYU9cAZ9jhiiVbe3MAOtxwXgfn6NgQ/0S8QvWMPaiGgU+HK3WzAoUJAnD00cSpYs4xnBQ85QPKBOcGwbK3Rm5AkaF5ijLTAnIbeR5jgmjFfQ+0rRJmAqExUL2tg4/FD15h/O/13uAP+TU7uPo9xKwAAAABJRU5ErkJggg==);}
.icn.icn-comment::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKxJREFUOI210jsOQUEYxfGfR4OSXdiChF0IUdiItSgVeq9IJBoRpd4K1CqvwsUUXNcVJznJTCbn/33zzfCjMjFnWVSi9R7npMAmZjjgEvmAOVpxRctYBKF3XgadPZTDKkH47jXyIaD9RfjuDrdBQf3DbF6pEQJOKQCnEDBNAZiEmwxGkt9/5sVzFjFIEB6iFNdaDX3scAyCY9HgvlXP8wMV0gCgiy02qKaF/EdXo/NMvKd9uQsAAAAASUVORK5CYII=);}
.icn.icn-view::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA7ElEQVQ4jcXSMUpDURAF0BMhYi1oJNhZGYighQsQK7G0cx+CLsR96A4SIdlBUNCIRKy0UFEQRC2cBy+PfE2lA5///ty58/69M/x31H7Ir6AZ33e4wudvDWdxgMsozp8hDjFXRW5hkBGe0Ecvzil/jtWSvI7HrOgMSxneQCfDH9BO4CJuMvAVy9gJ3UPshh8vhaQFOC209qLxdZYbRa5b1J7MYL6Q8xHvfEK1AktRhw28TZCwFTffYnuChFF4A/bxbnoTn7FZ/I0945OoGuMF1kpyiiaOcW/crOT6kWKRqla57nuVG0GeepX/Pr4AgepbklEkZ7YAAAAASUVORK5CYII=);}
/*Preloader*/
.preload{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0;height:0;	transition:height 450ms, width 450ms}
.loading .preload{width:100px;height:100px;opacity:1}
.preload hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.preload :first-child{background:#19A68C;animation-delay:-1.5s}
.preload :nth-child(2){background:#F63D3A;animation-delay:-1s}
.preload :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.preload :last-child{background:#193B48}
.preload::after{position:absolute;bottom:-70px;left:-50px;width:200px;text-align:center;color:#19A68C;}
.loading .preload::after{content:attr(data-preload);}
@keyframes spin{ /*Since IE HATES transforms, we're gonna use abs. positioning*/ 0%,100%{top:0;left:0} 25%{top:0;left:60%} 50%{top:60%;left:60%} 75%{top:60%;left:0}
}
form{width:320px;background:#19A68C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:50px;	border-radius:5px;color:#fff;transition:all 450ms;z-index:10}
.loading form,
.loaded form{top:-50%}
#chart{width:100%;opacity:0;transition:opacity 450ms;overflow:hidden;}
.loaded #chart{opacity:1}
.overview-bar{width:100%;font-size:14px;color:#19A68C;margin:5px 0 20px;text-align:center}
.overview-bar .icn{margin:0 10px;}
.chart-username{color:#19A68C}
.chart-label{color:#193B48;font-size:13px;}
.closeBtn{width:40px;height:40px;opacity:0;position:fixed;top:12px;right:-40px;cursor:pointer;transition:all 250ms;}
.closeBtn:hover{transform:rotate(180deg)}
.closeBtn::after,
.closeBtn::before{content:'';transition:background 250ms;width:56px;height:2px;background:#F63D3A;position:absolute;top:19px;left:-8px;transform:rotate(45deg)}
.closeBtn::after{transform:rotate(-45deg)}
.closeBtn:hover::before,
.closeBtn:hover::after{background:#19A68C}
.loaded .closeBtn{right:12px;opacity:1} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- READ THE PEN DESCRIPTION/INFO -->
<!-- Kudos to @TimPietrusky for his codepen-awesomepi -->
<!-- https://github.com/TimPietrusky/codepen-awesomepi -->
<form>	<h1>CodePen Stats Checker</h1>	<p class="error-message"></p>	<label for="username">Username:</label>	<input type="text" id="username" placeholder="CodePen Username" value="zerospree" autocomplete="off" />	<input type="submit" value="Go" />
</form>
<div id="chart"></div>
<span class="closeBtn" title="Close Chart"></span>
<div class="preload hidden"><hr/><hr/><hr/><hr/></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://code.highcharts.com/highcharts.js'></script> <script src="js/index.js"></script>
</body>
</html>

CodePen Stats Checker - Script Codes CSS Codes

html, body{margin:0;background:#ECF0F1;font:normal 16px/22px 'Open Sans', sans-serif;}
*:focus{outline:none}
::-webkit-input-placeholder{color:rgba(255,255,255, .5)}
::-moz-placeholder {color:rgba(255,255,255, .5)}
:-moz-placeholder {color:rgba(255,255,255, .5)}
:-ms-input-placeholder {color:rgba(255,255,255, .5)}
a{text-decoration:none}
a:hover{opacity:.6;text-decoration:underline}
h1, p{margin:0}
form h1{position:absolute;top:-50px;width:100%;left:0;color:#193B48;text-align:center;text-shadow:1px 1px #fff;}
label{width:100px;float:left;line-height:50px}
input[type=text]{background:rgba(255,255,255, .2);border:0;margin:0;font:normal 16px/20px 'Open Sans', sans-serif;padding:14px 10px;	color:#fff;width:100px;text-align:center;vertical-align:baseline;width:200px;float:left}
input[type=text]:active,
input[type=text]:focus{box-shadow:0 0 4px rgba(255,255,255, .8)}
input[type=submit]{display:block;margin-top:40px;width:100%;background:#193B48;box-shadow:0 2px 0 #000;border:0;color:#fff;	font:800 22px/50px 'Open Sans', sans-serif;text-transform:uppercase;float:left;position:relative}
input[type=submit]:active{top:2px;box-shadow:none}
.glow{animation:glow 1s infinite}
@keyframes glow{	0,100%{color:#fff}	50%{color:#FDA543}
}
.error-message{opacity:0;;z-index:-1;transition:opacity 250ms;color:#fff;background:#F63D3A;line-height:52px;text-align:center;width:100%;position:absolute;top:-65px;left:0}
.error-message.shown{opacity:1;z-index:1}
/*Icons, 16x16*/
.icn::before{display:inline-block;width:16px;height:16px;content:'';position:relative;top:3px;margin-right:5px;}
.icn.icn-codepen::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAt0lEQVR42sXTsQqCUBTG8Qjc09ldN4V6l3qP2ut1stUhHSvdLhgU+h6123/4BiMvGQUd+MHlePjg6HXUtu1XfhdgqbG81JCAKQqUOg8OcLCGwVGMes67gAgZdvCwFA8JckS2gAluyBQWoJJAvb1m3L4AH1ekOKHGQmr1Us34toCLhgo0mEtjD7CvEKLCGWFnhXvvCqoYOZLOS1zBxVbP4iGfcQODgxj1nE8u0gylcH6q313l//+ND240fI6rONevAAAAAElFTkSuQmCC);}
.icn.icn-heart::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAArElEQVQ4jc3SPQrCQBQE4A/1BKKnEI8h2CjY23iA9HoEbyGIB7G10AvYRQRLbUPUwkVCSPxJIQ5Mse/NzHu7LP+ENla4IMYU9cAZ9jhiiVbe3MAOtxwXgfn6NgQ/0S8QvWMPaiGgU+HK3WzAoUJAnD00cSpYs4xnBQ85QPKBOcGwbK3Rm5AkaF5ijLTAnIbeR5jgmjFfQ+0rRJmAqExUL2tg4/FD15h/O/13uAP+TU7uPo9xKwAAAABJRU5ErkJggg==);}
.icn.icn-comment::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKxJREFUOI210jsOQUEYxfGfR4OSXdiChF0IUdiItSgVeq9IJBoRpd4K1CqvwsUUXNcVJznJTCbn/33zzfCjMjFnWVSi9R7npMAmZjjgEvmAOVpxRctYBKF3XgadPZTDKkH47jXyIaD9RfjuDrdBQf3DbF6pEQJOKQCnEDBNAZiEmwxGkt9/5sVzFjFIEB6iFNdaDX3scAyCY9HgvlXP8wMV0gCgiy02qKaF/EdXo/NMvKd9uQsAAAAASUVORK5CYII=);}
.icn.icn-view::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA7ElEQVQ4jcXSMUpDURAF0BMhYi1oJNhZGYighQsQK7G0cx+CLsR96A4SIdlBUNCIRKy0UFEQRC2cBy+PfE2lA5///ty58/69M/x31H7Ir6AZ33e4wudvDWdxgMsozp8hDjFXRW5hkBGe0Ecvzil/jtWSvI7HrOgMSxneQCfDH9BO4CJuMvAVy9gJ3UPshh8vhaQFOC209qLxdZYbRa5b1J7MYL6Q8xHvfEK1AktRhw28TZCwFTffYnuChFF4A/bxbnoTn7FZ/I0945OoGuMF1kpyiiaOcW/crOT6kWKRqla57nuVG0GeepX/Pr4AgepbklEkZ7YAAAAASUVORK5CYII=);}
/*Preloader*/
.preload{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0;height:0;	transition:height 450ms, width 450ms}
.loading .preload{width:100px;height:100px;opacity:1}
.preload hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.preload :first-child{background:#19A68C;animation-delay:-1.5s}
.preload :nth-child(2){background:#F63D3A;animation-delay:-1s}
.preload :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.preload :last-child{background:#193B48}
.preload::after{position:absolute;bottom:-70px;left:-50px;width:200px;text-align:center;color:#19A68C;}
.loading .preload::after{content:attr(data-preload);}
@keyframes spin{ /*Since IE HATES transforms, we're gonna use abs. positioning*/ 0%,100%{top:0;left:0} 25%{top:0;left:60%} 50%{top:60%;left:60%} 75%{top:60%;left:0}
}
form{width:320px;background:#19A68C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:50px;	border-radius:5px;color:#fff;transition:all 450ms;z-index:10}
.loading form,
.loaded form{top:-50%}
#chart{width:100%;opacity:0;transition:opacity 450ms;overflow:hidden;}
.loaded #chart{opacity:1}
.overview-bar{width:100%;font-size:14px;color:#19A68C;margin:5px 0 20px;text-align:center}
.overview-bar .icn{margin:0 10px;}
.chart-username{color:#19A68C}
.chart-label{color:#193B48;font-size:13px;}
.closeBtn{width:40px;height:40px;opacity:0;position:fixed;top:12px;right:-40px;cursor:pointer;transition:all 250ms;}
.closeBtn:hover{transform:rotate(180deg)}
.closeBtn::after,
.closeBtn::before{content:'';transition:background 250ms;width:56px;height:2px;background:#F63D3A;position:absolute;top:19px;left:-8px;transform:rotate(45deg)}
.closeBtn::after{transform:rotate(-45deg)}
.closeBtn:hover::before,
.closeBtn:hover::after{background:#19A68C}
.loaded .closeBtn{right:12px;opacity:1}

CodePen Stats Checker - Script Codes JS Codes

$(function(){	var $preloader = $('.preload'), $error = $('.error-message'), $username = $('#username');	$('form').on('submit', function(e){	e.preventDefault();	var username = $username.blur().val();	if(username.length > 0){	$('body').addClass('loading');	var objData = {	comments : 0, hearts : 0, views : 0, pensNo : 0, // Christmas Tree for teh lolz =3 aComments : [] ,aHearts : [ ] ,aViews : [ ] ,aTitles : [ ] ,aLinks : []	}	getPensData(1, username, objData);	}	else $('label[for=username]').addClass('glow');	});	$username.on('focus', function(){	$('label[for=username]').removeClass('glow');	$error.removeClass('shown');	});	$('.closeBtn').on('click', function(){	$('body').removeClass('loaded');	setTimeout(function(){	$('#chart').empty();	}, 450);	});	var getPensData = function(page, username, objData){	$.ajax({	dataType : 'jsonp',	jsonp : 'jsonp',	url : 'http://codepen-awesomepi.timpietrusky.com/'+username+'/public/'+page,	success : function(data){	var status = data.status.code, content = data.content;	if(content){	var pens = content.pens;	$preloader.attr('data-preload', 'Checking pens '+objData.pensNo +' to '+ (pens.length + objData.pensNo) +'...');	for(var i=0; i < pens.length; i++){	var pen = pens[i], penTitle = pen.title ? pen.title : 'Untitled Pen by '+username, penViews = pen.views, penComments = pen.comments, penHearts = pen.hearts;	objData.views += penViews;	objData.aViews.push(penViews);	objData.comments += penComments;	objData.aComments.push(penComments);	objData.hearts += penHearts;	objData.aHearts.push(penHearts);	objData.aTitles.push(penTitle);	objData.aLinks.push(pen.url['details']);	objData.pensNo++;	}	getPensData(page+1, username, objData);	}	else{	$('body').removeClass('loading');	$preloader.removeAttr('data-preload');	if(objData.pensNo > 0) runChart(username, objData);	else if(status == 1337) $error.text('That user does not exist, Monsieur.').addClass('shown');	else $error.text('That user has no pens, Monsieur.').addClass('shown');	}	},	error : function(){	$('body').removeClass('loading');	$preloader.removeAttr('data-preload');	$error.text('Whoops! Something went wrong...').addClass('shown');	}	});	}	var addLegendLinks = function(links){	// hacky way of adding label anchors because they have	// a tendency to break after using the legend filters	// if inserted right in the formatter	$.each($('.chart-label'), function(index){	$(this).attr('href', links[index]);	});	}	var runChart = function(username, objData){	// make sure the chart takes at least the entire height of the screen	var chartMinHeight = objData.pensNo*40, windowHeight = window.innerHeight, chartHeight = chartMinHeight > windowHeight ? chartMinHeight : windowHeight;	$('#chart').highcharts({	chart: {	type: 'bar',	backgroundColor: '#ECF0F1',	height: chartHeight,	events: {	load : function(){	addLegendLinks(objData.aLinks);	$('body').addClass('loaded');	},	redraw : function(){	addLegendLinks(objData.aLinks);	}	}	},	colors: ['#F63D3A', '#193B48', '#19A68C'],	title: {	useHTML : true,	text: '<h1><a class="chart-username" href="http://codepen.io/'+username+'/" target="_blank">'+username +'</a>\'s Pens Overview</h1>'+ '<p class="overview-bar">'+ '<span class="icn icn-codepen">'+objData.pensNo+'</span>'+ '<span class="icn icn-view">'+objData.views+'</span>'+ '<span class="icn icn-heart">'+objData.hearts+'</span>'+ '<span class="icn icn-comment">'+objData.comments+'</span>'+ '</p>',	style: { color: '#193B48' }	},	yAxis: {	title : {	text : ''	}	},	xAxis: {	categories: objData.aTitles,	labels: {	useHTML : true,	formatter: function(){	return '<a href="javascript:;" target="_blank" class="chart-label">'+this.value+'</a>';	}	}	},	tooltip: { followPointer : true },	credits: { enabled: false },	plotOptions: {	bar : { stacking: 'normal' },	areaspline : { fillOpacity: 0.1 },	series : { groupPadding: .15 }	},	series: [{	name: 'Hearts',	data: objData.aHearts	}, {	name: 'Comments',	data: objData.aComments	}, {	name: 'Views',	data: objData.aViews	}]	});	}
});
CodePen Stats Checker - Script Codes
CodePen Stats Checker - Script Codes
Home Page Home
Developer ZeroSpree
Username zerospree
Uploaded July 13, 2022
Rating 4.5
Size 9,083 Kb
Views 62,744
Do you need developer help for CodePen Stats Checker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ZeroSpree (zerospree) Script Codes
Name
Suspecting Minion
CSS Coordinates
RIP flashdrives
Just another Button
Mr. C
Sublime Skin for CodePen Embeds
Waving Santa
Programmer
Steve Jobs
Hexagon exercise.
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!