HTML for task 2.11

index.html

//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'));

//google maps

var map;
  function initMap() {
  var myLatlng = new google.maps.LatLng(52.509119,13.423244);
  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 52.509119, lng: 13.423244},
  zoom: 15
  });

var marker = new google.maps.Marker({
  position: myLatlng,
  title:"Hello World!"
  });

marker.setMap(map);
 }

//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='" + works[i].url + "' target='_blank' class='work-img'>\
    <img class='img-responsive' src='" + works[i].pic + "' alt='future projects' title='Get in touch'>\
    <span class='info'><p src='" + works[i].text_color + "' class='proj-title'></p>" + works[i].title + " </span>\
    </a>\
    </div>\
  ");
  $(".work-img").mouseenter( function() {
    $(".info", this).show();
  }).mouseleave(function(){
    $(".info", this).hide();
  })
  var images = $("#work1 img")
    if (i%2 === 0) {
      $(images[i]).css("border", "2px solid DodgerBlue");
    } else {
      $(images[i]).css("border", "2px solid salmon");
      };
    }
});