Functions

What you'll learn

• How to declare and use functions with parameters
• How to return values from functions
• How to call functions and pass arguments
• How to create interactive buttons with onclick events
• How to combine multiple functions to build simple applications

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

• In each exercise below, click the Stackblitz link and and familiarize yourself with the interface.

Steps to Create Your Function Projects

:computer: Exercise One: Mathematical Calculator Functions

Time needed: 20-25 minutes

Getting Started

1. Open StackBlitz and access the template: Exercise 1
2. Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your own IDE

Your Task

Create a program that performs basic math operations using functions.

Step-by-Step Instructions

1. Get user input for two numbers:

   • Declare a variable called x and use +prompt() to get a number
   • Declare a variable called y and use +prompt() to get a number

2. Create the addition function:

   • Declare a function called addition() with 2 parameters: x and y
   • Inside the function, return the sum of x and y

3. Create the remaining math functions:

   • Create subtract() function (returns x - y)
   • Create multiply() function (returns x * y)
   • Create divide() function (returns x / y)

4. Display the results:

   • Use console.log() to display the result of each function

:bulb: Tip Function Structure Example:

function addition(x, y) {
    return x + y;
}

Remember to call your functions with the values you collected!

Expected Output

When you enter 10 as the first number and 5 as the second number:

Your console output (press F12 to open) should look like this:

:bulb: Tip Having trouble with prompts?

• The + before prompt() converts the string input to a number
• Without it, "10" + "5" would give you "105" instead of 15!

:computer: Exercise 2: Button with Function Call

Time needed: 15-20 minutes

Getting Started

1. Open StackBlitz and access the template: Exercise 2
2. Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your own IDE

Your Task

Create a button that displays an alert message when clicked.

Step-by-Step Instructions

1. In your JavaScript file (script.js):

   • Declare a variable called myWords
   • Assign the value "Hello World" to myWords

2. Create the echo function:

   • Declare a function called echo()
   • Inside the function, use alert() to display the myWords variable

3. In your HTML file (index.html):

   • Create a button with the text "Echo"
   • Add an onclick="echo()" attribute to the button

:bulb: Tip HTML Button Example:

<button onclick="echo()">Echo</button>

The onclick attribute tells the button which function to run when clicked!

Expected Output

Your webpage should show:

When you click the button, you'll see:

:information_source: Learn More:

• onclick event reference

:emoji: Exercise 3: Random Dice Generator

Time needed: 15-20 minutes

Getting Started

1. Open StackBlitz and access the template: Exercise 3
2. Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your own IDE

Your Task

Create a 6-sided dice that generates random numbers when clicked.

Step-by-Step Instructions

1. Create the random function:

   • Declare a function called random() (no parameters needed)
   • Inside the function:
     • Create a variable called diceNumber
     • Generate a random number between 1 and 6
     • Use alert() to display the dice number

2. Create the dice button:

   • In your index.html file, create a button
   • Add onclick="random()" to the button
   • Give it appropriate text like "Roll Dice :emoji:"

:bulb: Tip Random Number Formula:

Math.floor(Math.random() * 6) + 1

• Math.random() gives a decimal between 0 and 0.999...
• Multiply by 6 to get 0 to 5.999...
• Math.floor() rounds down to get 0 to 5
• Add 1 to get 1 to 6!

Expected Output

Your webpage should show:

When you click the button (example roll of 4):

:information_source: Learn More:

• JavaScript Random Numbers

:emoji:️ Exercise 4: Restaurant Ordering System

Time needed: 25-30 minutes

Getting Started

1. Open StackBlitz and access the template: Exercise 4
2. Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your own IDE

Your Task

Create a restaurant ordering system that tracks your money and allows you to order food.

Step-by-Step Instructions

1. Set up your wallet:

   • Declare a variable called myMoney
   • Set its value to 50

2. Create the menu buttons (in index.html):

   • Create 3 buttons with these exact texts:
     • "Chicken Chop RM12"
     • "Fish and Chips RM14"
     • "Pasta RM16"
   • Each button should call order() with the food name as an argument

3. Create the order function:

   javascript

   function order(food) {
       // Check which food was ordered
       // Call pay() with the correct price
   }
   

   • Use if-else statements to check the food type
   • Call pay() with the food name and price

4. Create the balance function:

   javascript

   function balance(price) {
       // Return myMoney minus the price
   }
   

5. Create the pay function:

   javascript

   function pay(food, price) {
       // Check if you have enough money
       // Update myMoney and show messages
   }
   

   • Use balance() to check if you can afford it
   • If balance is negative: log "Oops, you don't have enough money!"
   • If you can afford it:
     • Update myMoney to the new balance
     • Log: "You have ordered the [food name]."
     • Log: "You have RM[amount] left."

:bulb: Tip Button Example:

<button onclick="order('Chicken Chop')">Chicken Chop RM12</button>

Notice how we pass the food name as a string in quotes!

Expected Output

After ordering all 3 foods and trying to order more:

:warning: Warning Common Mistakes:

• Forgetting quotes around food names in onclick
• Not updating myMoney after each purchase
• Using wrong prices in the order() function

Required Elements

:white_check_mark: Checklist for Each Exercise

Exercise 1 - Calculator:

• Four math functions (addition, subtract, multiply, divide)
• Each function has 2 parameters and returns a value
• User input collected with +prompt()
• Results displayed in console

Exercise 2 - Echo Button:

• Variable myWords declared with "Hello World"
• Function echo() that alerts the variable
• HTML button with onclick="echo()"
• Alert appears when button is clicked

Exercise 3 - Dice Generator:

• Function random() with no parameters
• Generates numbers 1-6 using Math.random()
• HTML button that calls the function
• Alert shows the dice result

Exercise 4 - Restaurant System:

• Variable myMoney set to 50
• Three menu buttons with onclick events
• Three functions: order(), balance(), and pay()
• Console messages for successful orders and insufficient funds

Project Submission

:warning: Warning Before You Submit:

1. Test ALL your functions - make sure they work!
2. Check that all buttons trigger the correct functions
3. Verify console outputs match the expected results
4. Make sure you haven't deleted any template files

:emoji: Submit Your Work

Total time needed: 75-100 minutes

When you have completed all 4 exercises, submit them using the link below:

Submit Your Projects Here

:information_source: Submission Tips:

• Submit the Stackblitz link for each exercise
• Or upload your project files if you worked locally
• Double-check that all functions are working before submitting!

Troubleshooting

Common Issues and Solutions

"My function isn't running when I click the button"

• Check that your function name in onclick matches exactly
• Make sure you included the parentheses: onclick="myFunction()"
• Verify your script.js is linked in the HTML file

"My prompts show NaN or undefined"

• Use +prompt() to convert strings to numbers
• Check that you're passing the correct variables to functions

"Console isn't showing anything"

• Press F12 to open developer tools
• Make sure you're using console.log() not just log()
• Check that your functions are actually being called

"My math operations give weird results"

• Remember: without +, prompt returns strings
• "10" + "5" = "105" (string concatenation)
• 10 + 5 = 15 (number addition)

:bulb: Tip Still stuck?

• Review the function syntax examples in each exercise
• Check the template code for hints
• Make sure all your brackets and parentheses match up