User profile generator using JSON API

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>



  <div id="outer-wrapper">
    <div id="profiles-container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-4">
              <h4>List of Users</h4>
            </div>
            <div class="col-xs-4" style="margin-top:.7em">
              <div class="spinner hidden" id="loading">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
              </div>
            </div>
            <div class="col-xs-4">
              <button class='btn btn-primary' id="generate-a-user">
                Generate A User
              </button>
            </div>
          </div>
        </div>
        <ul class="list-group" id='users-list'>
          <li class="list-group-item">
            <div class="container">
              <div class="row">
                <div class="col-xs-3">
                  <img class="img-thumbnail" src="https://randomuser.me/api/portraits/men/80.jpg" />
                </div>
                <div class="col-xs-7">
                  
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

'use strict';

$(document).ready(function(){
  $('.collapse').collapse();
  $("#generate-a-user").on("click", function(){
    $("#loading").toggleClass('hidden');
    $.ajax({
      url: 'https://randomuser.me/api/',
      dataType: 'json',
      success: function(data) {
        console.log(data);
        $("#users-list").prepend(
          CreateProfile(data)
        );
        $("#loading").toggleClass('hidden');
      }
    });
  });
  
  
  function CreateProfile(data){
    
    var userProfile = 
      '<li class="list-group-item">'
      + '<div class="thumbnail user-pic"><img src="' + data.results[0].picture.large + '"/><div>'
      + '</li>'
    ;
    return userProfile;
  }
  
});

#outer-wrapper{
  width: 70%;
  margin : 5em auto;
}

.user-pic{
  width: 128px;
  height: 128px;
}

/* From :  */
.spinner {
  margin: 0 auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

#A User profile genenrator using AJAX Requests and JSON API

This project is part of the Fellaga projects, some quick opensurce projects for
the sake of learning new technologies and make something out of it.

You can check all the projects created by the fellaga team from **[here][gh-link]**.
You can follow us in plunkr or in one of our channels:

+ [Beam.pro][beam-ch]
+ [Liveconding.tv][livecoding-ch]
+ [Twitch.tv][twitch-ch]
+ [HitBox.tv][hitbox-ch]

[gh-link]:http://github.com/fellaga
[beam-ch]:http://beam.pro/fellaga
[livecoding-ch]:http://livecoding.tv/olmezerreg
[twitch-ch]:https://www.twitch.tv/notfellaga
[twiter-ch]:twitter.com/notafellaga
[hitbox-ch]:http://hitbox.tv/fellaga