A Pen by J. James Rockhill

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  J. James Rockhill</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <linkarea>
  
</linkarea>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-aGLvI */
@import url(https://fonts.googleapis.com/css?family=Dosis:400,200,500,700,800,600,300);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  font: 400 16px Dosis;
  color: rgba(30,30,30,0.8);
  background: rgba(30,30,30,0.8);
}


linkarea{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

linkcon{
  display: flex;
  flex-flow: column nowrap; 
  width: 30%;
  margin: 20px;
  min-height: 300px;
  align-self: stretch;
}

linkbox{
  display: flex;
  flex-flow: column nowrap;
  padding: 30px;
  flex-grow: 2;
}

redtop{
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
 padding: 0px 0px 5px 0px;
}

redsymbol{
  width: 30px;
  height: 30px;
  font-family: FontAwesome;
  display: flex;
  flex-flow: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
}

redtext{
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 2;
}

redlink{
 font-weight: 600;
 font-size: 0.9em;
}

redlink:before{
  content: '/r/';
}

redsource{
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: 600;
}

redsource:before{
  content: 'Link: ';
  font-weight: 300;
}

linktitle{
  font-weight: 600;
  font-size: 1.7em;
  line-height: 1.3;
  width: 100%;
  flex-grow: 2;
}

redauthor{
  font-size: 1.1em;
  font-weight: 500;
}

redauthor:before{
  content: 'posted by ';
  font-weight: 100;
  font-variant: small-caps;
}

.rlink{
  text-decoration: none;
  color: rgba(30,30,30,0.8);
}

.rlink:visited{
  text-decoration: none;
}

.rlink:active{
  text-decoration: none;
}

rbottom{
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 10px;
}

rbottomspace{
  height: 20px;
  flex-grow: 1;
  background: green;
}

rcorner{
  border-style: solid;
  border-width: 20px 20px 0 0;
}

/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-aGLvI */
$(document).ready(function(){
     
      var linklist=[
       'design_critiques',
       'design',
       'crappydesign',
       'userexperience',
       'webdev',
       'css',
       'jquery',
       'javascript',
       'php',
       'wordpress',
       'webhosting',
       'talesfromdesigners',
       'webmarketing',
       'dotcom',
       'somebodymakethis'];
       

  for (var x=0; x<linklist.length; x++){
  
  var con = document.createElement('linkcon');
  var element = document.createElement('linkbox');
  var topname = document.createElement('redlink');
  var toprow = document.createElement('redtop');
  var toppic = document.createElement('redsymbol');
  var textcon = document.createElement('redtext');
  var bottom = document.createElement('rbottom');
  var bspace = document.createElement('rbottomspace');
  var bcorner = document.createElement('rcorner');
  
  $(element).each(function(){
  
  $('linkarea').append(con);
  $(con).append(element);
  $(element).append(toprow);
  $(toprow).append(toppic);
  $(toppic).text('');
  $(toprow).append(topname);
  $(element).append(textcon);
  $(con).append(bottom);
  $(bottom).append(bspace,bcorner);

  var colorrange = 359;
  var colorvalue = Math.floor(Math.random()*colorrange) + 1;
  var randomcolor = "hsla("+colorvalue+", 90%, 85%, 1)";
  var randomcolor2 = "hsla("+colorvalue+", 90%, 60%, 1)";
  var borderrc = randomcolor2+"transparent transparent transparent";
    
  $(element).css('background',randomcolor);
  $(bspace).css('background',randomcolor);
  $(bcorner).css('border-color',borderrc);

  $(element).attr("id",linklist[x])
    
  var rname = linklist[x];
    
    var rlink = "<a class='rlink' href='https://reddit.com/r/" + rname+"'>"+rname+"</a>";
    
  $(topname).html(rlink);
  
  var boxid = $(element).attr('id');
    
  var linktitle = document.createElement('linktitle');
  var rsource = document.createElement('redsource');
  var rauthor = document.createElement('redauthor');
    
  $(textcon).append(linktitle, rauthor, rsource);

   var jsonurl = "https://www.reddit.com/r/"+boxid+"/top/.json";
    
    $.getJSON(jsonurl, function (json){
     
     var title = json.data.children[0].data.title;
      
     var author = json.data.children[0].data.author;
      
     var url = json.data.children[0].data.url;
      
     var domain = json.data.children[0].data.domain;
      
     var permalink = json.data.children[0].data.permalink;
     
     var titlelink = "<a class='rlink' href='http://reddit.com"+permalink+"'>"+title+"</a>";
      
     var author = "<a class='rlink' href='http://reddit.com/user/"+author+"'>"+author+"</a>"; 
      
     var rurl = "<a class='rlink' href='"+url+"'>"+domain+"</a>";

       
       $(rauthor).html(author);
       $(linktitle).html(titlelink);
       $(rsource).html(rurl);
     
     }); //endjson
                
  }); //foreach
    
 }//array
    
});

Comments