Last active
April 22, 2017 15:54
-
-
Save rfprod/95d7d0c05d035c178477 to your computer and use it in GitHub Desktop.
FreeCodeCamp Camper News
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss|3d-float' rel='stylesheet' type='text/css'> | |
| <div class="container-fluid nopadding"> | |
| <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="toggle-nav"> | |
| <div class="container-fluid"> | |
| <ul class="nav navbar-nav navbar-right font-effect-emboss"> | |
| <li class="nav-tabs"><a href="#news"><span class="glyphicon glyphicon-fire" ></span> FREECODECAMP CAMPER NEWS</a></li> | |
| <li class="nav-tabs"><a href="https://gist.github.com/rfprod/95d7d0c05d035c178477" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <a name="news"></a> | |
| <div class="home sect"> | |
| <div class="container-fluid"> | |
| <div class="col-md-12"> | |
| <h2 class="font-effect-3d-float"><span class="glyphicon glyphicon-fire" ></span> FreeCodeCamp<br>Camper News</h2> | |
| <div class="input-group input-group-sm"> | |
| <span class="input-group-addon" id="sizing-addon3"><span class="glyphicon glyphicon-search"></span></span> | |
| <input type="text" class="form-control srch" placeholder="News heading" aria-describedby="sizing-addon3" id="news-search" oninput="searchNews();"> | |
| </div> | |
| <p class="output font-effect-3d-float"> | |
| News output | |
| </p> | |
| <span class="credits font-effect-3d-float">credits <a href="http://www.freecodecamp.com/news/hot" target=_blank>freecodecamp api</a> - <a href="http://www.flaticon.com/authors/freepik" target=_blank>flaticon</a> - <a href="http://backgrounds.mysitemyway.com/" target=_blank>mysitemyway</a><br>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var apiEndpointURL = "http://www.freecodecamp.com/news/hot"; | |
| var output = ""; | |
| var id = []; // declared as global for searching purposes | |
| $(document).ready(function(){ | |
| output += "<div class='row'>"; | |
| getCamperNews(apiEndpointURL); | |
| }); | |
| function getCamperNews(endpointUrl){ | |
| var headline = [], timePosted = [], link = [], metaDescription = [], description = [], rank = [], image = [], storyLink = [], authorPicture = [], authorId = [], authorName = []; | |
| $.getJSON(endpointUrl, function(json){ | |
| //alert(json.length); | |
| var data = ""; | |
| for (var i=0;i<json.length;i++){ | |
| var jsonKeys = Object.keys(json[i]); | |
| for (var q=0;q<jsonKeys.length;q++){ | |
| var property = jsonKeys[q]; | |
| //alert(jsonKeys); | |
| if (json[i].hasOwnProperty(property)) { | |
| data = json[i][property]; | |
| if (typeof data === 'object'){ | |
| //alert(JSON.stringify(data)); | |
| if (property === 'author'){ | |
| var dKeys = Object.keys(data); | |
| var k = 0; | |
| for (var property in data) { | |
| property = dKeys[k]; | |
| if (property === 'picture'){authorPicture.push(data["picture"]);} | |
| if (property === 'userId'){authorId.push(data["userId"]);} | |
| if (property === 'username'){authorName.push(data["username"]);} | |
| k++; | |
| } | |
| } | |
| } | |
| if (property === 'id'){id.push(data);} | |
| if (property === 'headline'){headline.push(data);} | |
| if (property === 'timePosted'){timePosted.push(new Date(data));} | |
| if (property === 'link'){link.push(data);} | |
| if (property === 'metaDescription'){metaDescription.push(data);} | |
| if (property === 'description'){description.push(data);} | |
| if (property === 'rank'){rank.push(data);} | |
| if (property === 'image'){image.push(data);} | |
| if (property === 'storyLink'){storyLink.push(data);} | |
| } | |
| } | |
| var headingOutput = "<h4 class='news-heading' id='heading-"+id[i]+"'>"+headline[i]+"</h4>"; | |
| var descr = ""; | |
| if (metaDescription[i].length >= 100){ | |
| descr = metaDescription[i].substring(0,97)+"..."; | |
| }else{ | |
| descr = metaDescription[i]; | |
| } | |
| var descriptionOutput = "<p class='news-meta-descr' id='description-"+id[i]+"'>"+descr+"</p>"; | |
| var authorAndRankOutput = "<p class='news-author' id='author-"+id[i]+"'><img class='userpic' src='"+authorPicture[i]+"'/> "+authorName[i]+"<span class='rank'><span class='glyphicon glyphicon-thumbs-up'></span> "+rank[i]+"</span></p>"; | |
| var timestampOutput = "<p class='news-timestamp' id='timestamp-"+id[i]+"'>"+timePosted[i].toUTCString()+"</p>"; | |
| if (image[i] != ""){ | |
| output += "<a href='"+link[i]+"' class='item' id='news-"+id[i]+"' target=_blank title='"+storyLink[i]+"'><div class='well col-xs-12 col-sm-6 col-md-4 col-lg-3 news-unit' style='background:url("+image[i]+") center center / cover'>"+headingOutput+descriptionOutput+authorAndRankOutput+timestampOutput+"</div></a>"; | |
| }else{ | |
| output += "<a href='"+link[i]+"' class='item' id='news-"+id[i]+"' target=_blank title='"+storyLink[i]+"'><div class='well col-xs-12 col-sm-6 col-md-4 col-lg-3 news-unit'>"+headingOutput+descriptionOutput+authorAndRankOutput+timestampOutput+"</p></div></a>"; | |
| } | |
| if (i === json.length-1){ | |
| output += "</div>"; | |
| //alert(output); | |
| $(".output").html(output); | |
| $(".news-meta-descr").hide(); | |
| $(".item").mouseover(function(){ | |
| var newsItemId = $(this).attr("id"); | |
| var itemId = newsItemId.substring(5,newsItemId.length); | |
| //alert(itemId); | |
| if ($("#description-"+itemId).html() != ""){ | |
| $("#description-"+itemId).show(); | |
| } | |
| }).mouseout(function(){ | |
| var newsItemId = $(this).attr("id"); | |
| var itemId = newsItemId.substring(5,newsItemId.length); | |
| //alert(itemId); | |
| $("#description-"+itemId).hide(); | |
| }); | |
| } | |
| } | |
| //alert(link); | |
| }); | |
| } | |
| function searchNews(){ | |
| var inputString = document.getElementById("news-search").value; | |
| for (var k=0;k<id.length;k++){ | |
| var divNewsContainer = $("#news-"+id[k]); | |
| var divNewsHeadingText = $("#heading-"+id[k]).html().toLowerCase(); | |
| //alert(divNewsHeadingText); | |
| if (divNewsHeadingText.includes(inputString)){ | |
| $(divNewsContainer).show(); | |
| }else{ | |
| $(divNewsContainer).hide(); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/1201/full/white-washed-grunge-patterns-part-2-27.jpg') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;} | |
| .nopadding {padding: 0;} | |
| body {color:#ffffff; font-family: 'Play', sans-serif;font-size: 2.2em;} | |
| .navbar-brand {font-size: 1em;} | |
| .img-border {border-radius: 50%;height: 40vh;} | |
| .sect {padding-top: 2vh;} | |
| .social-btn-blk {background-color: #000000;} | |
| .social-btn-wht {background-color: #ffffff;} | |
| .img-fit{width:100%;} | |
| h2{text-align:center;margin-top:4vh;} | |
| p{margin-top:2vh;} | |
| .credits{display:block;text-align:center;font-size:0.75em;} | |
| .credits a:hover{text-decoration:none;} | |
| .output{text-align:center;} | |
| .output a{color:#ffffff;} | |
| .output a:hover{text-decoration:none;} | |
| .news-unit{height:15em;overflow:hidden;color:#ffff99;} | |
| .news-unit:hover{background-color:grey;color:#ffffff;} | |
| .news-heading,.news-meta-descr,.news-author,.news-timestamp{padding:0.4em;background-color:rgba(0, 0, 0, 0.8);border-radius:0.3em;} | |
| .news-meta-descr{font-size:0.65em;} | |
| .news-author{font-size:0.75em;text-align:left;} | |
| .userpic{width:3em;height:auto !important;border-radius:50%;font-size:0.75em;} | |
| .rank{display:inline-block;float:right;padding-top:0.40em;} | |
| .news-timestamp{font-size:0.45em;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment