index.html

<div class="container" >
  <h2>My Portfolio</h2>
  <div class="row" id="work">
    <p>My work should be displayed here, if it isn't, please check your javascript settings.</p>
  </div><!-- end portfolio container -->
</div>

scripts.js

$(document).ready(function(){
   
  $('#para').stellar();
      

 $(function () {
   $('#item1').tooltip();
 });

  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });

  
  //Event Listeners
  
  //On keyup in textarea
  $("#Message").on("keyup", function() {
    
    var charCount = $("#Message").val().length;
    $("#char-count").html(charCount);
    
    if (charCount > 50) {
        //code
        $("#char-count").css("color", "red");
    } else {
        $("#char-count").css("color", "black");
    };
    
  });
  
  
  
  //On Submit Click
  $("#button").on("click", function() {
    
    var comment = $("#Message").val();
    console.log(comment);
    
    if (comment == "") {
        $("#Message").css("border", "2px solid red");
        //code      
    } else {
    $("#Message").css("border", "2px solid black");
    $("#Message").hide();
    $("#char-count").hide();
    $("#visible-comment").html(comment);
    return false;
};
  });
    
//Display Works Section
$("#work").html("");
for(var i=0; i<works.length; i++) {
    $("#work").append('<div class="col-md-3 col-xs-6">\
                      <a href="#" class="work-img">\
                      <img src="' + works[i].pic + '" class="img-responsive" />\
                       <span class="info"><p class="proj-title">Title:</p> ' + works[i].title + ' </span>\
                       </a>\
    </div>');
    var images = $("#work img");
  if(i%2 === 0){
    $(images[i]).css("border", "2px solid Red");
  } else {
    $(images[i]).css("border", "2px solid Green");
  };
    
};
   $(".work-img").mouseenter(function(){
  $(".info", this).show();
}).mouseleave(function(){
  $(".info", this).hide();
});
   
    
});

work.js

var works = [
    {
        title: "Project 1",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
    {
        title: "Project 2",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
    {
        title: "Project 3",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
    {
        title: "Project 4",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
    {
        title: "Project 5",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
    {
        title: "Project 6",
        pic:   "http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/blue_screen.jpg"
    },
]