Master JavaScript from Basics to Advanced

Hey guys, in this video we will learn about Numbers in JavaScript.

Practice Problems:

Try to answer the following questions. Also, try to explain why do you think that your answer is correct. Best of Luck!!

1. console.log(0 / 0)

2. console.log(0 / 5)

3. console.log(3 * 'a')

4. console.log('a' * 3)

5. console.log('b' + 4)

6. console.log(4 + 'b')

7. console.log(5 - 'c')

8. console.log('c' - 5)

Codepen URL: https://codepen.io/qaifikhan/pen/BMLxyd

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Number Functions in JavaScript.

Practice Problems:

Try to answer the following questions.  Also, try to explain why do you think your answer is correct. Best of Luck!!

1. console.log(toString(100))

2. console.log(parseInt('44'))

3. console.log(parseInt('22.222'))

4. console.log(parseInt('Banana'))

5. console.log(parseFloat(12))

6. console.log(parseFloat(13.3))

7. var num1 = 10; console.log(num1.toFixed(2))

8. var num1 = 15.456789; console.log(num1.toFixed())

9. var num1 = 15.456789; console.log(number.toFixed(2))

10. var num1 = 15.456789; console.log(num1.toFixed(3))

Codepen URL: https://codepen.io/qaifikhan/pen/daWYge

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Strings in JavaScript.

Practice Problems:

Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!

1. console.log('JavaScript is Cool")

2. console.log('I'm gonna learn JavaScript')

3. console.log("This is a \"test\" string")

4. console.log('This is another /'test/' string')

5. console.log("How about this string??")

Codepen URL: https://codepen.io/qaifikhan/pen/rPmBoB

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Inbuilt String Functions in JavaScript.

Practice Problems:

Try to answer the following questions.  Also, try to explain why do you think your answer is correct. Best of Luck!!

var mStr = "This is my test string to practice the JavaScript string function concepts. This is gonna be fun."

1. Find the length of the first sentence in the string.

2. Find the length of the second sentence in the string.

3. Find the first and last occurrence of the word "This".

4. Find the sub-string with length 12 from the START of the string mStr.

5. Find the sub-string with length 12 from the END of the string mStr.

Codepen URL: https://codepen.io/qaifikhan/pen/ZwKELb

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Inbuilt String Functions in JavaScript.

Practice Problems:

Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!

var str1 = 'Today is';

var str2 = ' A beautiful day '

var str3 = ' In Hawaii. '

Result = 'Today is a beautiful day in Hawaii.'

1. Use the str1, str2, str3 to create the Result string. Keep the extra spaces, lowercase and uppercase letters in mind.

var mStr = 'Mo Tu We Th Fr Sa Su'

2. Convert this string to an array that holds different days. Also, capitalize all the characters.

Codepen URL: https://codepen.io/qaifikhan/pen/exWmJE

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about If-else conditional statement in JavaScript.

Practice Problems:

Answer the following questions. Use code-pen to execute the code. Best of Luck!!

Q1. Take the values given below of length and breadth of a rectangle and check if it is square or not. Change values and see if your code works or not.

var length=200;

var breadth=200;

Q2. Write some code to check which number is greatest. Change values and see if your code works or not.

var num1=5, num2=8, num3=20;

Q3. A school has following rules for grading system:

a. Below 25 - F

b. 25 to 45 - E

c. 45 to 50 - D

d. 50 to 60 - C

e. 60 to 80 - B

f. Above 80 - A

var enteredMarks = 77

Change the value of enteredMarks and print the corresponding grade.

Q4. var numberOfItemPurchased = 8

A shop will give a discount of 10% if the cost of the purchased quantity is more than 1000. Suppose, one unit will cost 100. Change the value of numberOfItemPurchased and print total cost for the user.

Codepen URL: https://codepen.io/qaifikhan/pen/GemzZx

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Switch Conditional Statement in JavaScript.

Practice Problems:

Answer the following questions. Use code-pen to execute the code. Best of Luck!!

Q1. Write a program to print the number of days in a month using a switch case. Change the value of monthNumber and check if your code works fine.

var monthNumber = 3;

Example:

monthNumber = 3

Output:

Month = March

Total number of days = 31

Q2. Write a program to check vowel or consonant using switch case. Change the value of enteredAlphabet and check if your code works fine.

var enteredAlphabet = 'd'

Example:

enteredAlphabet: c

Output: 'c' is consonant

Q3. Write a program to check even or odd number using switch case. Change the value of enteredNumber and check if your code works fine.

var enteredNumber = 41

Example:

enteredNumber: 41

Output: 41 is an odd number

Codepen URL: https://codepen.io/qaifikhan/pen/wOdNbV

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Arithmetic Operators in JavaScript.

Practice Problems:

Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.

Best of Luck!!

Q. What will be printed in the console.

var num1 = 1 + 5;

var num2 = num1 / 4;

var num3 = 1 + 5;

var num4 = num3 / 4;

console.log(num2 + " " + num4);

Q. What will be printed in the console.

var a = 1;

var b = 2;

var c;

var d;

c = ++b;

d = a++;

c++;

b++;

++a;

console.log(a + " " + b + " " + c);

Q. What will be printed in the console.

var input = 7;

var output1 = ++input + ++input + ++input;

var output2 = input++ + input++ + input++;

var output3 = input++ + ++input + input++;

console.log(output1 + ' ' + output2 + ' ' + output3);

Codepen URL: https://codepen.io/qaifikhan/pen/RzwLWd

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Assignment Operators in JavaScript.

Practice Problems:

Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.

Best of Luck!!

Q. With x = 0, which of the following statements will produce a value of 1?

1. x++;

2. x = x + 1;

3. x += 1;

Q. With x = 1, which of the following statements will produce a value of 0?

1. x--;

2. x = x - 1;

3. x -= 1;

Q. What will be the result of following statement?

var num = 100;

num += 5 * 10 / 2;

Q. What will be the result of following statement?

var num = 100;

num *= 2 * 10 / 5;

Q. What will be the result of following statement?

var num = 100;

num /= 2 * 8 - 15;

Codepen URL: https://codepen.io/qaifikhan/pen/gNOXwg

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Comparison and Logical Operators in JavaScript.

Practice Problems:

Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.

Best of Luck!!

Q. What will be printed in the console?

var a = 10;

var b = 5;

var c = 12;

var e = 8;

var d;

d = parseInt((a * (c - b) / e + (b + c)) <= (e * (c + a) / (b + c) + a));

console.log(d);

if (d == 1){

     console.log((a * (c - b) / e + (b + c)));

} else {

     console.log((e * (c + a) / (b + c) + a));

}

Q. What will be printed in the console?

var n = 2;

var p = 4;

var q = 5;

var w = 3;

if ( !((p * q) /n <= (q * w) + n/p )) {

     console.log( ++p + w++ + " " + ++n);

}

else {

     console.log(--p + q-- + " " + --n);

}

Codepen URL: https://codepen.io/qaifikhan/pen/wOdOPM

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Implicit Type Coercion in JavaScript.

Practice Problems:

Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.

Best of Luck!!

Q. What will be printed in the console.

1. console.log(true + false)

2. console.log(12 / "6")

3. console.log("number" + 15 + 3)

4. console.log(15 + 3 + "number")

5. console.log(1 > null)

6. console.log("foo" + + "bar")

7. console.log('true' == true)

8. console.log(false == 'false')

9. console.log(null == '')

10. console.log(!!"false" == !!"true")

Implicit Coercion Table: https://dorey.github.io/JavaScript-Equality-Table/

Codepen URL: https://codepen.io/qaifikhan/pen/KEmYrr

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Explicit Type Coercion in JavaScript.

Practice Problems:

Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.

Best of Luck!!

Q. A. What will be printed in the console?

1. String(123)

2. String(-12.3)

3. String(null)

4. String(undefined)

5. String(true)

6. String(false)

Q. B. What will be printed in the console?

1. Boolean('')

2. Boolean('Hello')

3. Boolean(0)

4. Boolean(200)

5. Boolean(-0)

6. Boolean(-200)

7. Boolean(NaN)

8. Boolean(null)

9. Boolean(undefined)

10. Boolean(false)

Q. C. What will be printed in the console?

1. Number(null)

2. Number(undefined)

3. Number(true)

4. Number(false)

5. Number(" 12 ")

6. Number("-12.34")

7. Number("\n")

8. Number(" 12s ")

9. Number(123)

   
   

Codepen URL: https://codepen.io/qaifikhan/pen/wOdbGY

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Objects in JavaScript.

Practice Problems:

Q1. We have an object of customers for our food delivery app with the information about their past orders with order values.

Write a JavaScript program to give a "Premium Membership" to the customer if the

customer has made at least 5 orders of the minimum value of 20. The customers and their past order history is given below.

customers_data={

'Ben10': [22, 30, 11, 17, 15, 52, 27, 12],

'Sameer': [5, 17, 30, 33, 40, 22, 26, 10, 11, 45],

'Zeeshan': [22, 30, 11, 5, 17, 30, 6, 57]

}

Q2. Write a JavaScript program to list the properties of a JavaScript object.

Sample Data

Input:

Object:

student = {

name: "David Rayy",

sclass: "VI",

rollno: 12

};

Output: ["name", "sclass", "rollno"]

Q3. Write a JavaScript program to delete the rollno property from the following object. Also print the object before or after deleting the property

Sample Data

Input:

student = {

name : "David Rayy",

sclass : "VI",

rollno : 12

}

Output:

student = {

name : "David Rayy",

sclass : "VI"

}

Q4. Write a JavaScript program to get the length of a JavaScript object.

Sample Data

Input:

student = {

name : "David Rayy",

sclass : "VI",

rollno : 12

}

Output: 3

Q5. Write a JavaScript program to display the reading status (i.e. display book name, author name and reading status) of the following books.

Sample Data

Input:

library = [

{

author: 'Bill Gates',

title: 'The Road Ahead',

readingStatus: true

},

{

author: 'Steve Jobs',

title: 'Walter Isaacson',

readingStatus: true

},

{

author: 'Suzanne Collins',

title: 'Mockingjay: The Final Book of The Hunger Games',

readingStatus: false

}

];

Output:

For book with reading status 'true' we can print : 'You have already read {book-name} by {author-name}.'

For book with reading status 'false' we can print: 'You still need to read {book-name} by {author-name}.'

Codepen URL: https://codepen.io/qaifikhan/pen/qvmGwp

Previous Video: https://www.edyoda.com/course/1496?episode_id=2450

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Arrays in JavaScript.

Practice Problems:

Q1. Write a JavaScript program to find the longest string from a given array.

Sample Data:

Input: Array: ['asdf', 'sd', 'something','right','position']

Output: "Longest String in array : something "

Q2. Write a JavaScript program to remove '0', false, undefined, null, NaN, '' from given array.

Sample Data:

Input: Array: [NaN, 0, 15, false, -22, '',undefined, 47, null,94]

Output: [15, -22, 47, 94]

Q3. Write a JavaScript code to divide a given array of positive integers into two parts. First element goes to first part, second element goes to second part, and third element goes to first part and so on. Now compute the sum of two parts and store into an array of size two.

Sample Data:

Input: Array: [1, 3, 6, 2, 5, 10]

Output: [12, 15]

Q4. Write a JavaScript program to check whether there is at least one element which occurs in two given sorted arrays of integers.

Sample Data:

(a) Input: arr1 = [1,2,3]; arr2 = [3,4,5]

Output: True

(b) Input: arr1 = [1,2,3]; arr2 = [4,5,6]

Output: False

Q5. Write a JavaScript function to find the difference of two arrays.

Sample Data:

Input: arr1=[1, 2, 3]; arr2=[100, 2, 1, 10]

Output: [3, 100, 10]

Codepen URL: https://codepen.io/qaifikhan/pen/zbwVaa

Previous Video: https://www.edyoda.com/course/1496?episode_id=2451

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Arrays in JavaScript.

Practice Problems:

Q1. Write a JavaScript program to create a new array by reversing the elements of given array.

Sample Data:

Input: arr = [1,'a',2,'b',3,'c',6,'d',7,'e',8,'f']

Output: ["f", 8, "e", 7, "d", 6, "c", 3, "b", 2, "a", 1]

Q2. Write a JavaScript program to check if there is at least one element which occurs in

two given sorted arrays of integers.

Sample Data:

Input: arr1 = [4, 11, 12, 23, 46, 65, 70, 73, 98]; arr2 = [7, 13, 25, 46, 58, 70, 84]

Output: "Element found: Yes"

Q3. Write a JavaScript program to check whether a given array of integers represents

either a strictly increasing or a strictly decreasing sequence.

E.g. [1,2,2] is not a strictly increasing sequence, [1,2,3] is a strictly increasing sequence.

Sequences to test:

[4,5,6,7,8]

[3,4,6,6,7,8,9]

[34,23,45,55,67,77]

Q4. Write a JavaScript function to convert an amount to coins.

Sample Data:

Input: 46, [25, 10, 5, 2, 1]

Here 46 is the amount and 25, 10, 5, 2, 1 are coins.

Output: 25, 10, 10, 1

Q5. Write a JavaScript function to create a new array from given array by formatting the

numbers to human readable form with correct suffix like 1 to 1st, 2 to 2nd, 3 to 3rd and 4 to 4th.

Sample Data:

Input: [22,8, 301, 404, 35, 99]

Output: ["22nd", "8th", "301st", "404th", "35th", "99th"]

Codepen URL: https://codepen.io/qaifikhan/pen/gEWVrw

Previous Video: https://www.edyoda.com/course/1496?episode_id=2452

My Twitter Handle: @qaifikhan

Hey guys, in this video we have talked about loops. Check it out.

Hey guys, in this video we will learn about While Loops in JavaScript.

Practice Problems:

Q1. Write a JavaScript program to find the GCD of two numbers : 15 and 25.

[ The GCD or Greatest Common Divisor of two integers is the largest integer that divides each of the integers such that their remainder is zero.]

Sample Data:

Input: num1 = 15; num2 = 25

Output: 5

Q2. Write a JavaScript program to print the LCM of two numbers : 15 and 20?

[A common multiple is a number that is a multiple of two or more integers. e.g. The

common multiples of 3 and 4 are 0, 12, 24, .... The least common multiple (LCM) of two

numbers is the smallest number (not zero) that is a multiple of both.]

Sample Data

Input: n1 = 5, n2 = 18

Output: 90

Q3. Write a JavaScript program to find the number of even values in sequence before

the first occurrence of a given number. [Hint: You can use while loop here]

Sample Data:

Input: Array: [1,2,3,4,5,6,7,8,9,10,11,12]

Number: 8

Output: 3

Q4. Write a JavaScript program to sum the multiples of 3 and 5 under 1000.

Sample Data

Input: numbers from 0 to 1000

Output: 233168

Q5. Write a JavaScript program which iterates the integers from 1 to 15. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".

Sample Data

Input: numbers from 0 to 15

Output:

1

2

3 Fizz

4

5 Buzz

--------

Codepen URL: https://codepen.io/qaifikhan/pen/EMmqza

Previous Video: https://www.edyoda.com/course/1496?episode_id=2453

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about For loops in JavaScript.

Practice Problems:

Q1. Write a JavaScript program to encode a message in the language which hackers use to communicate.

Example: Hackers write "javascript is cool" as "j4v45cr1pt 15 c00l".

Instructions: The program should replace all 'a' with '4', 'e' with '3', 'i' with '1', 'o' with '0' and 's' with '5'.

String to convert: 'Optimism is the faith that leads to achievement. Nothing can be done without hope and confidence. '

Q2. Write a JavaScript program to find how many vowels are there in the sentence.

Sentence: Good, better, best. Never let it rest. 'Til your good is better and your better is

best.

Output: Number of vowels = 25

Q3. Write a JavaScript program which accepts a string as input and swap the case of

each character.

For example, if you input 'The Quick Brown Fox', the output should be 'tHE qUICK bROWN fOX'.

[ Hint: You can create two string variables of all alphabets in lowercase(a-z) and in upper

case(A-Z). ]

Q4. Write a JavaScript for loop that will iterate from 0 to 10. For each iteration, it will check if the current number is odd or even, and display a message to the screen.

Sample Data:

Output:

"0 is even"

"1 is odd"

"2 is even"

----------

----------

Q5. Write a JavaScript function that will reverse all the words which are of odd length.

The even length words are not changed.

Sample Data:

Input: ‘There is exactly one space between each word and no punctuation is used.’

Output: "erehT is yltcaxe eno ecaps neewteb each word dna no noitautcnup is used“

Codepen URL: https://codepen.io/qaifikhan/pen/EMXZQE

Previous Video: https://www.edyoda.com/course/1496?episode_id=2454

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Functions in JavaScript.

Codepen URL: https://codepen.io/qaifikhan/pen/YozLYa

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Function Arguments.

Codepen URL: https://codepen.io/qaifikhan/pen/mdbENJx

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Scope and Environment of Variables and Functions.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Variable Hoisting.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Function Hoisting.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Document Object Model.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to select HTML elements using getElementById(), getElementsByClassName() and getElementsByTagName().

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Query Selectors - querySelector() and querySelectorAll().

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to update HTML element content and attributes using JavaScript.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to update styles of an HTML element.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will talk about Events, Event Listeners and Event Handlers.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to add and remove classes to and from HTML elements using JavaScript.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to get styles of HTML elements using JavaScript.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Form Events

Event References: https://developer.mozilla.org/en-US/docs/Web/Events

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Keyboard Events

Please download the below files for assignment use:

Audio Files: https://drive.google.com/open?id=1eW0q8xrMv3sBilXoWmre98kpuvhp4jH3

Event References: https://developer.mozilla.org/en-US/docs/Web/Events

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Mouse Events

Event References: https://developer.mozilla.org/en-US/docs/Web/Events

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to create new HTML elements using JavaScript.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will create the web app feature I gave you to design in the previous video.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn how to replace and delete HTML elements using JavaScript.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about Browser Object Model.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about the Screen and Navigator object.

My Twitter Handle: @qaifikhan

Hey guys, in this video we will learn about History and Location object.

My Twitter Handle: @qaifikhan