Randomized Honeycomb

index.html

<div id="grey-area"></div>
<div id="modal"><div id="topbar"><img src="" id="avatar"><div id="authorDateWrap"><div id="author"></div><div id="date"></div></div><div id="likes"><i class="fa fa-thumbs-up"></i></div></div>
  <div id="mainPic"></div>
  <div id="title"></div>
  <a href="" id="articleLink" target="_blank">Read more...</a></div>
<div id="fauxHeader"><div id="headerTitle">The Honeycomb</div><div id="headerDesc">A FreeCodeCamp Newsfeed</div></div>

<div id='mainDiv' class='main'>
<div id='row0' class='rows'></div>
<div id='row1' class='rows'></div>
<div id='row2' class='rows'></div>
<div id='row3' class='rows'></div>
<div id='row4' class='rows'></div>
<div id='row5' class='rows'></div>
<div id='row6' class='rows'></div>
<div id='row7' class='rows'></div>
<div id='row8' class='rows'></div>
<div id='row9' class='rows'></div>
  </div>

Randomized Honeycomb.markdown

Randomized Honeycomb

Takes a JSON newsfeed from FreeCodeCamp and formats articles into a randomized honeycomb pattern.

Credit for the hexagon formatting code here: http://jsfiddle.net/kizu/bhGn4/

Loads of inspiration from user web-tiki: http://codepen.io/web-tiki/pen/HhCyd

A Pen by Michael Howard on CodePen.

License.

script.js

var i = 0;
var row = 0;
var blank_num = 0;
var column = 0;

$("#grey-area").hide();
$("#modal").hide();

$.getJSON('http://www.freecodecamp.com/news/hot', function(data) {

  function content() {
    $('<div/>', {
      'class': 'hexagon hexagon' + (column%4),
      'id': 'newsWrapDiv' + i
    }).appendTo('#row' + row);

    //---------

    /* $('<a/>', {
       'class': 'newsLink',
       'id': 'Link' + i,
       'href': data[i].link,
       'target': '_blank'
     }).appendTo("#" + i);*/

    $('<div/>', {
      'class': 'hexagon-in1',
      'id': 'newsHexOne' + i
    }).appendTo('#newsWrapDiv' + i);

    $('<div/>', {
      'class': 'hexagon-in2',
      'id': 'newsHexTwo' + i
    }).appendTo('#newsHexOne' + i);

    if (data[i].image !== "") {
      $('#newsHexTwo' + i).css('background-image', 'url(' + data[i].image + ')');
    } else {
      $('#newsHexTwo' + i).css('background-image', 'url(' + data[i].author.picture + ')');
    }
    $('#newsHexTwo' + i).css('background-color', 'rgb(0,0,0,1)');

    $('<h1/>', {
      'class': 'teaser',
      'id': i,
      text: data[i].headline
    }).appendTo('#newsHexTwo' + i);

    i++;
    if (! (column++ % 4)){
      row++;
    }

    //modal window

    $('.hexagon').unbind("click").click(function() {
      //$('#test').html('WORKS')
      var cellNum = parseInt(event.target.id);
      
      function dateCreate(){
        var nowTime = Date.now();
        var postTime = data[cellNum].timePosted;
        var timeElapsed = nowTime - postTime;
        if(timeElapsed < 60000){
          $('#date').html("Posted " + Math.round(timeElapsed/1000) + " seconds ago");
        }
        else if(timeElapsed >= 60000 && timeElapsed < 120000){
          $('#date').html("Posted 1 minute ago");
        }
        else if(timeElapsed >= 120000 && timeElapsed < 3600000){
          $('#date').html("Posted " + Math.round((timeElapsed/1000)/60) + " minutes ago");
        }
        else if(timeElapsed >= 3600000 && timeElapsed < 7200000){
          $('#date').html("Posted 1 hour ago");
        }
        else if(timeElapsed >= 7200000 && timeElapsed < 86400000){
          $('#date').html("Posted " + Math.round(((timeElapsed/1000)/60)/60) + " hours ago");
        }
        else if(timeElapsed >= 86400000 && timeElapsed < 172800000){
          $('#date').html("Posted 1 day ago");
        }
        else if(timeElapsed >= 172800000 && timeElapsed < 604800000){
          $('#date').html("Posted " + Math.round((((timeElapsed/1000)/60)/60)/24) + " days ago");
        }
        else if(timeElapsed >= 604800000 && timeElapsed < 1209600000){
          $('#date').html("Posted 1 week ago");
        }
        else if(timeElapsed >= 1209600000 && timeElapsed < 2419200000){
          $('#date').html("Posted " + Math.round(((((timeElapsed/1000)/60)/60)/24)/7) + " weeks ago");
        }
        else if(timeElapsed >= 2419200000 && timeElapsed < 5184000000){
          $('#date').html("Posted 1 month ago");
        }
        else if(timeElapsed >= 5184000000 && timeElapsed < 31557600000){
          $('#date').html("Posted " + Math.round(((((timeElapsed/1000)/60)/60)/24)/30.42) + " months ago");
        }
        else if(timeElapsed >= 31557600000 && timeElapsed < 63115200000){
          $('#date').html("Posted 1 year ago");
        }
        else if(timeElapsed >= 63115200000){
          $('#date').html("Posted " + Math.round(((((timeElapsed/1000)/60)/60)/24)/365.25) + " years ago");
        }
        
      }
      
      dateCreate();
      //alert(event.target.id);
      $("#avatar").attr('src', data[cellNum].author.picture);
      $("#author").html(data[cellNum].author.username);
      if(data[cellNum].image !== ""){$("#mainPic").css("background-image",  "url('" + data[cellNum].image + "')");}
      else{
        $("#mainPic").css("background-image", "url('https://camo.githubusercontent.com/edde83bbe3872711faf6085b514bf2c21f3d0ea0/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f3532303132393337375f31323830783732302e6a7067')");
      }
      $("#articleLink").attr('href', data[cellNum].link);
      $('#title').html(data[cellNum].headline);
      if(data[cellNum].rank < 1000){
        $('#likes').append(data[cellNum].rank);
      }
      else if(data[cellNum].rank >= 1000 && data[cellNum].rank < 1000000){
        var rankK = data[cellNum].rank/1000;
        $('#likes').append(rankK.toFixed(1) +"K");
      } 
      else{
        var rankM = data[cellNum].rank/1000000;
        $('#likes').append(rankM.toFixed(1) +"M");
      }
      $("#grey-area").fadeIn('slow');
      $("#modal").fadeIn('slow');
    });

    $('#grey-area').unbind("click").click(function() {
      $("#grey-area").fadeOut('slow');
      $("#modal").fadeOut('slow', function() {
        $("#likes").html('<i class="fa fa-thumbs-up"></i>');
      });
      
    });

  }

  function blank() {

    $('<div/>', {
      'class': 'hexagon hexagon' + column,
      'id': 'blankImgWrap' + blank_num
    }).appendTo('#row' + row);

    $('<div/>', {
      'class': 'hexagon-in1',
      'id': 'blankHexOne' + blank_num
    }).appendTo('#blankImgWrap' + blank_num);

    $('<div/>', {
      'class': 'blank hexagon-in2',
      'id': 'blankHexTwo' + blank_num
    }).appendTo('#blankHexOne' + blank_num);
    blank_num++;
    /*if (column < 4) {
      column++;
    } else {
      column = 1;
      row++;
    }*/
    if (!(column++ % 4)) { row++ }
  }

  for (var j = 0; j < 10; j++) {
    var rand = Math.floor((Math.random() * 100) + 1);
    if (rand >= 1 && rand <= 50) {
      content();
      content();
      content();
      content();
    } else if (rand > 50 && rand <= 75) {
      if (rand > 50 && rand <= 56) {
        blank();
        content();
        content();
        content();
      } else if (rand > 56 && rand <= 62) {
        content();
        blank();
        content();
        content();
      } else if (rand > 62 && rand <= 68) {
        content();
        content();
        blank();
        content();
      } else if (rand > 68 && rand <= 75) {
        content();
        content();
        content();
        blank();
      }
    } else if (rand > 75 && rand <= 95) {
      if (rand > 75 && rand <= 78) {
        blank();
        blank();
        content();
        content();
      } else if (rand > 78 && rand <= 81) {
        blank();
        content();
        blank();
        content();
      } else if (rand > 81 && rand <= 84) {
        blank();
        content();
        content();
        blank();
      } else if (rand > 84 && rand <= 87) {
        content();
        blank();
        blank();
        content();
      } else if (rand > 87 && rand <= 91) {
        content();
        blank();
        content();
        blank();
      } else if (rand > 91 && rand <= 95) {
        content();
        content();
        blank();
        blank();
      }
    } else if (rand > 95 && rand < 100) {
      if (rand == 96) {
        blank();
        blank();
        blank();
        content();
      } else if (rand == 97) {
        blank();
        blank();
        content();
        blank();
      } else if (rand == 98) {
        blank();
        content();
        blank();
        blank();
      } else if (rand == 99) {
        content();
        blank();
        blank();
        blank();
      }
    } else if (rand == 100) {
      blank();
      blank();
      blank();
      blank();
    }

  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);

#fauxHeader{
  font-family: 'Amatic SC', cursive;
}
#headerTitle{
  font-size: 20vw;
  margin: 0 3vw -1vw 3vw;
}
#headerDesc{
  font-size: 8vw;
  margin: -1vw 4vw 2vw;
}
body{
  font-family: 'Open Sans', sans-serif;
  background: rgba(241,231,103,1);
background: -moz-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
background: -webkit-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -o-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -ms-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=1 );
  margin: 0 auto;
}

.main {
  width: 100vw;
  position: relative;
  margin: 0 auto;
}
/*blank{
  background-color: inherit;
}*/
.rows{
  width: 100vw;
  display: block;
  height: 21vw;
  position: relative;
}
.hexagon {
  color: rgba(255,255,255,0);
  
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
}
.hexagon:hover {
  color: rgba(255,255,255,1);
}

.hexagon a {
  width: 100%;
  height: 100%;
}

.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  /*background-image: url(http://placekitten.com/240/240);*/
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
  /*background-image: url(http://placekitten.com/241/241);*/
}

.hexagon-in2:hover {}

.hexagon0 {
  position: absolute;
  
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}

.hexagon1 {
  position: absolute;
  top: 10.4vw;
  right: 47vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
  
}

.hexagon2 {
  position: absolute;
  right: 29vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}

.hexagon3 {
  position: absolute;
  right: 10.9vw;
  top: 10.4vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}

.teaser{
  
  font-size: 1vw;
  text-align: center;
  overflow: hidden;
  /*margin: 0 auto;*/
  height: 3vw;
  padding: 8.5vw 10vw;
  text-align: center;
  background-color: rgba(0,0,0,0);
  transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -webkit-transition: all .25s ease-in-out;
}
.teaser:hover{
  background-color: rgba(0,0,0,0.7);
}

#modal{
  z-index: 999;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  height: auto;
  background-color: rgba(255,255,255,1);
   top:50%; left:50%; margin-left:-40%; margin-top:-20%;
  border: solid 1px;
}
#grey-area{
  z-index: 998;
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0,0,0,0.7);
}


#avatar{
  height: 7vw;
  width: 7vw;
  border-radius: 50%;
  margin: 1vw;
  display: inline-block;
  float: left;
}

#author{
  font-weight: bold;
  margin: 1vw 0 0 0;
  font-size: 2vw;
  display: block;
  
}

#mainPic{
  height: 30vw;
  width: 100%;
  background-size: cover;
}
#title{
  font-weight: bold;
  font-size: 2.5vw;
  margin: 0 0 0 1vw;
}
#articleLink{
  margin: 0 1vw 2vw 1vw;
  text-decoration: none;
  color: rgba(0,0,0,0.7);
  font-weight: bold;
  font-size: 1.5vw;
}
#likes{
  font-size: 2vw;
  font-weight: bold;
  float: right;
  display: inline-block;
  height: 7vw;
  width: 10vw;
  padding: auto;
  line-height: 7vw;
  text-align: center;
}

#date{
  margin: 0 0 1vw 0;
  display: block;
}
#authorDateWrap{
  display: inline-block;
}

@media screen and (min-width: 600px) and (orientation: portrait){
  #modal{
    top: 40%;
    margin-top: -50%;
  }
  #title{
    font-size: 4vw;
  }
  #author{
    font-size: 3vw;
  }
  #articleLink{
    font-size: 3vw;
  }
}
/*
.hexagon5 {
  position: absolute;
  left: 5.35vw;
  top: -20.5vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}

.hexagon6 {
  position: absolute;
  left: -11.95vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
  top: -10.4vw;
}

.hexagon7 {
  position: absolute;
  left: 40.6vw;
  top: -41vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}

.hexagon8 {
  position: absolute;
  left: 23.2vw;
  top: -30.8vw;
  width: 40vw;
  height: 20vw;
  margin: 0 0 0 -5vw;
  display: inline-block;
}


/*#mainDiv{
  width: 100%;
  height:100%;
}

.newsDiv{
  width: 70vw;
  height: 60vw;
  margin: 5vw auto;
}

.newsImgDiv{
  width: 100%;
  height: 70%;
}

*********************************/

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />