Appendix – Practice
Exercise, Project, and Self-
Check Quiz Answers
Chapter 1, Getting Started with
JavaScript
Practice exercises
Practice exercise 1.1
4 + 10
14
console.log("Laurence");
Laurence
undefined
Practice exercise 1.2
<!DOCTYPE html>
<html>
<head>
<title>Tester</title>
</head>
<body>
[ 425 ]
Appendix
<script>
console.log("hello world");
</script>
</body>
</html>
Practice exercise 1.3
<!DOCTYPE html>
<html>
<head>
<title>Tester</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
Practice exercise 1.4
let a = 10; // assign a value of 10 to variable a
console.log(a); // This will output 10 into the console
/*
This is a multi-line
Comment
*/
Projects
Creating an HTML file and a linked JavaScript file
<!doctype html>
<html>
<head>
<title>JS Tester</title>
</head>
[ 426 ]
Practice Exercise, Project, and Self-Check Quiz Answers
<body>
<script src="myJS.js"></script>
</body>
</html>
// console.log("Laurence");
/*
This is my comment
Laurence Svekis
*/
Self-check quiz
1. <script src="myJS.js"></script>.
2. No.
3. By opening and closing it with /* and */.
4. Comment out the line with //.
Chapter 2, JavaScript Essentials
Practice exercises
Practice exercise 2.1
console.log(typeof(str1));
console.log(typeof(str2));
console.log(typeof(val1));
console.log(typeof(val2));
console.log(typeof(myNum));
Practice exercise 2.2
const myName = "Maaike";
const myAge = 29;
const coder = true;
const message = "Hello, my name is " + myName + ", I am " + myAge+"
years old and I can code JavaScript: " + coder + ".";
console.log(message);
[ 427 ]
Appendix
Practice exercise 2.3
let a = window.prompt("Value 1?");
let b = window.prompt("Value 2?");
a = Number(a);
b = Number(b);
let hypotenuseVal = ((a * a) + (b * b))**0.5;
console.log(hypotenuseVal);
Practice exercise 2.4
let a = 4;
let b = 11;
let c = 21;
a = a + b;
a = a / c;
c = c % b;
console.log(a, b, c);
Projects
Miles-to-kilometers converter
//Convert miles to kilometers.
//1 mile equals 1.60934 kilometers.
let myDistanceMiles = 130;
let myDistanceKM = myDistanceMiles * 1.60934;
console.log("The distance of " + myDistanceMiles + " miles is equal to
" + myDistanceKM + " kilometers");
BMI calculator
//1 inch = 2.54 centimetres.
//2.2046 pounds in a kilo
let inches = 72;
let pounds = 180;
let weight = pounds / 2.2046; // in kilos
let height = inches * 2.54; // height in centimetres
console.log(weight, height);
let bmi = weight/(height/100*height/100);
console.log(bmi);
[ 428 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Self-check quiz
1. String
2. Number
3. Line 2
4. world
5. Hello world!
6. Whatever the user enters in
7. 71
8. 4
9. 16 and 536
10. true
false
true
true
false
Chapter 3, JavaScript Multiple Values
Practice exercises
Practice exercise 3.1
const myList = ["Milk", "Bread", "Apples"];
console.log(myList.length);
myList[1] = "Bananas";
console.log(myList);
Practice exercise 3.2
const myList = [];
myList.push("Milk", "Bread", "Apples");
myList.splice(1, 1, "Bananas", "Eggs");
const removeLast = myList.pop();
console.log(removeLast);
[ 429 ]
Appendix
myList.sort();
console.log(myList.indexOf("Milk"));
myList.splice(1, 0, "Carrots", "Lettuce");
const myList2 = ["Juice", "Pop"];
const finalList = myList.concat(myList2, myList2);
console.log(finalList.lastIndexOf("Pop"));
console.log(finalList);
Practice exercise 3.3
const myArr = [1, 2, 3];
const bigArr = [myArr, myArr, myArr];
console.log(bigArr[1][1]);
console.log(bigArr[0][1]);
console.log(bigArr[2][1]);
Practice exercise 3.4
const myCar = {
make: "Toyota",
model: "Camry",
tires: 4,
doors: 4,
color: "blue",
forSale: false
};
let propColor = "color";
myCar[propColor] = "red";
propColor = "forSale";
myCar[propColor] = true;
console.log(myCar.make + " " + myCar.model);
console.log(myCar.forSale);
Practice exercise 3.5
const people = {friends:[]};
const friend1 = {first: "Laurence", last: "Svekis", id: 1};
const friend2 = {first: "Jane", last: "Doe", id: 2};
const friend3 = {first: "John", last: "Doe", id: 3};
people.friends.push(friend1, friend2, friend3);
console.log(people);
[ 430 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Projects
Manipulating an array
theList.pop();
theList.shift();
theList.unshift("FIRST");
theList[3] = "hello World";
theList[2] = "MIDDLE";
theList.push("LAST");
console.log(theList);
Company product catalog
const inventory = [];
const item3 = {
name: "computer",
model: "imac",
cost: 1000,
qty: 3
}
const item2 = {
name: "phone",
model: "android",
cost: 500,
qty: 11
}
const item1 = {
name: "tablet",
model: "ipad",
cost: 650,
qty: 1
}
inventory.push(item1, item2, item3);
console.log(inventory);
console.log(inventory[2].qty);
[ 431 ]
Appendix
Self-check quiz
1. Yes. You can reassign values within an array declared with const, but cannot
redeclare the array itself.
2. Length
3. The outputs are as follows:
-1
1
4. You can do the following:
const myArr = [1,3,5,6,8,9,15];
myArr.splice(1,1,4);
console.log(myArr);
5. The output is as follows:
[empty × 10, "test"]
undefined
6. The output is as follows:
undefined
Chapter 4, Logic Statements
Practice exercises
Practice exercise 4.1
const test = false;
console.log(test);
if(test){
console.log("It's True");
}
if(!test){
console.log("False now");
}
[ 432 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Practice exercise 4.2
let age = prompt("How old are you?");
age = Number(age);
let message;
if(age >= 21){
message = "You can enter and drink.";
}else if(age >= 19){
message = "You can enter but not drink.";
}else{
message = "You are not allowed in!";
}
console.log(message);
Practice exercise 4.3
const id = true;
const message = (id) ? "Allowed In" : "Denied Entry";
console.log(message);
Practice exercise 4.4
const randomNumber = Math.floor(Math.random() * 6);
let answer = "Something went wrong";
let question = prompt("Ask me anything");
switch (randomNumber) {
case 0:
answer = "It will work out";
break;
case 1:
answer = "Maybe, maybe not";
break;
case 2:
answer = "Probably not";
break;
case 3:
answer = "Highly likely";
break;
default:
[ 433 ]
Appendix
answer = "I don't know about that";
}
let output = "You asked me " + question + ". I think that " + answer;
console.log(output);
Practice exercise 4.5
let prize = prompt("Pick a number 0-10");
prize = Number(prize);
let output = "My Selection: ";
switch (prize){
case 0:
output += "Gold ";
case 1:
output += "Coin ";
break;
case 2:
output += "Big ";
case 3:
output += "Box of ";
case 4:
output += "Silver ";
case 5:
output += "Bricks ";
break;
default:
output += "Sorry Try Again";
}
console.log(output);
Projects
Evaluating a number game answers
let val = prompt("What number?");
val = Number(val);
let num = 100;
let message = "nothing";
if (val > num) {
message = val + " was greater than " + num;
} else if (val === num) {
[ 434 ]
Practice Exercise, Project, and Self-Check Quiz Answers
message = val + " was equal to " + num;
} else {
message = val + " is less than " + num;
}
console.log(message);
console.log(message);
Friend checker game answers
let person = prompt("Enter a name");
let message;
switch (person) {
case "John" :
case "Larry" :
case "Jane" :
case "Laurence" :
message = person + " is my friend";
break;
default :
message = "I don't know " + person;
}
console.log(message);
Rock paper scissors game answers
const myArr = ["Rock", "Paper", "Scissors"];
let computer = Math.floor(Math.random() * 3);
let player = Math.floor(Math.random() * 3);
let message = "player " + myArr[player] + " vs computer " +
myArr[computer] + " ";
if (player === computer) {
message += "it's a tie";
} else if (player > computer) {
if (computer == 0 && player == 2) {
message += "Computer Wins";
} else {
message += "Player Wins";
}
} else {
if (computer == 2 && player == 0) {
message += "Player Wins";
} else {
[ 435 ]
Appendix
message += "Computer Wins";
}
}
console.log(message);
Self-check quiz
1. one
2. this is the one
3. login
4. Welcome, that is a user: John
5. Wake up, it's morning
6. Result:
• true
• false
• true
• true
7. Result:
100 was LESS or Equal to 100
100 is Even
Chapter 5, Loops
Practice exercises
Practice exercise 5.1
const max = 5;
const ranNumber = Math.floor(Math.random() * max) + 1;
//console.log(ranNumber);
let correct = false;
while (!correct) {
let guess = prompt("Guess a Number 1 - " + max);
guess = Number(guess);
if (guess === ranNumber) {
[ 436 ]
Practice Exercise, Project, and Self-Check Quiz Answers
correct = true;
console.log("You got it " + ranNumber);
} else if (guess > ranNumber) {
console.log("Too high");
} else {
console.log("Too Low");
}
}
Practice exercise 5.2
let counter = 0;
let step = 5;
do {
console.log(counter);
counter += step;
}
while (counter <= 100);
Practice exercise 5.3
const myWork = [];
for (let x = 1; x < 10; x++) {
let stat = x % 2 ? true : false;
let temp = {
name: `Lesson ${x}`, status: stat
};
myWork.push(temp);
}
console.log(myWork);
Practice exercise 5.4
const myTable = [];
const rows = 4;
const cols = 7;
let counter = 0;
for (let y = 0; y < rows; y++) {
let tempTable = [];
for (let x = 0; x < cols; x++) {
counter++;
[ 437 ]
Appendix
tempTable.push(counter);
}
myTable.push(tempTable);
}
console.table(myTable);
Practice exercise 5.5
const grid = [];
const cells = 64;
let counter = 0;
let row;
for (let x = 0; x < cells + 1; x++) {
if (counter % 8 == 0) {
if (row != undefined) {
grid.push(row);
}
row = [];
}
counter++;
let temp = counter;
row.push(temp);
}
console.table(grid);
[ 438 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Practice exercise 5.6
const myArray = [];
for (let x = 0; x < 10; x++) {
myArray.push(x + 1);
}
console.log(myArray);
for (let i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
for (let val of myArray) {
console.log(val);
}
Practice exercise 5.7
const obj = {
a: 1,
b: 2,
c: 3
};
[ 439 ]
Appendix
for (let prop in obj) {
console.log(prop, obj[prop]);
}
const arr = ["a", "b", "c"];
for (let w = 0; w < arr.length; w++) {
console.log(w, arr[w]);
}
for (el in arr) {
console.log(el, arr[el]);
}
Practice exercise 5.8
let output = "";
let skipThis = 7;
for (let i = 0; i < 10; i++) {
if (i === skipThis) {
continue;
}
output += i;
}
console.log(output);
Alternatively, the following code could be used, replacing continue with break:
let output = "";
let skipThis = 7;
for (let i = 0; i < 10; i++) {
if (i === skipThis) {
break;
}
output += i;
}
console.log(output);
[ 440 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Project
Math multiplication table
const myTable = [];
const numm = 10;
for(let x=0; x<numm; x++){
const temp = [];
for(let y = 0; y<numm; y++){
temp.push(x*y);
}
myTable.push(temp);
}
console.table(myTable);
[ 441 ]
Appendix
Self-check quiz
1. Result:
0
3
6
9
2. Result:
0
5
1
6
2
7
[1, 5, 7]
Chapter 6, Functions
Practice exercises
Practice exercise 6.1
function adder(a, b) {
return a + b;
}
const val1 = 10;
const val2 = 20;
console.log(adder(val1, val2));
console.log(adder(20, 30));
Practice exercise 6.2
const adj = ["super", "wonderful", "bad", "angry", "careful"];
function myFun() {
const question = prompt("What is your name?");
const nameAdj = Math.floor(Math.random() * adj.length);
console.log(adj[nameAdj] + " " + question );
[ 442 ]
Practice Exercise, Project, and Self-Check Quiz Answers
}
myFun();
Practice exercise 6.3
const val1 = 10;
const val2 = 5;
let operat = "-";
function cal(a, b, op) {
if (op == "-") {
console.log(a — b);
} else {
console.log(a + b);
}
}
cal(val1, val2, operat);
Practice exercise 6.4
const myArr = [];
for(let x=0; x<10; x++){
let val1 = 5 * x;
let val2 = x * x;
let res = cal(val1, val2, "+");
myArr.push(res);
}
console.log(myArr);
function cal(a, b, op) {
if (op == "-") {
return a - b;
} else {
return a + b;
}
}
Practice exercise 6.5
let val = "1000";
(function () {
let val = "100"; // local scope variable
[ 443 ]
Appendix
console.log(val);
})();
let result = (function () {
let val = "Laurence";
return val;
})();
console.log(result);
console.log(val);
(function (val) {
console.log(`My name is ${val}`);
})("Laurence");
Practice exercise 6.6
function calcFactorial(nr) {
console.log(nr);
if (nr === 0) {
return 1;
}
else {
return nr * calcFactorial(--nr);
}
}
console.log(calcFactorial(4));
Practice exercise 6.7
let start = 10;
function loop1(val) {
console.log(val);
if (val < 1) {
return;
}
return loop1(val - 1);
}
loop1(start);
function loop2(val) {
console.log(val);
if (val > 0) {
[ 444 ]
Practice Exercise, Project, and Self-Check Quiz Answers
val--;
return loop2(val);
}
return;
}
loop2(start);
Practice exercise 6.8
const test = function(val){
console.log(val);
}
test('hello 1');
function test1(val){
console.log(val);
}
test1("hello 2");
Projects
Create a recursive function
const main = function counter(i) {
console.log(i);
if (i < 10) {
return counter(i + 1);
}
return;
}
main(0);
Set timeout order
const one = ()=> console.log('one');
const two = ()=> console.log('two');
const three = () =>{
console.log('three');
one();
two();
}
[ 445 ]
Appendix
const four = () =>{
console.log('four');
setTimeout(one,0);
three();
}
four();
Self-check quiz
1. 10
2. Hello
3. Answer:
Welcome
Laurence
My Name is Laurence
4. 19
5. 16
Chapter 7, Classes
Practice exercises
Practice exercise 7.1
class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
}
let person1 = new Person("Maaike", "van Putten");
let person2 = new Person("Laurence", "Svekis");
console.log("hello " + person1.firstname);
console.log("hello " + person2.firstname);
[ 446 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Practice exercise 7.2
class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
fullname(){
return this.firstname + " " + this.lastname;
}
}
let person1 = new Person("Maaike", "van Putten");
let person2 = new Person("Laurence", "Svekis");
console.log(person1.fullname());
console.log(person2.fullname());
Practice exercise 7.3
class Animal {
constructor(species, sounds) {
this.species = species;
this.sounds = sounds;
}
speak() {
console.log(this.species + " " + this.sounds);
}
}
Animal.prototype.eat = function () {
return this.species + " is eating";
}
let cat = new Animal("cat", "meow");
let dog = new Animal("dog", "bark");
cat.speak();
console.log(dog.eat());
console.log(dog);
[ 447 ]
Appendix
Projects
Employee tracking app
class Employee {
constructor(first, last, years) {
this.first = first;
this.last = last;
this.years = years;
}
}
const person1 = new Employee("Laurence", "Svekis", 10);
const person2 = new Employee("Jane", "Doe", 5);
const workers = [person1, person2];
Employee.prototype.details = function(){
return this.first + " " + this.last + " has worked here " +
this.years + " years";
}
workers.forEach((person) => {
console.log(person.details());
});
Menu items price calculator
class Menu {
#offer1 = 10;
#offer2 = 20;
constructor(val1, val2) {
this.val1 = val1;
this.val2 = val2;
}
calTotal(){
return (this.val1 * this.#offer1) + (this.val2 * this.#offer2);
}
get total(){
return this.calTotal();
}
}
[ 448 ]
Practice Exercise, Project, and Self-Check Quiz Answers
const val1 = new Menu(2,0);
const val2 = new Menu(1,3);
const val3 = new Menu(3,2);
console.log(val1.total);
console.log(val2.total);
console.log(val3.total);
Self-check quiz
1. class
2. Using the following syntax:
class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
}
3. Inheritance
4. Answers:
• True
• False
• True
• True
• False
5. B
Chapter 8, Built-In JavaScript Methods
Practice exercises
Practice exercise 8.1
const secretMes1 = "How's%20it%20going%3F";
const secretMes2 = "How's it going?";
const decodedComp = decodeURIComponent(secretMes1);
console.log(decodedComp);
[ 449 ]
Appendix
const encodedComp = encodeURIComponent(secretMes2);
console.log(encodedComp);
const uri = "http://www.basescripts.com?=Hello World";
const encoded = encodeURI(uri);
console.log(encoded);
Practice exercise 8.2
const arr = ["Laurence", "Mike", "Larry", "Kim", "Joanne", "Laurence",
"Mike", "Laurence", "Mike", "Laurence", "Mike"];
const arr2 = arr.filter ( (value, index, array) => {
console.log(value,index,array.indexOf(value));
return array.indexOf(value) === index;
});
console.log(arr2);
Practice exercise 8.3
const myArr = [1,4,5,6];
const myArr1 = myArr.map(function(ele){
return ele * 2;
});
console.log(myArr1);
const myArr2 = myArr.map((ele)=> ele*2);
console.log(myArr2);
Practice exercise 8.4
const val = "thIs will be capiTalized for each word";
function wordsCaps(str) {
str = str.toLowerCase();
const tempArr = [];
let words = str.split(" ");
words.forEach(word => {
let temp = word.slice(0, 1).toUpperCase() + word.slice(1);
tempArr.push(temp);
});
return tempArr.join(" ");
}
console.log(wordsCaps(val));
[ 450 ]
Practice Exercise, Project, and Self-Check Quiz Answers
Practice exercise 8.5
let val = "I love JavaScript";
val = val.toLowerCase();
let vowels = ["a","e","i","o","u"];
vowels.forEach((letter,index) =>{
console.log(letter);
val = val.replaceAll(letter,index);
});
console.log(val);
Practice exercise 8.6
console.log(Math.ceil(5.7));
console.log(Math.floor(5.7));
console.log(Math.round(5.7));
console.log(Math.random());
console.log(Math.floor(Math.random()*11)); // 0-10
console.log(Math.floor(Math.random()*10)+1); // 1-10;
console.log(Math.floor(Math.random()*100)+1); // 1-100;
function ranNum(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
for (let x = 0; x < 100; x++) {
console.log(ranNum(1, 100));
}
Practice exercise 8.7
let future = new Date(2025, 5, 15);
console.log(future);
const months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
let day = future.getDate();
let month = future.getMonth();
let year = future.getFullYear();
let myDate = `${months[month-1]} ${day} ${year}`;
console.log(myDate);
[ 451 ]
Appendix
Projects
Word scrambler
let str = "JavaScript";
function scramble(val) {
let max = val.length;
let temp = "";
for(let i=0;i<max;i++){
console.log(val.length);
let index = Math.floor(Math.random() * val.length);
temp += val[index];
console.log(temp);
val = val.substr(0, index) + val.substr(index + 1);
console.log(val);
}
return temp;
}
console.log(scramble(str));
Countdown timer
const endDate = "Sept 1 2022";
function countdown() {
const total = Date.parse(endDate) - new Date();
const days = Math.floor(total / (1000 * 60 * 60 * 24));
const hrs = Math.floor((total / (1000 * 60 * 60)) % 24);
const mins = Math.floor((total / 1000 / 60) % 60);
const secs = Math.floor((total / 1000) % 60);
return {
days,
hrs,
mins,
secs
};
}
function update() {
const temp = countdown();
[ 452 ]
Practice Exercise, Project, and Self-Check Quiz Answers
let output = "";
for (const property in temp) {
output += (`${property}: ${temp[property]} `);
}
console.log(output);
setTimeout(update, 1000);
}
update();
Self-check quiz
1. decodeURIComponent(e)
2. 4
3. ["Hii", "hi", "hello", "Hii", "hi", "hi World", "Hi"]
4. ["hi", "hi World"]
Chapter 9, The Document Object Model
Practice exercises
Practice exercise 9.1
[ 453 ]
Appendix
Practice exercise 9.2
console.log(window.location.protocol);
console.log(window.location.href);
Practice exercise 9.3
<script>
const output = document.querySelector('.output');
output.textContent = "Hello World";
output.classList.add("red");
output.id = "tester";
output.style.backgroundColor = "red";
console.log(document.URL);
output.textContent = document.URL;
</script>
Projects
Manipulating HTML elements with JavaScript
const output = document.querySelector(".output");
const mainList = output.querySelector("ul");
mainList.id = "mainList";
[ 454 ]
Practice Exercise, Project, and Self-Check Quiz Answers
console.log(mainList);
const eles = document.querySelectorAll("div");
for (let x = 0; x < eles.length; x++) {
console.log(eles[x].tagName);
eles[x].id = "id" + (x + 1);
if (x % 2) {
eles[x].style.color = "red";
} else {
eles[x].style.color = "blue";
}
}
Self-check quiz
1. You should see an object representing the list of elements contained within
body object of the HTML page.
2. document.body.textContent = "Hello World";
3. The code is as follows:
for (const property in document) {
console.log(`${property}: ${document[property]}`);
}
4. The code is as follows:
for (const property in window) {
console.log(`${property}: ${document[window]}`);
}
5. The code is as follows:
<!doctype html>
<html>
<head>
[ 455 ]
Appendix
<title>JS Tester</title>
</head>
<body>
<h1>Test</h1>
<script>
const output = document.querySelector('h1');
output.textContent = "Hello World";
</script>
</body>
</html>
Chapter 10, Dynamic Element
Manipulation Using the DOM
Practice exercises
Practice exercise 10.1
[ 456 ]
