basicjavascript.html

<!-- // Comment Your JavaScript Code -->

<!-- Declare JavaScript Variables -->
<!-- Use the var keyword to create a variable called myName. -->
var myName;

<!-- Storing Values with the Assignment Operator -->
<!-- Setup -->
var a;
<!-- Only change code below this line -->
a = 7;

<!-- Assigning the Value of One Variable to Another -->
<!-- Assign the contents of a to variable b. -->
<!-- Setup -->
var a;
a = 7;
var b;
<!-- Only change code below this line -->
b = a

<!-- Initializing Variables with the Assignment Operator -->
<!-- Define a variable a with var and initialize it to a value of 9. -->
var a = 9;

<!-- Declare String Variables -->
<!-- Create two new string variables: myFirstName and myLastName and assign them the values of your first and last name, respectively. -->
var myFirstName = "Fahan";
var myLastName = "Ibrahim Hashi";

<!-- Understanding Uninitialized Variables -->
<!-- Initialize the three variables a, b, and c with 5, 10, and "I am a" respectively so that they will not be undefined. -->
<!-- Only change code below this line -->
var a;
a = 5;
var b;
b = 10;
var c;
c = "I am a";
<!-- Only change code above this line -->
a = a + 1;
b = b + 5;
c = c + " String!";

<!-- Understanding Case Sensitivity in Variables -->
<!-- Modify the existing declarations and assignments so their names use camelCase.
Do not create any new variables. -->
<!-- Variable declarations -->
var studlyCapVar;
var properCamelCase;
var titleCaseOver;
<!-- Variable assignments -->
studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;

<!-- Explore Differences Between the var and let Keywords -->
<!-- Update the code so it only uses the let keyword. -->
let catName = "Oliver";
let catSound = "Meow!";

<!-- Declare a Read-Only Variable with the const Keyword -->
<!-- Change the code so that all variables are declared using let or const. Use let when you want the variable to change, and const when you want the variable to remain constant. Also, rename variables declared with const to conform to common practices. Do not change the strings assigned to the variables. -->
const FCC = "freeCodeCamp"; // Change this line
let fact = "is cool!"; // Change this line
fact = "is awesome!";
console.log(FCC, fact); // Change this line

<!-- Add Two Numbers with JavaScript -->
<!-- Change the 0 so that sum will equal 20. -->
const sum = 10 + 10;

<!-- Subtract One Number from Another with JavaScript -->
<!-- Change the 0 so the difference is 12. -->
const difference = 45 - 33;

<!-- Multiply Two Numbers with JavaScript -->
<!-- Change the 0 so that product will equal 80. -->
const product = 8 * 10;

<!-- Divide One Number by Another with JavaScript -->
<!-- Change the 0 so that the quotient is equal to 2. -->
const quotient = 66 / 33;

<!-- Increment a Number with JavaScript -->
<!-- Change the code to use the ++ operator on myVar. -->
let myVar = 87;
<!-- Only change code below this line -->
myVar++;

<!-- Decrement a Number with JavaScript -->
<!-- Change the code to use the -- operator on myVar. -->
let myVar = 11;
<!-- Only change code below this line -->
myVar--;

<!-- Create Decimal Numbers with JavaScript -->
<!-- Create a variable myDecimal and give it a decimal value with a fractional part (e.g. 5.7). -->
const ourDecimal = 5.7;
<!-- Only change code below this line -->
const myDecimal = 5.7;

<!-- Multiply Two Decimals with JavaScript -->
<!-- Change the 0.0 so that product will equal 5.0. -->
const product = 2.0 * 2.5;

<!-- Divide One Decimal by Another with JavaScript -->
<!-- Change the 0.0 so that quotient will equal to 2.2. -->
const quotient = 4.4 / 2.0; // Change this line

<!-- Finding a Remainder in JavaScript -->
<!-- Set remainder equal to the remainder of 11 divided by 3 using the remainder (%) operator. -->
const remainder = 11 % 3;

<!-- Compound Assignment With Augmented Addition -->
<!-- Convert the assignments for a, b, and c to use the += operator. -->
let a = 3;
let b = 17;
let c = 12;
<!-- Only change code below this line -->
a += 12;
b += 9;
c += 7;

<!-- Compound Assignment With Augmented Subtraction -->
<!-- Convert the assignments for a, b, and c to use the -= operator. -->
let a = 11;
let b = 9;
let c = 3;
<!-- Only change code below this line -->
a -= 6;
b -= 15;
c -= 1;

<!-- Compound Assignment With Augmented Multiplication -->
let a = 5;
let b = 12;
let c = 4.6;
<!-- Only change code below this line -->
a *= 5;
b *= 3;
c *= 10;

<!-- Compound Assignment With Augmented Division -->
<!-- Convert the assignments for a, b, and c to use the /= operator. -->
let a = 48;
let b = 108;
let c = 33;
<!-- Only change code below this line -->
a /= 12;
b /= 4;
c /= 11;

<!-- Escaping Literal Quotes in Strings -->
<!-- Use backslashes to assign a string to the myStr variable so that if you were to print it to the console, you would see: I am a "double quoted" string inside "double quotes". -->
const myStr = "I am a \"double quoted\" string inside \"double quotes\"."; 

<!-- Quoting Strings with Single Quotes -->
<!-- Change the provided string to a string with single quotes at the beginning and end and no escape characters.
Right now, the <a> tag in the string uses double quotes everywhere. You will need to change the outer quotes to single quotes so you can remove the escape characters. -->
  const myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

<!-- Escape Sequences in Strings -->
<!-- Assign the following three lines of text into the single variable myStr using escape sequences.
FirstLine
    \SecondLine
ThirdLine
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words. -->
const myStr = "FirstLine\n\t\\SecondLine\nThirdLine"; // Change this line

<!-- Concatenating Strings with Plus Operator -->
<!-- Build myStr from the strings This is the start. and This is the end. using the + operator. Be sure to include a space between the two strings. -->
const myStr = "This is the start. "+"This is the end.";

<!-- Concatenating Strings with the Plus Equals Operator -->
<!-- Build myStr over several lines by concatenating these two strings: This is the first sentence. and This is the second sentence. using the += operator. Use the += operator similar to how it is shown in the example and be sure to include a space between the two strings. Start by assigning the first string to myStr, then add on the second string. -->
let myStr = "This is the first sentence.";
myStr += " This is the second sentence.";

<!-- Constructing Strings with Variables -->
<!-- Set myName to a string equal to your name and build myStr with myName between the strings My name is  and  and I am well! -->
const myName = "Fahan";
const myStr = "My name is " + myName + " and I am well!";

<!-- Appending Variables to Strings -->
<!-- Set someAdjective to a string of at least 3 characters and append it to myStr using the += operator. -->
const someAdjective = "empowering";
let myStr = "Learning to code is ";
myStr += someAdjective;

<!-- Find the Length of a String -->
<!-- Use the .length property to set lastNameLength to the number of characters in lastName. -->
<!-- Setup -->
let lastNameLength = 0;
const lastName = "Lovelace";
<!-- Only change code below this line -->
lastNameLength = lastName.length;

<!-- Use Bracket Notation to Find the First Character in a String -->
<!-- Use bracket notation to find the first character in the lastName variable and assign it to firstLetterOfLastName. -->
let firstLetterOfLastName = "";
const lastName = "Lovelace";
<!-- Only change code below this line -->
firstLetterOfLastName = lastName[0]; // Change this line

<!-- Understand String Immutability -->
<!-- Correct the assignment to myStr so it contains the string value of Hello World using the approach shown in the example above. -->
let myStr = "Jello World";
myStr = "Hello World"; 

<!-- Use Bracket Notation to Find the Nth Character in a String -->
<!-- Let's try to set thirdLetterOfLastName to equal the third letter of the lastName variable using bracket notation. -->
const lastName = "Lovelace";
const thirdLetterOfLastName = lastName[2]; 

<!-- Use Bracket Notation to Find the Last Character in a String -->
<!-- Use bracket notation to find the last character in the lastName variable. -->
const lastName = "Lovelace";
const lastLetterOfLastName = lastName[lastName.length - 1];

<!-- Use Bracket Notation to Find the Nth-to-Last Character in a String -->
<!-- Use bracket notation to find the second-to-last character in the lastName string. -->
const lastName = "Lovelace";
const secondToLastLetterOfLastName = lastName[lastName.length - 2]; 

<!-- Word Blanks  -->
<!-- In this challenge, we provide you with a noun, a verb, an adjective and an adverb. You need to form a complete sentence using words of your choice, along with the words we provide.

You will need to use the string concatenation operator + to build a new string, using the provided variables: myNoun, myAdjective, myVerb, and myAdverb. You will then assign the formed string to the wordBlanks variable. You should not change the words assigned to the variables.

You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. The result should be a complete sentence. -->
const myNoun = "dog";
const myAdjective = "big";
const myVerb = "ran";
const myAdverb = "quickly";

const wordBlanks = "The " + myNoun + " was " + myAdjective + " and " + myVerb + " away " + myAdverb; // Change this line

<!-- // Store Multiple Values in one Variable using JavaScript Arrays
// Modify the new array myArray so that it contains both a string and a number (in that order). -->
const myArray = ["cherry", 2];

<!-- // Nest one Array within Another Array
// Create a nested array called myArray. -->
const myArray = [["Chiefs", 87], ["Swift", 13]];

<!-- // Access Array Data with Indexes
// Create a variable called myData and set it to equal the first value of myArray using bracket notation. -->
const myArray = [50, 60, 70];
const myData = myArray[0]

<!-- // Modify Array Data With Indexes
// Modify the data stored at index 0 of myArray to a value of 45. -->
const myArray = [18, 64, 99];
myArray[0] = 45;

<!-- // Access Multi-Dimensional Arrays With Indexes
// Using bracket notation select an element from myArray such that myData is equal to 8. -->
const myArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
[[10, 11, 12], 13, 14],
];

const myData = myArray[2][1];

<!-- // Manipulate Arrays With push Method
// Push ["dog", 3] onto the end of the myArray variable.
// Setup -->
const myArray = [["John", 23], ["cat", 2]];
<!-- // Only change code below this line -->
myArray.push(["dog", 3])

<!-- // Manipulate Arrays With push Method
// Push ["dog", 3] onto the end of the myArray variable.
// Setup -->
const myArray = [["John", 23], ["cat", 2]];
<!-- // Only change code below this line -->
myArray.push(["dog", 3])

<!-- // Manipulate Arrays With pop Method
// Use the .pop() function to remove the last item from myArray and assign the popped off value to a new variable, removedFromMyArray.
// Setup -->
const myArray = [["John", 23], ["cat", 2]];
<!-- // Only change code below this line -->
const removedFromMyArray = myArray.pop()
console.log(removedFromMyArray)

<!-- // Manipulate Arrays With shift
// Use the .shift() function to remove the first item from myArray and assign the "shifted off" value to a new variable, removedFromMyArray.
// Setup -->
const myArray = [["John", 23], ["dog", 3]];
<!-- // Only change code below this line -->
const removedFromMyArray = myArray.shift()

<!-- // Manipulate Arrays With unshift Method
// Add ["Paul", 35] to the beginning of the myArray variable using unshift(). -->
<!-- // Setup -->
const myArray = [["John", 23], ["dog", 3]];
myArray.shift();
<!-- // Only change code below this line -->
myArray.unshift(["Paul", 35])

<!-- // Shopping List
// Create a shopping list in the variable myList. The list should be a multi-dimensional array containing several sub-arrays.
// There should be at least 5 sub-arrays in the list. -->
const myList = [["Rocket", 3], ["Avocado", 2], ["Kale", 1], ["Fage", 3], ["ProteinYogurt", 6],["ButternutSquash", 1]];

<!-- // Write Reusable JavaScript with Functions -->
function reusableFunction() {
    console.log("Hi World");
  }
  reusableFunction();

<!-- Passing Values to Functions with Arguments -->
<!-- Create a function called functionWithArgs that accepts two arguments and outputs their sum to the dev console. -->
<!-- Call the function with two numbers as arguments. -->
function functionWithArgs (param1, param2) {
  console.log(param1 + param2);
}
functionWithArgs (2,3);

<!-- Return a Value from a Function with Return -->
<!-- Create a function timesFive that accepts one argument, multiplies it by 5, and returns the new value. -->
function timesFive(num) {
  return num * 5;
}
const answer = timesFive(2)
console.log(answer)

<!-- Global Scope and Functions -->
<!-- Using let or const, declare a global variable named myGlobal outside of any function. Initialize it with a value of 10.
Inside function fun1, assign 5 to oopsGlobal without using the var, let or const keywords. -->
<!-- Declare the myGlobal variable below this line -->
let myGlobal = 10 
function fun1() {
  oopsGlobal = 5 

}
<!-- Only change code above this line -->
function fun2() {
  let output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output);
}

<!-- Local Scope and Functions -->
<!-- The editor has two console.logs to help you see what is happening. Check the console as you code to see how it changes. Declare a local variable myVar inside myLocalScope and run the tests. -->
function myLocalScope() {
  // Only change code below this line
let myVar = "hey" 
  console.log('inside myLocalScope', myVar);
}
myLocalScope();

// Run and check the console
// myVar is not defined outside of myLocalScope
console.log('outside myLocalScope', myVar);

<!-- Global vs. Local Scope in Functions -->
<!-- Add a local variable to myOutfit function to override the value of outerWear with the string sweater. -->
// Setup
const outerWear = "T-Shirt";

function myOutfit() {
  // Only change code below this line
  let outerWear = "sweater"
  // Only change code above this line
  return outerWear;
}
myOutfit();

<!-- Understanding Undefined Value returned from a Function -->
<!-- Create a function addFive without any arguments. This function adds 5 to the sum variable, but its returned value is undefined. -->
// Setup
let sum = 0;

function addThree() {
  sum = sum + 3;
}

// Only change code below this line
function addFive(){
  sum = sum + 5;
}

// Only change code above this line

addThree();
addFive();

<!-- Assignment with a Returned Value -->
<!-- Call the processArg function with an argument of 7 and assign its return value to the variable processed. -->
let processed = 0;

function processArg(num) {
  return (num + 3) / 5;
}

processed = processArg(7)

<!-- Stand in Line -->
<!-- Write a function nextInLine which takes an array (arr) and a number (item) as arguments.

Add the number to the end of the array, then remove the first element of the array.

The nextInLine function should then return the element that was removed. -->
function nextInLine(arr, item) {
  // Only change code below this line
  arr.push(item);
  let removedElement = arr.shift();
  return removedElement 
  // Only change code above this line
}

// Setup
let testArr = [1, 2, 3, 4, 5];

// Display code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6));
console.log("After: " + JSON.stringify(testArr));

<!-- Understanding Boolean Values -->
<!-- Modify the welcomeToBooleans function so that it returns true instead of false. -->
function welcomeToBooleans() {
  return true; // Change this line
}

<!-- Use Conditional Logic with If Statements -->
<!-- Create an if statement inside the function to return Yes, that was true if the parameter wasThatTrue is true and return No, that was false otherwise. -->
function trueOrFalse(wasThatTrue) {
  // Only change code below this line
if (wasThatTrue) {
  return "Yes, that was true";
}
return "No, that was false";
}


<!-- Comparison with the Equality Operator -->
<!-- Add the equality operator to the indicated line so that the function will return the string Equal when val is equivalent to 12. -->
// Setup
function testEqual(val) {
  if (val == 12) { // Change this line
    return "Equal";
  }
  return "Not Equal";
}

testEqual(10);

<!-- Comparison with the Strict Equality Operator -->
<!-- Use the strict equality operator in the if statement so the function will return the string Equal when val is strictly equal to 7. -->
// Setup
function testStrict(val) {
  if (val === 7) { // Change this line
    return "Equal";
  }
  return "Not Equal";
}

testStrict(10);

<!-- Practice comparing different values -->
<!-- The compareEquality function in the editor compares two values using the equality operator. Modify the function so that it returns the string Equal only when the values are strictly equal. -->
// Setup
function compareEquality(a, b) {
  if (a === b) { // Change this line
    return "Equal";
  }
  return "Not Equal";
}

compareEquality(10, "10");

<!-- Comparison with the Inequality Operator -->
<!-- Add the inequality operator != in the if statement so that the function will return the string Not Equal when val is not equivalent to 99. -->
// Setup
function testNotEqual(val) {
  if (val != 99) { // Change this line
    return "Not Equal";
  }
  return "Equal";
}

testNotEqual(10);

<!-- Comparison with the Strict Inequality Operator -->
<!-- Add the strict inequality operator to the if statement so the function will return the string Not Equal when val is not strictly equal to 17 -->
// Setup
function testStrictNotEqual(val) {
  if (val !== 17) { // Change this line
    return "Not Equal";
  }
  return "Equal";
}

testStrictNotEqual(10);

<!-- Comparison with the Greater Than Operator -->
<!-- Add the greater than operator to the indicated lines so that the return statements make sense. -->
function testGreaterThan(val) {
  if (val > 100) {  // Change this line
    return "Over 100";
  }

  if (val > 10) {  // Change this line
    return "Over 10";
  }

  return "10 or Under";
}

testGreaterThan(10);

<!-- Comparison with the Greater Than Or Equal To Operator -->

<!-- Comparison with the Less Than Operator -->

<!-- Comparison with the Less Than Or Equal To Operator -->

<!-- Comparisons with the Logical And Operator -->

<!-- Comparisons with the Logical Or Operator -->

<!-- Introducing Else Statements -->

<!-- Introducing Else If Statements -->

<!-- Logical Order in If Else Statements -->

<!-- Chaining If Else Statements -->

<!-- Golf Code -->

<!-- Selecting from Many Options with Switch Statements -->

<!-- Adding a Default Option in Switch Statements -->

<!-- Multiple Identical Options in Switch Statements -->

<!-- Replacing If Else Chains with Switch -->

<!-- Returning Boolean Values from Functions -->

<!-- Return Early Pattern for Functions -->

<!-- Counting Cards -->

<!-- Build JavaScript Objects -->

<!-- Accessing Object Properties with Dot Notation -->

<!-- Accessing Object Properties with Bracket Notation -->

<!-- Accessing Object Properties with Variables -->

<!-- Updating Object Properties -->

<!-- Add New Properties to a JavaScript Object -->

<!-- Delete Properties from a JavaScript Object -->

<!-- Using Objects for Lookups -->

<!-- Testing Objects for Properties -->

<!-- Manipulating Complex Objects -->

<!-- Accessing Nested Objects -->

<!-- Accessing Nested Arrays -->

<!-- Record Collection -->

<!-- Iterate with JavaScript While Loops -->

<!-- Iterate with JavaScript For Loops -->

<!-- Iterate Odd Numbers With a For Loop -->

<!-- Count Backwards With a For Loop -->

<!-- Iterate Through an Array with a For Loop -->

<!-- Nesting For Loops -->

<!-- Iterate with JavaScript Do...While Loops -->

<!-- Replace Loops using Recursion -->

<!-- Profile Lookup -->

<!-- Generate Random Fractions with JavaScript -->

<!-- Generate Random Whole Numbers with JavaScript -->

<!-- Generate Random Whole Numbers within a Range -->

<!-- Use the parseInt Function -->

<!-- Use the parseInt Function with a Radix -->

<!-- Use the Conditional (Ternary) Operator -->

<!-- Use Multiple Conditional (Ternary) Operators -->

<!-- Use Recursion to Create a Countdown -->

<!-- Use Recursion to Create a Range of Numbers -->