Objects

Tutorials of (Objects) by Jerusha johnson

<!DOCTYPE html>
<html >
<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/ */
.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/ */
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());

This awesome code ( Objects ) is write by Jerusha Johnson, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jerusha Johnson