Created
November 24, 2018 13:00
-
-
Save Spesm/97050954e146166f0c969e3b1463ab03 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!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 | |
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: "#", | |
info: "A website for my roommate, Rubik. This was my very first attempt at making a web page, simply built with plain html and CSS." | |
}, | |
{ | |
title: "Careerfoundry Dashboard", | |
pic: "img/work2.jpg", | |
url: "https://careerfoundry.com/en/dashboards/main", | |
info: "The dashboard of my course at CareerFoundry. Here I can see my progress, communicate with my mentor, tutor and other students and access the exercises for the online structured course." | |
}, | |
{ | |
title: "Early Contact Page", | |
pic: "img/work3.jpg", | |
url: "contact.html", | |
info: "An early version of the contact section I drafted for this portfolio. I've been trying to get the glitches out while retaining some of the vintage feel..." | |
}, | |
{ | |
title: "Early Portfolio", | |
pic: "img/work4.jpg", | |
url: "portfolio1.html", | |
info: "This is basically what happens if you build sections for a page independent of one another and then paste them in a single html file to create a single page. I've happily used it as a test-site for later exercises though." | |
}, | |
{ | |
title: "My Code In Atom", | |
pic: "img/work5.jpg", | |
url: "#", | |
info: "Here's some code as I've been writing it in Atom. Basically what half of my days may look like for the rest of my life :)" | |
}, | |
{ | |
title: "Cute Calculator", | |
pic: "img/work6.jpg", | |
url: "calculator.html", | |
info: "A calculator I designed as a bonus task for the first achievement of the Web Development course. The bonus task of the second achievement will be to also make it interactive and functional through JavaScript." | |
}, | |
{ | |
title: "Alternative Portfolio On Mobile", | |
pic: "img/work7.jpg", | |
url: "portfolio2.html", | |
info: "An earlier version of my portfolio website as seen in Chrome through a mobile viewport. Responsive design has been central to the portfolio project." | |
}, | |
{ | |
title: "Network From Cultural Domain Analysis", | |
pic: "img/work8.jpg", | |
url: "#", | |
info: "This network of musical artists results from research I conducted for my thesis in Cultural Sociology. I applied a technique called Multidimensional Scaling to map artist on the diagram according to how my respondents felt they compare to each other." | |
} | |
]; | |
$(document).ready(function(){ | |
for (var i = 0; i < works.length; ++i){ | |
$("#selected-work").prepend("\ | |
<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-primary btn-sm work-button' href = '" + works[i].url + "' role = 'button'>View Doc »</a>\ | |
</div>\ | |
"); | |
}; | |
$(".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; | |
}); | |
$(function () { | |
$('#CareerFoundry').tooltip(); | |
$('#PatternLibrary').tooltip(); | |
$('#Unsplash').tooltip(); | |
$('[data-toggle="modal"]').tooltip(); | |
$('[data-toggle="tooltip"]').tooltip(); | |
}); | |
$(function () { | |
$("#button").on("click", function() { | |
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; | |
}; | |
}); | |
}); | |
$(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"); | |
}; | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment