Objects

In this example below you will see how to do a Objects with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bonzaipenguin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bonzaipenguin ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Objects</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h3 class="col-md-8" data-count="tileCount"></h3>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bonzaipenguin/objects-aAtnm */
.tile{
  height:100px;
  line-height:100px;
  background:#09f;
  border:5px solid #fff;
  text-align:center;
  color:#fff;
  text-shadow:0 0 5px rgba(0,0,0,0.9);
  cursor:pointer;
  font-size:1.5em;
  
}

/*Downloaded from https://www.codeseek.co/bonzaipenguin/objects-aAtnm */
var tileGrid = (function() {
  var _tileGrid = {
    tileList: [],
    tileImg: ['http://payload203.cargocollective.com/1/8/282864/6367350/DSC_0058_900.JPG','http://payload175.cargocollective.com/1/8/282864/5815632/9042399407_bf04388aca_o_900.jpg','http://payload88.cargocollective.com/1/8/282864/4071568/DSC_0817_900.jpg','http://payload175.cargocollective.com/1/8/282864/5804803/DSC_0294_900.jpg','http://payload175.cargocollective.com/1/8/282864/5815628/DSC_0631_1_900.jpg','http://38.media.tumblr.com/07cbec0c0cf8d6ddb1cc75e2673ec47f/tumblr_n7856c5F3y1sfie3io1_1280.jpg','http://38.media.tumblr.com/393be10656d995b450dd3127ac264e2b/tumblr_n75yr5NJ5L1sfie3io1_1280.jpg','http://38.media.tumblr.com/56bd4fd8e63206fed5784ceb47cc3790/tumblr_n75yqoaaUW1sfie3io1_1280.jpg','http://37.media.tumblr.com/202eaaee435ccf7d93d89f34cf26d884/tumblr_n75yqbQ3vw1sfie3io1_1280.jpg','http://38.media.tumblr.com/5be6a52372f622728adb07566fc1e305/tumblr_n7fgokF2Ul1st5lhmo1_1280.jpg','http://31.media.tumblr.com/cd40dba26eabfc0901892be37f207cf6/tumblr_n7fgl3sQS61st5lhmo1_1280.jpg','http://38.media.tumblr.com/8d2189abeb32be278934468c200b31fa/tumblr_n7fftg5Ml61st5lhmo1_1280.jpg'],
    tile: function(){
      var $backgroundImg = (_tileGrid.tileImg[Math.floor(Math.random()*_tileGrid.tileImg.length)]);
      var $tile = $('<div class="col-md-4 tile">I need coffee.</div>');
      $tile.css({'background-image': 'url('+$backgroundImg+')','background-size': '100%','background-repeat':'no repeat','background-position':'50% 50%'});

      $tile.on('click', function(){
        $tile.css({'background': '#09f','text-shadow':'0 0 0'});
        _tileGrid.tileMenu.append($tile);
        _tileGrid.tileList.push($tile);
        $('[data-count="tileCount"]').html(_tileGrid.tileList.length);
      });
      return $tile;
    },
    container: function(n){
      var $container = $('<div class="col-md-8"></div>');
      for (i=0; i<n; i++){
        $container.append(_tileGrid.tile());
      }
      return $container;
    },
    tileMenu: $('<div class="col-md-4"></div>')
  };
  return {
    awesomeness: function(num) {
      return _tileGrid.container(num);
    },
    moreAwsomness: function() {
      return _tileGrid.tileMenu;
    }
  }
})();

$('body').append(tileGrid.awesomeness(27));
$('body').append(tileGrid.moreAwsomness());

Comments