Programming Basics Assignment 3: Code Analysis, Output, and Solutions

This assignment solution for Programming Basics Assignment 3 covers three main sections. The first section analyzes a given JavaScript code snippet, identifying variables, their types, and explaining the functionality of each line and block. The second section focuses on determining the output of three different code snippets, requiring the student to trace the code execution and predict the final values of variables. The third section addresses a coding problem related to CSS, specifically centering a div horizontally and vertically. The solution includes a search query, investigation of search results, and a detailed explanation of a selected solution, including alternative methods such as Flexbox, and references to resources like W3Schools and MicroTut.

Programming Basics
Assignment 3
FALL 2019

1 Code Explanation
A). Variables and Their Types
Figure 1: Variables and Their Types
LINE VARIABLE TYPE
2 currentYear number
Year number
6 birthyear number
7 age number
8 legalAge number
9 isLegal undefined
12, 14 isLegal Boolean
17 message undefined
19, 21 message String

B). Explanation For What is Happening In Each Line or Block of, and What the
Script Does in General.
LINE OR
BLOOK
WHAT IS HAPPENING
1-4 Define a function call getAge. Takes in one parameter (year) as input and returns Age
Declare a variable called currentYear and assign the value 2019 to it
Return the value for the (difference between currentAge and year that was passed as a
parameter) to the calling statement on line 7
End of getAge() function.
2
3
4
5 Leave a blank space for readability
6 Declare a variable called birthyear and assign the value 21
7 Declare a variable called age and assign the value returned by function getAge to it
In this case the retuned value will be 26. i.e 2019-1993
8 Declare a variable called legalAge and assign the value 21 to it
9 Declare a variable called isLegal. (no value assigned yet, hence is of type undefined)
10 Leave a blank space for readability
11-15
11
12
14
15
An IF statement to compare age and legalAge.
If age is greater than or Equals Legal age,
set isLegal Boolean variable to true.
set isLegal to False when age is less than LegalAge
End IF statement.
16 Leave a blank space for readability
17 Declare a variable called message. (no value assigned yet, hence is of type undefined)
18 -22 An IF statement to Check whether person is of legal age,
And if they are of legal age, assign a “You are old enough to drink.” to message variable
Else, since person is not of legal age,
assign a “You are not old enough to drink.” to message variable
End IF statement.
19
20
21
22
23 Leave a blank space for readability
24 Display the (content of) message to the screen.
SCRIPT
SUMMARY
Generally, the Script takes in a Birth year as input, and compute the number of
years elapsed ever since, to Current Year. This is one’s Lifespan in terms of Years.
If the person has reached the age of 21 or above, They are marked eligible to
drink, and a appropriate message is displayed regarding whether they are eligible
or not.

2. Code Output Determination Step By Step
A) The final value of variable myVariableA (in console.log(myVariableA))
var myVariableA = 3;
for(var i = 0; i < 12; i++) {
myVariableA = myVariableA – 3;
}
console.log(myVariableA);
myVariableA = 3
when i = 0, myVariableA = 3-3 = 0
when i = 1, myVariableA = 0-3 = -3
when i = 2, myVariableA = -3-3 = -6
when i = 3, myVariableA = -96 -3 = -9
when i = 4, myVariableA = -9-3 = -12
when i = 5, myVariableA = -9-3 = -15
when i = 6, myVariableA = -15-3 = -18
when i = 7, myVariableA = -18-3 = -21
when i = 8, myVariableA = -21-3 = -24
when i = 9, myVariableA = -24-3 = -27
when i = 10, myVariableA = -27-3 = -30
when i = 11, myVariableA = -30-3 = -33
when i = 12, Loop Exits as 12 < 12 results to false
Hence, final myVariableA = -33
B) The final value of variable myColor (in console.log(myColor))
var myVariableB = 10;
while(myVariableB) {
myVariableB = myVariableB – 2;
}
if(myVariableB > 0) {
var myColor = "red";
} else {
var myColor = "blue";
}
console.log(myColor);
myVariableB = 10;
myVariableB = 8 -> 6 -> 4 -> 2 -> 0
WHILE-Loop exits when myVariableB = 0.
As myVariableB = 0, go to “else” option:
Set myColor to “blue” (This is the final value)
Display “blue”

C) The final value of variable myString
function getNumberOfCats() {
var numCats = 0;
for(var i = 3; i < 12; i += 2) {
numCats++;
}
return numCats * 2;
}
var a = "Hello, world! "
var name = "Flo";
var numCats = getNumberOfCats();
var myString = a + "My name is " + name + " and I
have " + numCats + " cats.";
if(numCats > 7) {
var note1 = "(That is a lot of cats.)";
} else {
var note1 = "(That is a reasonable number of
cats.)";
}
if(numCats % 2 == 0) {
var note2 = "(That is also an even number of cats.)";
} else {
var note2 = "(That is also an odd number of cats.)";
}
myString = myString + note1;
myString = myString + note2;
console.log(myString);
Initial numCats = 0;
i = 3, 5, 7, 9, 11
numCats = 1, 2, 3, 4, 5
// end of for-loop
Returns (5*2) = 10
// end of getNumberOfCats function
numCats = getNumberOfCats() = 10
myString = “Hello, world! My name is Flo and I have
10 cats.”
// if statement valuates to true
// assign "(That is a lot of cats.)" value to note1
// skip else part
//end IF Statement
// check if numCats is even. (10 mod 2 = 0)
// assign "(That is also an even number of cats.)” to
note2
// skip else part
//End IF Statement
myString = “Hello, world! My name is Flo and I have
10 cats.(That is a lot of cats.)”
myString = “Hello, world! My name is Flo and I have
10 cats. (That is a lot of cats.)(That is also an even
number of cats.)
“Hello, world! My name is Flo and I have 10 cats.
(That is a lot of cats.)(That is also an even number of
cats.)”
Hello, world! My name is Flo and I have 10 cats.(That is a lot of cats.)(That is also an even number of cats.)

3. Finding Solutions to Coding Problems
A) Search Phrase or Search Question to Enter Into Google
CSS center div horizontally and vertically
B) Search Results Investigation
i. CSS Layout - Horizontal & Vertical Align - W3Schools
https://www.w3schools.com/css/css_align.asp
ii. MicroTut: Centering a Div Both Horizontally And Vertically
https://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally
iii. Centering a div in a page, horizontally and vertically
https://codepen.io/Tipue/pen/CBbna
C) How the Selected Solution Works
MicroTut’s Centering a div Horizontally and Vertically caught my interest. While both w3school and
codepen were quite straight forward to comprehend, Microtuts goes a step further to give details of
varies methods and validity of those given method in different browsers. I noticed that Microtuts runs
its demos / code snippets on / from codepen.io.
Figure 2: code on microtuts, being run on Codepen.io site

Figure 3: achieving similar results, with a responsive approach
Figure 4: centering using CSS3 Flexbox
The site gives a variety of possibilities, which I found productive. I got to know about alternative
methods such as Flexbox that I previously heard no knowledge about. The explanation is beginner
friendly, without being too shallow or too detailed at the same time. I found this balance so good that I
opted to analyze this site at the Expense of Stack Overflow and w3schools, which in my opinion are well
known and have rich content for quick help related to programming and code snippets.