Questions and Answers: June 2013

Tuesday, June 18, 2013

Codecademy Sample Solution: Logging In The User

// The callback URL to redirect to after authentication
redirectUri = "http://external.codecademy.com/skydrive.html";

//sample solution to helper.js
//note: you have to have a Microsoft account in order to log-in and finish the exercise
// Initialize the JavaScript SDK

WL.init({
client_id: '000000004C0E2C11',
redirect_uri: redirectUri
});

$(document).ready(function() {
// Start the login process when the login button is clicked
$('#login').click(function() {
WL.login({
scope: ["wl.skydrive wl.signin"]
}).then(
// Handle a successful login
function(response) {
$('#status').html("<strong>Success! Logged in.</strong>");
},
// Handle a failed login
function(responseFailed) {
// The user might have clicked cancel, etc.
$('#status').html(responseFailed.error.message);
}
);
});
});

Codecademy Sample Solution: Initializing the Javascript SDK

//sample solution to the helper.js file

WL.init({
client_id: ('000000004C0E2C11')
redirect_uri: ('http://external.codecademy.com/skydrive.html')
});

Codecademy Sample Solution: Setting Up

<!DOCTYPE html>
<html>
<head>
<title>My SkyDrive Web App</title>

<script src="http://js.live.net/v5.0/wl.js"></script>
<script src="helper.js"></script>
</head>
<body>
<p>Hello there! We'll fill this part out soon.</p>
</body>
</html>

Friday, June 7, 2013

Codeschool Sample Solution Keyup Event Handler II

$(document).ready(function() {
$("#nights").on("keyup", function() {
//var days = $(this).val();
//var pricePerDay = $(".tour").data('daily-price');
//var totalPrice = days * pricePerDay;
//$("#nights-count").text(days);
//$("#total").text(totalPrice);
$("#nights-count").text($(this).val());
$("#total").text($(this).val() * $(this).closest(".tour").data('daily-price'));
});
});

Codeschool Sample Solution Keyup Event Handler I

$(document).ready(function() {
$("#nights").on("keyup", function() {
$("#nights-count").text($(this).val());
});
});

Codeschool Sample Solution Keyup Event

$(document).ready(function() {
$("#nights").on('keyup', function(){
});
});

Codeschool Sample Solution Mouseleave

$(document).ready(function() {
$("#tour").on("click", "button", function() {
$(".photos").slideToggle();
});
$(".photos").on("mouseenter", "li", function() {
$(this).find("span").slideToggle();
});
$(".photos").on("mouseleave", "li", function() {
$(this).find("span").slideToggle();
});
});

Thursday, June 6, 2013

Codeschool Sample Solution Mouseover II

Codeschool Sample Solution Mouseover I

$(document).ready(function() {
$("#tour").on('click', 'button', function() {
$(".photos").slideToggle();
});

$(".photos").on('mouseenter', 'li', function(){

});
});

Codeschool Sample Solution Slide Effect II

$(document).ready(function() {
$("#tour").on("click", "button", function() {
$(".photos").slideToggle();
});
});

Codeschool Sample Solution Slide Effect I

$(document).ready(function() {
$("#tour").on("click", "button", function() {
$('.photos').slideDown();
});
});

Codeschool Sample Solution On Load II

$(document).ready(function() {
$('#tour').on('click', 'button', function(){
alert('I was clicked!');
});
});

Codeschool Sample Solution On Load I

$(document).ready(function(){
var numPhotos = $('img').length;
alert(numPhotos);
});

Codeschool Sample Solution New Filter III

$(document).ready(function(){
$("#filters").on("click", ".on-sale", function(){
$(".highlight").removeClass();
$(".tour").filter(".on-sale").addClass("highlight");
});

$("#filters").on("click", ".featured", function(){
$(".highlight").removeClass();
$(".tour").filter(".featured").addClass("highlight");
});
});

Codeschool Sample Solution New Filter II

$(document).ready(function(){
$("#filters").on("click", ".on-sale", function(){
$(".tour").filter(".on-sale").addClass("highlight");
});
});

Codeschool Sample Solution New Filter I

$(document).ready(function(){
//Create the click handler here
$("#filters").on("click", ".on-sale", function(){
});
});

Codeschool Sample Solution Better On Handlers

$(document).ready(function(){
$(".tour").on("click","button", function(){
var tour = $(this).closest(".tour");
var discount = tour.data("discount");
var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
tour.append(message);
$(this).remove();
});
});

Codeschool Sample Solution Refactoring

$(document).ready(function(){
$("button").on("click", function(){
var tour = $(this).closest(".tour");
var discount = tour.data("discount");
var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
tour.append(message);
$(this).remove();
});
});

Codeschool Sample Solution Fetching Data from the DOM II

$(document).ready(function(){
$("button").on("click", function(){
var discount = $(this).closest(".tour").data("discount");
//alert(discount); //for checking
var message = $("<span>Call 1-555-jquery-air for a $"+discount+" discount</span>");
$(this).closest(".tour").append(message);
$(this).remove();
});
});

Codeschool Sample Solution Fetching Data from DOM I

$(document).ready(function(){
$('button').on('click', function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
var discount = $(this).closest(".tour").data("discount");
$(this).closest(".tour").append(message);
$(this).remove();
//alert(discount); //prove that value of data is stored in var discount
});
});

Codeschool Sample Solution Relative Traversing III

$(document).ready(function(){
$(".tour").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(this).closest(".tour").append(message);
$(this).find(".book").remove();
});
});

Codeschool Sample Solution Traversing II

$(document).ready(function(){
$('button').on('click', function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(this).closest("li").append(message);
$(this).remove();
});
});

Codeschool Sample Solution Relative Traversing I

$(document).ready(function(){
$("button").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(this).parent().append(message);
$(this).remove();
});
});

Codeschool Sample Solution Removing the clicked button

$(document).ready(function(){
$("button").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$(this).remove();
});
});

Codeschool Sample Solution On Page Load

$(document).ready(function(){
$("button").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$("button").remove();
});
});

Codeschool Sample Solution Acting On Click

$(".tour").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$("button").remove();
});

Codeschool Sample Solution Click Interaction

$(".book").on("click", function(event){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$(".book").remove();
});

Codeschool Sample Solution Removing from the DOM

var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$(".book").remove();

Codeschool Sample Solution Adding to the DOM II

var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);

Codeschool Sample Solution Adding to the DOM I

var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".book").before(message);

Codeschool Sample Solution Creating a DOM Node

var message = $("<span>Call 1-555-jquery-air to book this tour</span>");

Codeschool Sample Solution The :even selector

$("#tours > li:even")

Codeschool Sample Solution Traversing Down

$("#tours").children("li")

Codeschool Sample Solution Traversing Up

$(".featured").parent()

Codeschool Sample Solution Using prev()

$("#vacations li").last().prev()

Codeschool Sample Solution Using last()

$("#vacations li").last()

Codeschool Sample Solution Using first()

$("#vacations li").first()

Codeschool Sample Solution Using find()

$("#vacations").find(".america")

Codeschool Sample Solution First Pseudo Selector

$("#tours :first")

Codeschool Sample Solution Selecting Multiple Elements

$(".asia, .sale")

Codeschool Sample Solution Selecting Direct Children

$("#tours > li")

Codeschool Sample Solution Descendant Selector

$("#tours li")

Codeschool Sample Solution Modifying Multiple Elements

$("h2").text("Vacation Packages")

Codeschool Sample Solution Class Selector

$(".america")

Codeschool Sample Solution ID Selector

$("#vacations")

Codeschool Sample Solution Include A Custom Javascript File

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="homepage-wrapper">
<h2>Welcome to jQuery Travels - Traversing the DOM since 2006</h2>
<p>Fly to New York today for as little as <span>$299.99</span></p>
</div>
<script src="jquery.min.js"></script>
<script src="application.js"></script>
</body>
</html>

Quotes help make search much faster. Example: "Practice Makes Perfect"

Tuesday, June 18, 2013

Friday, June 7, 2013

Thursday, June 6, 2013

Popular Posts