Exercise 20

exercise20.js

//*My first Code starts Here*//

var myProjects = [ { title: "First Project", pic: "img/Innenansichten.JPG" },
                   { title: "Second Project", pic: "img/aruroralia.jpg" },
                   { title: "Third Project", pic: "img/orfanelle.jpg" } ]; 
/* Hidden Navbar */


$(document).ready(function () {
    
    //*A pinky fashionable textarea at keystroke*//
    $("#yourmessage").on("keyup", function() {
        $("#yourmessage").css("background-color", "pink");
    });
    //*have fun in consolelogging your messages*//
    $("#invio").on("click", function () { 
        var comment = $("#yourmessage").val();
        console.log(comment);
    });
   
/*function initialize*/
    function initialize() {
        var mapOptions = {
    center: new  google.maps.LatLng(51.339964,12.3733249,17),
    zoom: 17
    };
        var map= new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        };
    google.maps.event.addDomListener(window, 'load', initialize);


/*navbar appearing when scrolling*/
window.onscroll = function () {changeColor()};
function changeColor() {
    if (document.body.scrollTop > 100) {
        $("#navigation").css("background-color", "black");
            $("#navigation").css("color", "white"); }
         else {
            $("#navigation").css("background-color", "transparent");
            $("#navigation").css("color", "#FFD300");}
};
for(var i=0; i<myProjects.length; ++i) {
        $("#" + i ).css("background-image", "url("+ myProjects[i].pic +")" )
};
$(".image").mouseenter( function() {
    console.log(this);
    $(this).html("<p class='info'><span class='proj-title'>Title:</span></p>");
}).mouseleave(function() {
    $("p.info").html("");
});

});
//*My first Code ends here*//