portfolio.js

// Twitter API
!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');
// Google Map API
function initMap() {
  var myLatLng = {lat: 52.4483653, lng: 4.8176345};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: myLatLng,
    zoom: 14
  });
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Here my house lives!'
  });
}
// Works array
var works = [
  {
    title: "Rubik's Website",
    pic: "img/work1.jpg",
    url: "rubi-site.html",
    info: "A website for my tortoise, Rubik. This was one of my earliest attempt at making a web page. I used plain html and CSS to test if I was able to get aligned images on a page with a reasonably well-balanced layout."
  },
  {
    title: "Oinos E-commerce Application",
    pic: "img/work11.jpg",
    url: "https://oinos.herokuapp.com/",
    info: "This is the webshop I've been building in Ruby on Rails for the backend part of the CareerFoundry Web Development course. Although the application is production-ready in terms of functionality, the site is in beta and no items can be procured at this point."
  },
  {
    title: "Cute Calculator",
    pic: "img/work6.jpg",
    url: "calculator.html",
    info: "A calculator for which I designed the rattling looks as a bonus task for the first achievement of the Web Dev course. With the bonus task of the second achievement I added functionality through JavaScript, so it can actually be used."
  },
  {
    title: "Previous Version Of My Portfolio",
    pic: "img/work9.jpg",
    url: "portfolio1.html",
    info: "This was the portfolio site as I submitted it at the end of the first achievement. In general it doesn't look very different, but in terms of functionality the current version definitely has a few significant upgrades."
  },
  {
    title: "Saint Nicholas Celebration Puzzle",
    pic: "img/work12.jpg",
    url: "sinterklaas.html",
    info: "For the annual celebration of Saint Nicholas with my family, I wrote a poem for which the verse lines had to be put in the right order to reveal a hidden word in a puzzle grid. If you like puzzles, try and see if you can rhyme in Dutch!"
  }
];
// Loop appends selected works html in owl carousel
$(document).ready(function(){
  for (var i = 0; i < works.length; ++i) {
    $("#selected-work").append("\
      <div class = 'work-item'>\
        <a class = 'work-sample' href = '" + works[i].url + "'>\
          <div class = 'work-anchor'>\
            <img class = 'work-picture' src = '" + works[i].pic + "'>\
            <h4 class = 'work-title'>" + works[i].title + "</h4>\
          </div>\
        </a>\
        <div class = 'work-info'>\
          <p class = 'desciption'>" + works[i].info + "</p>\
        </div>\
        <a class = 'btn btn-dark btn-sm work-button' href = '" + works[i].url + "' data-placement = 'right' title = 'Learn More' role = 'button'>View Doc &raquo</a>\
      </div>\
    ");
  };
  // Owl carousel features
  $(".owl-carousel").owlCarousel({
    margin: 30,
    loop: true,
    autoplay: true,
    autoplayHoverPause: true,
    dotsEach: true,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1200: {
        items: 3
      }
    }
  });
  $(".work-sample").mouseenter (function(){
    $(".work-title", this).show();
  }).mouseleave (function(){
    $(".work-title", this).hide();
  })
});
// Smooth scrolling
$(document).ready(function(){
  var $root = $('html, body');
  $('#navbar-example a').click(function() {
    var href = $.attr(this, 'href');
    if (href != undefined && href != '#') {
      $root.animate({
        scrollTop: $(href).offset().top
      }, 500, function () {
        window.location.hash = href;
      });
    }
    return false;
  });
  // Tooltips
  $(function () {
    $('#Codepen').tooltip();
    $('#CareerFoundry').tooltip();
    $('#PatternLibrary').tooltip();
    $('#Unsplash').tooltip();
    $('[data-toggle="modal"]').tooltip();
    $('[data-toggle="tooltip"]').tooltip();
    $('.work-button').tooltip();
  });
  // Contact form validations
  $(function () {
    $("#button").on("click", function() {
      var contactform = $("#contactform");
      contactform.setAttribute('action', 'https://formspree.io/semvlent@gmail.com');
      var name = $("#name").val();
      var email = $("#email").val();
      var comment = $(".message-box").val();
      if (name === "") {
        $("#name").css("border", "2px solid red");
        console.log ("no name entered")
        return false;
      } else if (email === "") {
        $("#name").css("border", "1px solid black");
        $("#email").css("border", "2px solid red");
        console.log ("no email entered")
        return false;
      } else if (comment === "") {
        $("#email").css("border", "1px solid black");
        $(".message-box").css("border", "2px solid red");
        console.log ("no message entered")
        return false;
      } else {
        $("#visible-name").html(name);
        $("#name").hide();
        console.log (name)
        $("#visible-email").html(email);
        $("#email").hide();
        console.log (email)
        $("#visible-comment").html(comment);
        $(".message-box").hide();
        console.log ("message received")
        return false;
      };
    });
  });
  // Character counter
  $(function () {
    $(".message-box").on("keyup", function() {
      var charCount = $(".message-box").val().length;
      $("#char-count").html(charCount);
      if (charCount > 500) {
        $("#char-count").css("color", "red");
      } else {
        $("#char-count").css("color", "black");
      };
    });
  });
});