The if, else if and else Statements in Action

Practicing using the if, else if and else conditional control blocks.

Lab 1: Console Coin Toss

Using the if code block and else code blocks.

Lab preview of simple if statement using logic for a coin toss.

Setup Instructions

Copy all the files from the start-01 folder to practice folder and replace if necessary.

The activity's completed files can be found in the completed folder.

Steps:

Open the if-coin-toss-console.html file in your web browser and open the Sources window for the if-coin-toss-console.js file and open the Console drawer.
Open the if-coin-toss-console.js file in your code editor. Insert at end of the file the following line …
```
console.log(toss < .5);
```
… and save.
Reload if-coin-toss-consol.html file in your web browser. Repeat reloading a few times and observe the Console window.
In the if-coin-toss-console.js file replace this line …
```
console.log(toss < .5);
```
… with the following …
```
if (toss < .5){
	console.log("Tails!");
}
```
… and save.
Reload if-coin-toss-consol.html file in your web browser. Repeat reloading a few times and until you have observed Tails! displayed at least once in the Console window.
DIY: Add one more if code block that displays the message Heads! in the Console window when the toss variable is .5 or higher. Test until you are convinced that you get both heads and tails messages correctly based on your logic.
```
if (toss >= .5){
	console.log("Heads!");
}
```
What changes would you make so heads occurs 75% of the time?
Change the .5 to .25 in both boolean expressions.
```
if (toss < .5.25){
	console.log("Tails!");
}
if (toss >= .5.25){
	console.log("Heads!");
}
```
In the if-coin-toss-console.js file replace these 2 lines …
```
}
if (toss >= .5){
```
… with the following …
```
}else{
```
… and save.
Reload if-coin-toss-consol.html file in your web browser. Repeat reloading a few times and until you are convinced that the data in the Console window is producing the correct results for a heads coin flip.
What changes would you make so heads occurs 75% of the time?
Change the .5 to .25 in the tails boolean expression.
```
if (toss < .5.25){
	console.log("Tails!");
}else{
	console.log("Heads!");
}
```

Lab 2: Console Dice Game

Using the if code block, else if code block and else code block.

Lab preview of simple if, else if and if statements using logic for a two player dice game.

Objective: Handle the a element click event.

Setup Instructions

Copy all the files from the start-02 folder to practice folder and replace if necessary.

The activity's completed files can be found in the completed folder.

Steps:

Open the if-dice-game-console.html file in your web browser and open the Sources window for the if-dice-game-console.js file and open the Console drawer.

Open the if-dice-game-console.js file in your code editor. Insert at end of the file the following line …

console.log('Player 1 wins:', player1 > player2);
console.log('Player 2 wins:', player1 < player2);
console.log('Tie:', player2 == player1);

… and save.

Reload if-dice-game-console.html file in your web browser. Repeat reloading until you get a win for player 1, a win for player 2 and a tie by observing the Console window.

In the if-dice-game-console.js file replace the following lines …

console.log('Player 1 wins:', player1 > player2);
console.log('Player 2 wins:', player1 < player2);
console.log('Tie:', player2 == player1);

… with the following …

if (player1 > player2){
	console.log('Player 1 wins!');
}
if (player1 < player2){
	console.log('Player 2 wins!');
}
if (player1 == player2){
	console.log('Tie!');
}

… and save.

Reload if-dice-game-console.html file in your web browser. Repeat reloading until you get a win for player 1, a win for player 2 and a tie by observing the Console window.
In the if-dice-game-console.js file replace the following 2 lines …
```
}
if (player1 < player2){
```
… with the following …
```
}else if (player1 < player2){
```
… and save.
Reload if-dice-game-console.html file in your web browser. Repeat reloading until you are convinced player 2 is winning appropriately.
In the if-dice-game-console.js file replace the following 2 lines …
```
}
if (player1 == player2){
```
… with the following …
```
}else{
```
… and save.
Reload if-dice-game-console.html file in your web browser. Repeat reloading until you are convinced tie game condition is detected correctly.