.js for task 2.9

scripts.js

//twitter

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p =
 /^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js =
 d.createElement(s);js.id=id;js.src=p+
 '://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore
 (js,fjs);}}(document, 'script', 'twitter-wjs');

//facebook

(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;js =
 d.createElement(s); js.id = id;js.src =
 "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

//document ready

$(document).ready(function() {

  //smooth scrolling

  var $root = $('html, body');
    $('.navbar-nav a').click(function() {
      var href = $.attr(this, 'href');
      $root.animate({
      scrollTop: $(href).offset().top
      }, 500, function () {
      window.location.hash = href;
    })
  });

  //stellar parallax effect about page

  $.stellar();

  //tooltips

  $('#item1').tooltip();

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

  //contact form

  //submit button

  $("#submitButton").on("click", function () {
    var comment = $("#message-box").val();
    if(comment != ""){
      $("visible-comment").html(comment);
      console.log("comment");
      $("#message-box").hide("slow");
      $("#email").hide("slow");
      $("#name").hide("slow");
      $("#phone").hide("slow");
      return false;
    }
    else {
      $("#message-box").css("border", "2px solid red");
    }
  });

  //email red background

  $("#email").css("background", "pink");

  //keyup

  $("#message-box").on("keyup", function() {
    console.log("keyup happened");
    var charCount = $("#message-box").val().length;
    console.log(charCount);
    $("#char-count").html(charCount);
    if(charCount > 9) {
      $("#char-count").css("color", "green");
    }
    else {
      $("#char-count").css("color", "red");
    }
  });

  // work section

  for (var i = 0; i < works.length; i++) {
    $("#work1").append("\
      <div class='col-md-3 col-xs-8'>\
        <a href='#contact'class='work-img'>\
          <img class='img-responsive' src='" + works[i].pic + "' alt='future projects' title='Get in touch'>\
          <span class='info'><p class='proj-title'>Tittle:</p> [WORK TITLE] </span>\
        </a>\
      </div>\
    ");
    var images = $("#work1 img")
      if (i%2 === 0) {
        $(images[i]).css("border", "2px solid DodgerBlue");
      } else {
        $(images[i]).css("border", "2px solid salmon");
      };
  };

});