Codepen User Card Generator - Open Source Tools

Codepen User Card Generator - Open Source Tools

Codepen User Card Generator - Open Source Tools

Today in this article I am going to share with you a source code of an tool. The name of this tool is codepen user card generator.

Basically the functionality of this user card generator for codepen is that you simply have to enter the username of any codepen member or user and this tool will generate a card for that user.

You will be provided with the source code of that card which you can add to your website to show up info about admin.

You can also use that user card as a widget in blogger.

The Demo of this tool will be like this.

Codepen User Card Generator - Open Source Tools

When you will enter the username of any codepen user card data will be updated in real-time and you will get this kind of code which you can use to add that card to your website.
Codepen User Card Generator - Open Source Tools

How do you do programmers today we are going to design Codepen User Card Generator

As you know the HTML code is required for that so we should have some HTML code first. Below is the HTML code.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:

HTML code for Codepen User Card Generator :

<link rel="stylesheet" href=""><link rel='stylesheet' href=',400,600,700,800'><div class="card-footer"><div class="card-footer__pens"><span>231</span><div class="label">Pens</div></div><div class="card-footer__followers"><span>0</span><div class="label">Followers</div></div><div class="card-footer__following"><span>0</span><div class="label">Following</div></div></div></div></div><pre class="code"></pre><script src=''></script> 

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

If you want to change anything or add anything to this card you simply have to add that elements in the above HTML code and that element will be added to that card.
Without CSS our this script (Codepen User Card Generator) will never look delicate. So here we are, our HTML code is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Codepen User Card Generator you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Codepen User Card Generator :

body{background:#F3F3F3;color:#666666;font-size:14px;font-family:'Open Sans';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input{display:block;background:rgba(0, 0, 0, 0.1);border:0;border-radius:2px;margin:20px auto 10px;padding:15px 20px;color:#666666;line-height:normal;font-size:14px}label{display:block;margin:0 0 40px;font-size:12px;text-align:center}label:before{content:'Username:';font-weight:600}.card{background:#FFFFFF;width:300px;border-radius:4px;box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);margin:0 auto;overflow:hidden}.card-header{position:relative;background:#303841;height:200px;text-align:center;overflow:hidden}.card-header__avatar{background:#303841;background-position:center 30%;background-size:100%;height:100%;width:100%}.card-header__follow{position:absolute;top:20px;right:20px;background:#FFFFFF;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);padding:6px 10px;color:#333333;font-size:10px;font-weight:600;line-height:normal;text-decoration:none;text-transform:uppercase}.card-content{text-align:center;padding:30px 20px}.card-content__username{margin:0 0 10px;color:#333333;font-size:14px;font-weight:600;text-transform:uppercase}.card-content__username .badge{display:inline-block;background:#FCD000;border-radius:2px;margin:0 10px 0;padding:4px;color:#333333;font-size:10px;font-weight:600;vertical-align:middle}.card-content__bio{color:#666666;font-size:12px}.card-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;background:#F3F3F3;padding:15px 40px;color:#333333;font-size:14px;font-weight:600;text-align:center}.card-footer .label{display:block;margin:4px 0 0;color:#666666;font-size:10px;font-weight:400}.code{background:rgba(0, 0, 0, 0.1);max-width:600px;border-radius:2px;margin:40px auto 100px;font-family:monospace;overflow:hidden;overflow-x:auto}.code:before{content:'HTML Code';display:block;padding:20px 20px 0;color:#333333;font-weight:600}

If you want to implement or add this card simply copy the code generated by this tool and to customise that card you have to copy the above CSS code.
So we have written HTML code and customised it using CSS and now we will add some functionality in this project (Codepen User Card Generator) to make it work as we want it to be.

To make this project (Codepen User Card Generator) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code for Codepen User Card Generator :

$( document ).ready(function() {
var username = "softwebtuts";
$("input").keyup(function() {
username = $(this).val();
getData = function(username) {
$.getJSON("" + username, function(resp) {
if (resp.success) {
$(".card-header__avatar").css("background-image", "url(" + + ")");
$(".card-header__follow").attr("href", "" +;
if ( {
$(".card-content__username").append("<span class="badge">PRO</span>");
} else {
if ( {
} else {
$(".card-content__bio").text("Demo or it didn\"t happen.");
$(".card-footer__pens span").text(Math.floor((Math.random() * 100) + 1));
$(".card-footer__followers span").text(;
$(".card-footer__following span").text(;
} else {
$(".card-header__avatar").css("background-image", "url(");
$(".card-content__username").append("<span class="badge">PRO</span>");
$(".card-content__bio").text("Demo or it didn\"t happen.");
$(".card-footer__followers span").text("1337");
$(".card-footer__following span").text("1337");
getHTML = function() {
var cardHTML = $(".container").html();

I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.
event.dataContains the optional data passed to an event method when the current executing handler is bound
keyup()Attaches/Triggers the keyup event
on()Attaches event handlers to elements
ready()Specifies a function to execute when the DOM is fully loaded
floor()Returns the largest integer less than or equal to a number.
log()Returns the natural logarithm (base E) of a number.
random()Returns a pseudo-random number between 0 and 1.

You will only need JavaScript to run this tool if you want to implement this card on your blogger blogger any website then you don't need any JavaScript code for that.

To Sum Up :

So here we are, We have done and our project Codepen User Card Generator is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Codepen User Card Generator) File :

Codepen User Card
File Size 5.11 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it i thing you may have got your answer and i think this will help you alot if it did leave your feedback in the comment section below i will be glad to hear from you.
Thank you !

No Comment

Help us improve this article by leaving your feedback below.
Add Comment