Last updated on

Updated for new 2017 course!

It’s about time but I finally got around to completing the exercises for the new course and make a list of all of the Codecademy JavaScript answers.

In the same way I did this for the previous course, I recommend you don’t just simply copy and paste these answers to complete the challenges – what are you going to learn by doing that?

These answers are just in case you get stuck, you can refer to these to see how I solved the challenge (there’s usually more than one way).

Just as a quick note; Codecademy have really shortened the new JavaScript course and it’s definitely more snappy and to the point. They have also tried to put more ‘real world’ examples in the exercises (like ordering a pizza!) which hopefully demonstrates what you would actually be doing with JavaScript!

On to the answers…

Get your copy of the Codecademy JavaScript answers

Enter your email to receive a PDF with all of the answers for you to keep.


Codecademy JavaScript answers

Introduction to JavaScript

Introduction to JavaScript

Types

var myString = 'string';
var myNumber = 123;
var myBoolean = true;


// Do not edit the code under this line
console.log("Name: " + myString);
console.log("Lucky Number: " + myNumber);
console.log("Good joke? " + myBoolean);

console

console.log('Pepperoni', 'Bacon');

Math Operators

console.log(35+3.5);
console.log(2017-1969);
console.log(65/240);
console.log((65/240) * 100);

Math Operators II

console.log(365/27);
console.log(365 % 27)

Random

console.log(Math.floor(Math.random() * 100));

Comments

// Opening line
console.log('It was love at first sight.');
/*
console.log('The first time Yossarian saw the chaplain he fell madly in love with him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.');
console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge him.');
console.log('But this just being short of jaundice all the time confused them.');
*/

Introduction to JavaScript Quiz

Q. Which modulus expression will evaluate to 2?
A. 10 % 4

Q. Which expression will equal 5?
A. (5 * 5) – 20

Q. What is string interpolation?
A. When you insert a variable into a string.

Q. Which of the following is the correct way to log a string to the console?
A. console.log(‘Hello world’);

Q. What two values are considered Boolean types?
A. true false

Q. What is the correct way to declare a variable?
A. var myName = ‘Jon’;

Q. What best describes the variables in JavaScript?
A. To allow the user to store or hold data.

Q. What is the correct way to generate a random number?
A. Math.random()

Variables

Create a variable

var strength = '50,000 pounds';
console.log('How much stuff can a variable hold? ', strength);

Create a Variable II

var strength = '50,000 pounds';
console.log('How much stuff can a variable hold? ', strength);
var age = 35;
console.log(age);
var hasPet = true;

Changing a Variable’s Value

var morningAlarm = '6:30AM';
morningAlarm = '9:30AM';
console.log('Morning alarm is set to:', morningAlarm);

String interpolation

var favoriteAnimal = 'Cat';
console.log('My favorite animal: ' + favoriteAnimal);

Control Flow

Control Flow

if/else Statements

var harryPotterFan = true;
if(harryPotterFan){
  console.log('Mischief managed.')
} else {
  console.log('I lead a muggle\'s life.');
}

Comparison Operators

var hungerLevel = 5; // Change to 10 for second part
if(hungerLevel > 7){
  console.log('Time to eat!');
} else{
  console.log('Let\'s eat later.');
}

Comparisons Operators II

var moonPhase = 'full';
if(moonPhase === 'full'){
  console.log('Howwwwlll!');
} else{
	console.log('I swear I am not a werewolf...');
}

else if Statements

var moonPhase = 'full'; // Change this for the next steps
if(moonPhase === 'full'){
  console.log('Howwwwlll!');
} else if(moonPhase === 'mostly full'){
	console.log('Arms and legs are getting hairier');
} else if(moonPhase === 'mostly new'){
  console.log('Back on two feet');
} else {
  console.log('Invalid moon phase');
}

Logical Operators

Part 1

var moonPhase = 'full'; // Change this for the next steps
var foggyNight = false;
if(moonPhase === 'full' && foggyNight === true){
  console.log('Howwwwlll!');
} else if(moonPhase === 'mostly full'){
	console.log('Arms and legs are getting hairier');
} else if(moonPhase === 'mostly new'){
  console.log('Back on two feet');
} else {
  console.log('Invalid moon phase');
}

Part 2

var moonPhase = 'full'; // Change this for the next steps
var foggyNight = false;
if(moonPhase === 'full' || foggyNight === true){
  console.log('Howwwwlll!');
} else if(moonPhase === 'mostly full'){
	console.log('Arms and legs are getting hairier');
} else if(moonPhase === 'mostly new'){
  console.log('Back on two feet');
} else {
  console.log('Invalid moon phase');
}

switch Statements

var moonPhase = 'full'; 
switch(moonPhase){
  case 'full':  console.log('Howwwwlll!!');
    									 break;
  case 'mostly full':  console.log('Arms and legs are getting hairier');
                       break;
  case 'mostly new':  console.log('Back on two feet');
    									 break;
  default:	
    console.log('Invalid moon phase');
    break;
}

Functions and Scope

Functions

Functions

function takeOrder(){
  console.log('Order: pizza');
}
takeOrder();

Parameters

function takeOrder(topping){
  console.log('Order: pizza topped with ' + topping);
}
takeOrder('bacon');

Parameters II

function takeOrder(topping, crustType){
  console.log('Order: ' + crustType + ' crust pizza topped with ' + topping);
}
takeOrder('thin', 'bacon');
takeOrder('thin', 'olives');
takeOrder('thick', 'pepperoni');

Return

var orderCount = 0;
function takeOrder(topping, crustType){
  orderCount++;
  console.log('Order: ' + crustType + ' crust pizza topped with ' + topping);
}
function getSubTotal(itemCount){
  return itemCount * 7.5;
}
takeOrder('thin', 'bacon');
takeOrder('thin', 'olives');
takeOrder('thick', 'pepperoni');
console.log(getSubTotal(orderCount));

return II

var orderCount = 0;
function takeOrder(topping, crustType){
  orderCount++;
  console.log('Order: ' + crustType + ' crust pizza topped with ' + topping);
}
function getSubTotal(itemCount){
  return itemCount * 7.5;
}
function getTax(){
  return getSubTotal(orderCount) * 0.06;
}
function getTotal(){
  return getSubTotal(orderCount) + getTax();
}
takeOrder('thin', 'bacon');
takeOrder('thin', 'olives');
takeOrder('thick', 'pepperoni');
console.log(getSubTotal(orderCount));
console.log(getTotal());

Scope

Global Scope

var laundryRoom = 'Basement';
var mailRoom = 'Room 1A';
console.log('Laundry: ' + laundryRoom + ', Mail: ' + mailRoom);

Functional Scope

var laundryRoom = 'Basement';
var mailRoom = 'Room 1A';
function myApartment(){
  var mailBoxNumber = 'Box 3';
  laundryRoom = 'In-unit';
  console.log('Mail box: ' + mailBoxNumber + ', Laundry: ' + laundryRoom);
}
console.log('Laundry: ' + laundryRoom + ', Mail: ' + mailRoom);
// console.log(mailBoxNumber); This causes an error
myApartment();

Scoping

var buildingLaundryCode = 4927;
var buildingPhone = '(481) 516-2342';
var buildingAddress = '150 E 14th St, New York, NY';

function myApartment() {
	var myCoffeeMaker = 'Aeropress';
	var myCloset = 'Extra coats in the back';
	var myRefridgerator = 'Filled with veggies and dark chocolate.';
	var myDog = 'Nikko';
}

// Do not edit the code after this line
console.log("**Apartment Building Information**");
console.log("Laundry code: " + buildingLaundryCode + "\nPhone: " + buildingPhone + "\nMailing address: " + buildingAddress);

Arrays and Loops

Arrays

Create an Arrays

var bucketList = ['Sky dive', 'Go to Nepal', 'Write a book'];
console.log(bucketList);

Property Access

var bucketList = ['Sky dive', 'Go to Nepal', 'Write a book'];
console.log(bucketList);
var listItem = bucketList[0];
console.log(listItem);
listItem = bucketList[2];
listItem = bucketList[3]; // Got to add this or the challenge won't complete !?
console.log(bucketList[3]);

length Property

var bucketList = ['Sky dive', 'Go to Nepal', 'Write a book'];
console.log(bucketList.length);

push Method

var bucketList = ['Sky dive', 'Go to Nepal', 'Write a book'];
bucketList.push('Go to Japan');
bucketList.push('See the northern lights');
console.log(bucketList);

pop Method

var bucketList = ['Sky dive', 'Go to Nepal', 'Write a book'];
bucketList.push('Go to Japan');
bucketList.push('See the northern lights');
console.log(bucketList);
bucketList.pop();
console.log(bucketList);

Loops

Looping by hand

var vacationSpots = ['Japan', 'Australia', 'Switzerland'];
console.log(vacationSpots[0]);
console.log(vacationSpots[1]);
console.log(vacationSpots[2]);

for Loops

var vacationSpots = ['Japan', 'Australia', 'Switzerland'];

for(var i=0; i<vacationSpots.length; i++){
  console.log('I would love to visit ' + vacationSpots[i]);
}

for loop backwards

var vacationSpots = ['Japan', 'Australia', 'Switzerland'];

for(var i=vacationSpots.length - 1; i>=0; i--){
  console.log('I would love to visit ' + vacationSpots[i]);
}

for loops inside of for loops

var myPlaces = ['New York', 'Philadelphia', 'Chicago'];
var friendPlaces = ['LA', 'Seattle', 'New York'];
for(var i=0; i<myPlaces.length; i++){
  console.log(myPlaces[i]);
  for(var j=0; j<friendPlaces.length; j++){
    if(myPlaces[i] === friendPlaces[j]){
      console.log(friendPlaces[j]);
    }
  }
}

while loops

var cards = ['Diamond', 'Spade', 'Heart', 'Club'];
var currentCard = 'Heart';
while(currentCard !== 'Spade'){
  console.log(currentCard);
  var randomNumber = Math.floor(Math.random() * 3);
  currentCard = cards[randomNumber];
}
console.log('Found a spade!');

JavaScript and jQuery

JavaScript and the DOM

Linking JavaScript

Add this to the bottom of the index.html page after adding the alert function to the main.js file.

<script src="js/main.js"></script> 

Document Object Model

In your main.js file:

var skillset = document.getElementsByClassName('skillset');

alert(skillset);

jQuery

After you have added the jQuery reference in index.html, in your main.js file

function main(){
  
}

$(document).ready(main);

jQuery Selectors

function main(){
  var $skillset = $('.skillset');
	alert($skillset);
}

$(document).ready(main);

hide

function main(){
  $('.skillset').hide();
}

$(document).ready(main);

fadeIn

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
}

$(document).ready(main);

click

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    
  });
}

$(document).ready(main);

show

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $('.projects').show();
  });
}

$(document).ready(main);

toggle

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $('.projects').toggle();
  });
}

$(document).ready(main);

toggleClass

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $('.projects').toggle();
    $('.projects-button').toggleClass('active');
  });
}

$(document).ready(main);

this

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $('.projects').toggle();
    $(this).toggleClass('active');
  });
}

$(document).ready(main);

next

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $(this).next().toggle();
    $(this).toggleClass('active');
  });
}

$(document).ready(main);

text

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    $(this).next().toggle();
    $(this).toggleClass('active');
    $(this).text('Projects Viewed');
  });
}

$(document).ready(main);

slideToggle

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
    //$(this).next().toggle();
    $(this).next().slideToggle(400);
    $(this).toggleClass('active');
    $(this).text('Projects Viewed');
  });
}

$(document).ready(main);

Conclusion

The new course is definitely a lot shorter than the old one and the team behind it have tried to show how you might actually use JavaScript in a project.

I don’t think you’ll get stuck on nearly half of the exercises that you may have on the old course. The exercises are much better worded and there’s a lot less repetition so less room for confusion.

Although the course is still teaching the basics, I think it’s probably still necessary to do some practice / repeat some of the exercises before it will fully sink in if you’ve never touched JavaScript before.