2.11 JavaScript & APIs

scripts.js

$(document).ready(function() {
  $('.message-box').css('background', '#D5FDD5');

  $('#button').on('click', function() {
    var comment = $('.message-box').val();
    console.log(comment);
    if (comment === "") {
      $('.message-box').css('border', '2px solid red');
    } else {
      $('#invisible-comment').html('We received your message:' + ' ' + comment);
      $('.message-box').hide();
      return false;
    }
  });
  $('.message-box').on('keyup', function() {
    var charCount = $('.message-box').val().length;
    $('#char-count').html(charCount);
    if (charCount > 50) {
      $('#char-count').css('color', 'red');
    } else {
      $('#char-count').css('color', 'black');
    }
  });

  // WORK SECTION
  for(var i = 0; i < works.length; ++i) {
    $('#work').append('\
      <div class="col-sm">\
        <a href="#" class="work-img">\
          <img class="img-responsive" src="' + works[i].pic + '">\
          <span class="worksinfo"><p class="projtitle">Title:</p>COMING SOON</span>\
        </a>\
      </div>\
    ');

    $('.work-img').mouseenter(function() {
      $('.worksinfo', this).show();
    }).mouseleave(function() {
      $('.worksinfo', this).hide();
    });

    var images = $('#work img');
    if (i%2 === 0){
      $(images[i]).css('border', '2px solid dodgerblue');
    } else {
      $(images[i]).css('border', '2px solid salmon');
    };
  };
});

// MAP section
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.77614, lng: -73.95925},
    zoom: 8
  });
}