Camper News

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Camper News</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

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

  
</head>

<body>

  <div class= "text-center" id="header">
  <h1>Camper News</h1>
  <h2> Interesting articles <small>from</small> around the web.</h2>
</div> <!-- end header -->

<div id ="loading" class="col-md-12 text-center col-xs-12"><i class="fa fa-spinner fa-spin"></i></div>
<button class="btn" id="arrow-div"> <i class="fa fa-angle-up"></i>
 </button>

<div class=" col-xs-12" id="data-field">
</div> <!-- end data field -->


<nav class="navbar navbar-default navbar-fixed-bottom">
  <a href="https://www.freecodecamp.com/stories/submit" class="text-center" target="_blank">
    <h2> Submit a link </h2> </a>
</nav><!-- end footer -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/MikeAlbo/camper-news-rxQPKj */
@import url(https://fonts.googleapis.com/css?family=Karla|Crimson+Text);
html, body {
  height: 100%;
  font-family: 'Karla', sans-serif;
  background-color: rgba(255, 250, 250, 0.6);
  width: 100%;
}

h1 {
  font-family: 'Crimson Text', serif;
  font-size: 5em;
  margin-top: -.1em;
  color: #4b4b4b;
}

#header {
  height: 16%;
  z-index: 100;
  background-color: rgba(255, 250, 250, 0.9);
  top: 0;
  position: fixed;
  color: white;
  width: 100%;
  padding-top: .5em;
}
#header span {
  font-size: 3em;
  margin-top: 2em;
}

h2 {
  font-size: 1.3em;
  margin-top: .5em;
  color: #4b4b4b;
}

#footer {
  top: 90%;
  height: 10%;
  background-color: gray;
}

#data-field {
  top: 15%;
  width: 90%;
  margin-left: 5%;
}

.data-item:hover {
  background-color: rgba(200, 220, 250, 0.7);
}

.data-item {
  overflow: hidden;
  margin: 1em 2.5% 1em 2.5%;
  height: 300px;
  padding: .1em .2em 0 .2em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 1px solid rgba(100, 100, 100, 0.3);
  width: 20%;
}
.data-item a {
  text-decoration: none;
  color: #4b4b4b;
}
.data-item img {
  width: 100%;
  height: auto;
}
.data-item h3 {
  font-size: 1.3em;
  background-color: rgba(25, 25, 25, 0.8);
  padding: 15%;
  color: white;
  margin-bottom: 20%;
  width: 100%;
  bottom: 0;
  z-index: 201;
  position: absolute;
  left: 0;
}

.data-item-text {
  margin-top: 2%;
}

.rank {
  font-size: 1em;
  position: absolute;
  bottom: 0px;
  right: 15px;
  color: #4b4b4b;
}
.rank i {
  color: red;
  padding-left: 5px;
}

.user {
  position: absolute;
  left: 15px;
  top: 90%;
  font-size: 1em;
}
.user span {
  font-size: .6em;
}

.description {
  border-bottom: 1px solid rgba(150, 150, 150, 0.7);
  color: #646464;
  padding: 1em;
  font-size: .8em;
}

.posted-by span {
  font-size: 1.1em;
  font-weight: bold;
}

.end-news {
  margin-bottom: 3em;
  color: #323232;
}
.end-news h2 {
  margin-bottom: -.5em;
}
.end-news p {
  font-size: 2em;
}

.navbar-fixed-bottom {
  background-color: #323232;
}
.navbar-fixed-bottom h2 {
  color: white;
}
.navbar-fixed-bottom h2:hover {
  color: #32c8fa;
}
.navbar-fixed-bottom a {
  text-decoration: none;
}

#arrow-div {
  color: white;
  font-size: 3em;
  z-index: 1000;
  position: fixed;
  top: 80%;
  right: 2%;
  border: 1px solid white;
  border-radius: 10%;
  background-color: rgba(50, 50, 50, 0.5);
  padding: 0px 10px;
}

#loading {
  font-size: 6em;
  z-index: 2000;
  top: 50%;
  color: #32c8fa;
  position: fixed;
}


/*Downloaded from https://www.codeseek.co/MikeAlbo/camper-news-rxQPKj */

var jsonData, dataItems = [];
var dataField = $("#data-field");
var arrow = $("#arrow-div");
var arrowTween = new TimelineMax({paused: true});
arrowTween.from(arrow, 2, {autoAlpha: 0});
var arrowTweenBool = 0;
loading(0);

function retrieveData(){
  $.getJSON("https://www.freecodecamp.com/news/hot", function(json){
  jsonData = json;
  //console.log(jsonData[1].rank);
  loadAnimations(); // loads animations after data has been built    
}); }; 

// onload function
function loadAnimations(){
 
 var i = 0;
 var count = 8;
 var length = jsonData.length;
 var preLoadBool = 0;
 var countBool = 0; 
  
  function countFunction(){
    if( count < length){
      count +=4;
    } else if (count >= length){
      count = length;
    }
    return count;
  }

 if (preLoadBool == 0){
   
          var x = "<div id='top-of-page'></div>";
   while(i < count){
          x = "<div id='" + jsonData[i].id + "' class= 'col-xs-12 animated fadeInUp data-item '>";
          x += "<a href='" + jsonData[i].link + " target= '_blank'>"
          if(jsonData[i].image != ""){
            x += "<img src=" + jsonData[i].image + ">";
          }  else {
            x += "<img src=" + jsonData[i].author.picture + ">";
          };
     
          x += "<div class='data-item-text'>";
          x += "<h3 class='text-center'>" + jsonData[i].headline + "</h3>";
          x += "<p class='user'><span>posted by: </span>" + jsonData[i].author.username + "</p>";
          x += "<p class='rank'><i class='fa fa-heart-o'></i> " + jsonData[i].rank + "</p></div></a></div>";
      

          loading(1);
          dataField.append(x);
                 i++;
        }; 

    };
  
  
  
 $(window).scroll(function() {
      
   arrowTweenCall(arrowTweenBool);
   arrowTweenBool = 1;
   
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
      loadTween.play();
    
      if( count <= length) {
        
         countFunction();
          while(i < count){
           var x = "<div id='" + jsonData[i].id + "' class= 'col-xs-12 animated fadeInUp data-item '>";
          x += "<a href='" + jsonData[i].link + " target= '_blank'>"
          if(jsonData[i].image != ""){
            x += "<img src=" + jsonData[i].image + ">";
          }  else {
            x += "<img src=" + jsonData[i].author.picture + ">";
          };
     
          x += "<div class='data-item-text'>";
          x += "<h3 class='text-center'>" + jsonData[i].headline + "</h3>";
          x += "<p class='user'><span>posted by: </span>" + jsonData[i].author.username + "</p>";
          x += "<p class='rank'><i class='fa fa-heart-o'></i> " + jsonData[i].rank + "</p></div></a></div>";

 
          dataField.append(x);
                 i++;
                   
        }; 
      };
      
      if(countFunction() ==  i && countBool == 0){
        dataField.append("<div class='col-md-12 col-xs-12 text-center end-news'><h2> The End <br> <small> feel free to contribute by submitting a link below </small></h2><br><p><span class='glyphicon glyphicon-arrow-down'></span></p></div>");
      arrowTweenCall(arrowTweenBool);
      countBool = 1; 
    
      }
     
    
    } 
   
   
   
   $("#arrow-div").click(function(){
     $("html, body").animate({ scrollTop: 0 });
   });
}) ;
  
  
  
} // end loadanimations!!!
  
retrieveData(); //calls the function to retrieve data after everything else has loaded



var header = $("#header");
var subHeader = $("#header h2");
var title = $("#header h1");




var loadTween = new TimelineMax({ paused: true, yoyo: true});

loadTween.to(dataField, 1, { autoAlpha: 1});

$(arrow).hover(function(){
  $(this).css("color", "rgba(50,200,250,1)");
}, function(){
  $(this).css("color", "white");
})




function arrowTweenCall(x){
  if (x == 0 ){
    arrowTween.restart();
  } 
};


// var scrollPlace = $(window).height();

/*function pageScroll() {
    	window.scrollBy(0,scrollPlace); // horizontal and vertical scroll increments
    }; */




// loading icon

var loadingIcon = $("#loading");
var loadingTween = new TimelineMax({paused:true, yoyo: true});
loadingTween.to(loadingIcon, .5, {autoAlpha: 0});
function loading(x){
   if (x == 1){
    loadingTween.restart();
  };
}

Comments