Learning Objectives:

Students will be able to$...$

Create condition statements using:

If

Else If

Else

Switch

Task $1$:

You will create an application that asks the user to input a number. You will display back to the end user if the number is an odd or even number. Additionally, you will display back to the user if they did not enter a number.

Create a new Visual Studio Code workspace by:

Opening VS Code

Open Folder $>$ navigate to where you save documents for this class

Right click and select New $>$ Folder $>$ name the folder Lesson$25$

Select the Lesson$25$ folder

Create an index.html file by clicking on the New File icon in the Explorer

In index.html$,$ add the opening and closing tag in the body element before the tag

$$

Within the body element, type the following code:$$

Write a JavaScript function named oddOrEven$()$ within the script tags that does the following:

Stores the user input as a variable.

Hint: recall from our calculator app when we used the parseFloat$()$ method

Determine if the input enter by the user is an even, odd or not a number

Hint: recall from lesson $21$ when we learned about the different arithmetic operators

Hint: mathematically, how do you know a number is even or odd? This will be helpful in writing your condition statements

There are several solutions to this problem. However, in this learning activity, you will use an if$,$ else if and else statement.

This is an example of what your screen should look like if the user entered an even number:

This is an example of what your screen should look like if the user entered an odd number:

This is an example of what your screen should look like if the user entered anything other than a number:

Hint: There are $3$ outcomes that could happen $$ the number is odd, the number is even or the user did not enter a number. Based on this information, think about how you would set up your condition statements.

Task $2$: Switch Statement

You will create an application that asks the user to guess a name of one of the seven dwarfs

You will use the same$$ workspace as Task $1.$ No need to create another file. Just write your in the same index.html file.

Within the body element and after the code you wrote for Task $1,$ type the following code:

Write a JavaScript function named dwarfName$()$ within the script tags that does the following:

Stores the user input as a variable.

Hint: It should not matter if the user entered all capital or lower case letters

Using a switch statement, you will display back to the end user some text depending on which dwarf name they entered. Do not use an if$/$else statement!

Dwarf Name

Text to be displayed back

Bashful

I$\text{'}$m known for my shyness.

Doc

I$\text{'}$m known for his bossy attitude but in a good way, one that represents that of a leader.

Dopey

I$\text{'}$m known for my quietness and my affection for Snow White.

Grumpy

I$\text{'}$m known for my know$-$it$-$all attitude and pure stubbornness.

Happy

I$\text{'}$m known for my joyous outlook of the world and always having that smile on my face.

Sneezy

I$\text{'}$m known for constantly sneezing.

Sleepy

I$\text{'}$m know for my ability to fall asleep anywhere and anytime.

If the user entered anything else beside the above $7$ names, you will display back the following text and what they entered:$$

$$Sorry$,($name they entered$)$ is not a name of the $7$ dwarfs.$$

This is an example of what your screen should look like if they entered a correct dwarf name:

This is an example of what your screen should look like if they entered an incorrect dwarf name: