Questions and Answers: Codeyear

Showing posts with label Codeyear. Show all posts

Wednesday, December 19, 2012

Codecademy Sample Solution: Codeyear Retrieving the List Item

// sample solution to script.js

function processForm() {

var listItem = document.myChecklistForm.checklistItem.value;
//alert(listItem);

}

Codecademy Sample Solution: Codeyear Making The List Form

Codecademy Sample Solution: Codeyear Getting the Result

// sample solution to script.js

function processForm() {

var temperature = Number(document.tempForm.temp.value);
var tempType;
var result;

for (var i=0; i < document.tempForm.choice.length; i++) {

if (document.tempForm.choice[i].checked) {
tempType = document.tempForm.choice[i].value;
}
}

if (tempType == 'fahrenheit') {
result = temperature * 9/5 + 32;
}

else {
result = (temperature - 32) * 5/9;
}

// Assign the result field value here
document.tempForm.resultField.value = result;
}

Codecademy Sample Solution: Codeyear On The Radio

// sample solution to script.js

function processForm() {

var temperature = Number(document.tempForm.temp.value);
var tempType;

for (var i=0; i < document.tempForm.choice.length; i++) {
if (document.tempForm.choice[i].checked) {
tempType = document.tempForm.choice[i].value;
}
}
alert(tempType);
}

Codecademy Sample Solution: Codeyear It's a Number

// sample solution to script.js

function processForm() {

var temperature = Number(document.tempForm.temp.value);

}

Codecademy Sample Solution: Codeyear Having Options

<html>

<head>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<form name="tempForm">
<label for="temp">Temperature:</label>
<input type="text" id="temp"><br>

<input type="radio" name="choice" value="fahrenheit" checked>Convert to Fahrenheit <br>
<input type="radio" name="choice" value="celsius">Convert to Celsius <br>

<label for="resultField">Result: </label>
<input type="text" id="resultField"><br>

<input type="button" value="Convert" onclick="processForm()">
</form>

</body>

</html>

Codecademy Sample Solution: Codeyear Celsius or Fahrenheit

<html>

<head>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<form name="tempForm">
<label for="temp">Temperature:</label><input type="text" id="temp" />
<label for="resultField">Result:</label><input type="text" id="resultField" />
<input type="button" value="Convert" onclick="processForm()">
</form>
</body>
</html>

Codecademy Sample Solution: Codeyear First But Not Least

/* sample solution to style.css */

/* code exists prior to this point */

dl dd:first-of-type {
font-weight: bold;
font-size: 1.1em;
}

Codecademy Sample Solution: Codeyear Operating on a Drop

// solution to sorter.js

$(document).ready( function () {
// Write the code here!
$("div.flight").draggable();
$("div.airport").droppable({
hoverClass: "correct",
drop: function(event, ui){
ui.draggable.remove();
}
});
$("div.airport.lhr").droppable("option","accept",".lhr");
$("div.airport.ord").droppable("option","accept",".ord");
$("div.airport.hkg").droppable("option","accept",".hkg");
$("div.airport.lax").droppable("option","accept",".lax");
});

Codecademy Sample Solution: Codeyear Getting Planes to the Right Place

// solution to sorter.js

$(document).ready( function () {
// Write the code here!
$("div.flight").draggable();
$("div.airport").droppable({
hoverClass: "correct"
});
$("div.airport.lhr").droppable("option","accept",".lhr");
$("div.airport.ord").droppable("option","accept",".ord");
$("div.airport.hkg").droppable("option","accept",".hkg");
$("div.airport.lax").droppable("option","accept",".lax");
});

Codecademy Sample Solution: Codeyear Giving Some Feedback

// solution to sorter.js

$(document).ready( function () {
// Write the code here!
$("div.flight").draggable();
$("div.airport").droppable({
hoverClass: "correct"
});
});

Codecademy Sample Solution: Codeyear Airports for Landing

// solution to sorter.js

$(document).ready( function () {
// Write the code here!
$("div.flight").draggable();
$("div.airport").droppable();
});

Codecademy Sample Solution: Codeyear Flights Now Departing

// solution to sorter.js

$(document).ready( function () {
// Write the code here!
$("div.flight").draggable();
});

Codecademy Sample Solution: Codeyear Adding the Animation

// sample solution to script.js

$(document).ready(function() {
$("div.header").click(function(e){
$(this).next(".content").animate({
//opacity: 0.25,
//left: '+=50',
height: 'toggle'
}, 250, function() {
// Animation complete.
});
});
});

Codecademy Sample Solution: Codeyear Hijacking the Clicks

// sample solution to script.js

$(document).ready(function() {
$("div.header").click(function(e){
console.log("Hello world");
$(this).siblings(".content").animate({
//opacity: 0.25,
//left: '+=50',
height: 'toggle'
}, 250, function() {
// Animation complete.
});
});
});

Codecademy Sample Solution: Codeyear Making It Look Pretty

/* sample solution to style.css */

* {
font-family: Calibri;
}

.post{
background-color: red;
border: solid 2px red;
}

.header{
background-color: yellow;
border: solid 1px black;
padding: 5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
text-align: center;
}

.content{
background-color: orange;
border: solid black 1px;
height: 50px;
padding: 5px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

Tuesday, December 18, 2012

Codecademy Sample Solution: Codeyear The Data Model

// sample solution to script.js

$(document).ready(function() {
var $newDiv = $("body").append("<div class='post'></div>");
$newDiv.append("<div class='header'>New Header</div>");
$newDiv.append("<div class='content'>New Content</div>");

$("div.header").click(function(e){
$(this).siblings(".content").animate({
//opacity: 0.25,
//left: '+=50',
height: 'toggle'
}, 250, function() {
// Animation complete.
});
});
});

Codecademy Sample Solution: Codeyear GO!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src='script.js'></script>
<title></title>
</head>
<body>
<div class="post">
<div class="header">Header 1 (Click Me!)</div>
<div class="content">Content 1</div>
</div>
<div class="post">
<div class="header">Header 2 (Click Me!)</div>
<div class="content">Content 1</div>
</div>
<div class="post">
<div class="header">Header 3 (Click Me!)</div>
<div class="content">Content 1</div>
</div>
</body>
</html>

// sample solution to script.js

$(document).ready(function() {
$("div.header").click(function(e){
$(this).siblings(".content").animate({
//opacity: 0.25,
//left: '+=50',
height: 'toggle'
}, 250, function() {
// Animation complete.
});
});
});

/* sample solution to style.css */

* {
font-family: Calibri;
}

.post{
background-color: red;
border: solid 2px red;
}

.header{
background-color: yellow;
border: solid 1px black;
padding: 5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
text-align: center;
}

.content{
background-color: orange;
border: solid black 1px;
height: 50px;
padding: 5px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

Codecademy Sample Solution: Codeyear Oh You Fancy Huh

// sample solution to script.js

$(document).ready(function() {
$(".content").fadeOut('slow', function(){
$("ul.tabs li").click(function(){
if($(this).attr('class')!=='selected'){
$("ul.tabs li").removeClass('selected');
$(this).addClass('selected');

var selectionId2 = $(this).attr('id');
$(".page").css('display','none');
$(".page#"+selectionId2+"").css('display','block');
$(".content").fadeIn('slow');
}
});
});
});

Codecademy Sample Solution: Codeyear Bringing it All Together

// sample solution to script.js

$(document).ready(function() {
$("ul.tabs li").click(function(){
if($(this).attr('class')!=='selected'){
$("ul.tabs li").removeClass('selected');
$(this).addClass('selected');

var selectionId2 = $(this).attr('id');
$(".page").css('display','none');
$(".page#"+selectionId2+"").css('display','block');
}
});
});

Questions and Answers

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