LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



CodePen
Demo or it didn't happen.
CSS
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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
}
JS
$( document ).ready(function() {
  var username = 'andytran';

  $('input').keyup(function() {
    username = $(this).val();

    $('label').text(username);

    getData(username);
  });

  getData = function(username) {
    $.getJSON('http://cpv2api.com/profile/' + username, function(resp) {
      if (resp.success) {
        console.log('Successful');

        $('.card-header__avatar').css('background-image', 'url(' + resp.data.avatar + ')');
        $('.card-header__follow').attr('href', 'https://codepen.io/' + resp.data.username);


        if (resp.data.pro) {
          $('.card-content__username').text(resp.data.nicename);
          $('.card-content__username').append('PRO');
        } else {
          $('.card-content__username').text(resp.data.nicename);
        }

        if (resp.data.bio) {
          $('.card-content__bio').text(resp.data.bio);
        } 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(resp.data.followers);
        $('.card-footer__following span').text(resp.data.following);
      } else {
        $('.card-header__avatar').css('background-image', 'url(http://placehold.it/500/000/fff)');
        $('.card-content__username').text('CodePen');
        $('.card-content__username').append('PRO');
        $('.card-content__bio').text('Demo or it didn\'t happen.');
        $('.card-footer__followers span').text('1337');
        $('.card-footer__following span').text('1337');
      }

      getHTML();
    });
  }

  getHTML = function() {
    var cardHTML = $('.container').html();

    $('.code').text(cardHTML);
  }

  getData(username);
});

Description

Just checking out CodePen API v2 by Nate Wiley. It's pretty cool, I recommend checking it out. http://cpv2api.com/
Term
Mon, 11/27/2017 - 21:22

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv