Exercise 19

scripts.js

// User input transformed into upper case letters + !

$(".btn-default").on("click", function() {
	console.log("clicked");
	var comment = $("#txt").val().toUpperCase() + "!";
	console.log(comment);
	$("#visible-comment").html(comment);
	return false;
	// no code here, just above the 'return false'
});

// Gray background in textarea

$("#txt").css("background-color", "gray");

// Make textarea more translucent on click

$("#txt").on("click", function() {
      $("#txt").css({ opacity: 0.75 });
});

// Work section objects

var myWork = [{
    title: "Janet's Portfolio",
    pic: "../img/website.jpg"
}, {
    title: "Mock Job Interview",
    pic: "../img/mock-job-interview.jpg"
}, {
    title: "Third Project",
    pic: "../img/ComingSoon1.png"
}, {
    title: "Fourth Project",
    pic: "../img/ComingSoon1.png"
},{
    title: "Fifth Project",
    pic: "../img/ComingSoon1.png"
},{
    title: "Sixth Project",
    pic: "../img/ComingSoon1.png"
},{
    title: "Seventh Project",
    pic: "../img/ComingSoon1.png"
},{
    title: "Eighth Project",
    pic: "../img/ComingSoon1.png"
}];


// Document ready functions

$(document).ready(function() {
    $("#txt").on("keyup", function() {
        console.log("keyup happened!!!");
        var charCount = $("#txt").val().length;
        console.log(charCount);
        $("#char-count").html(charCount);
        if (charCount > 50) {
            $("#char-count").css("color", "red");
        } else {
            $("#char-count").css("color", "black");
        };
    });
});

$(document).ready(function() {
    var rows = $(".my-row");
    for (var i = 0; i < rows.length; ++i) {
        if (i % 2 === 0) {
            $(rows[i]).css("background-color", "#FFFFFF");
        } else {
            $(rows[i]).css("background-color", "#DDA0DD");
        };
    };
});

$(document).ready(function() {
    for (var i = 0; i < myWork.length; ++i) {
        $("#" + i).css("background-image", "url(" + myWork[i].pic + ")");
    };

    $(".image").mouseenter(function() {
        console.log(myWork[this.id].title);
        $(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myWork[this.id].title) + "</p>";
    }).mouseleave(function() {
        $("p.info").html("");
    });
});