Schedule > Introductory JavaScript Exercises

Overview

To really understand some of the JavaScript you've been learning, it is important to practice. Please download the exercise files (below) and complete the following 7 exercises below (each is found in it's own folder).

Download Activity Files

Tips

For all of these exercises, the general format is the same:

  1. Create a function in the JS file that (a) targets an HTML element, and (b) changes something about it. For example: 
    myFunction() {
    const el = document.querySelector("body");
    el.style.backgroundColor = "hotpink";
}
  2. Invoke the function in the HTML file by attaching the function to DOM element's event (usually the click event): 
    <button onclick="myFunction()">Click me</button>

Exercise 1: Greeting Buttons (01-greeting)

1. Complete the JavaScript Functions

Open greeting.js and complete the two functions:

  • sayHello() function: Make it show an alert that says "Hello!"
  • sayGoodbye() function: Make it show an alert that says "Goodbye!"

Hint: Use alert("your message here") to show a popup message.

2. Connect the Buttons

In the HTML file, add onclick attributes to the buttons:

  • First button: Add onclick="sayHello()"
  • Second button: Add onclick="sayGoodbye()"

3. Bonus Challenge

Instead of using alerts, try changing the text in the <div id="message"></div> element. You'll need to:

  • Use document.getElementById("message") to find the element
  • Use .innerHTML to change its content

What You Should See

  • When you click "Say Hello", you should see a popup saying "Hello!"
  • When you click "Say Goodbye", you should see a popup saying "Goodbye!"

Exercise 2: Style Properties (02-style-properties)

1. Complete the JavaScript Functions

Open main.js and complete each function to change the background color of the corresponding box:

  • makeRed(): Change the first box (id="section1") to red
  • makeBlue(): Change the second box (id="section2") to blue
  • makePink(): Change the third box (id="section3") to pink
  • makeOrange(): Change the fourth box (id="section4") to orange

Hint: Use document.getElementById("section1").style.backgroundColor = "red"

2. Connect the Buttons

In the HTML file, add onclick attributes to each button:

  • Red button: Add onclick="makeRed()"
  • Blue button: Add onclick="makeBlue()"
  • Pink button: Add onclick="makePink()"
  • Orange button: Add onclick="makeOrange()"

3. Challenge - Create a Reset Button

Add a fifth button that changes all boxes back to white background. You'll need to:

  • Add the button to the HTML
  • Create a resetColors() function in JavaScript
  • Connect the button to the function

What You Should See

  • Each button should change its corresponding box to the right color
  • The boxes should have colored backgrounds when clicked

Exercise 3: Simple Image Carousel (03-carousel-simple)

1. Complete the JavaScript Functions

Open main.js and complete each function to show different animals:

  • showCat(): Change the image to show a cat and update the caption
  • showDog(): Change the image to show a dog and update the caption
  • showBird(): Change the image to show a bird and update the caption
  • showFish(): Change the image to show a fish and update the caption

Hint:

  • Use document.getElementById("current-image").src = "images/cat.jpg" to change the image
  • Use document.getElementById("caption").innerHTML = "This is a cat" to change the text

2. Connect the Buttons

In the HTML file, add onclick attributes to each button:

  • First button: Add onclick="showCat()"
  • Second button: Add onclick="showBird()"
  • Third button: Add onclick="showFish()"
  • Fourth button: Add onclick="showDog()"

3. Challenge - Add a New Animal

Add a fifth button for a new animal (like a rabbit or elephant):

  • Add the button to the HTML
  • Create a new function in JavaScript
  • Make sure you have the image file in the images/ folder
  • Connect the button to your new function

What You Should See

  • Clicking each button should show a different animal image
  • The caption text should change to match the animal shown
  • The image should be centered and properly sized

Exercise 4: Functions with Parameters (04-function-with-parameters)

1. Create Three Specific Functions

First, create three separate functions that each change the background color:

  • changeToRed(): Set the body background to red
  • changeToBlue(): Set the body background to blue
  • changeToGreen(): Set the body background to green

Hint: Use document.body.style.backgroundColor = "red"

2. Connect the Buttons

Add onclick attributes to each button:

  • Red button: Add onclick="changeToRed()"
  • Blue button: Add onclick="changeToBlue()"
  • Green button: Add onclick="changeToGreen()"

3. Challenge - Create One Flexible Function

Now create a single function that can change the background to any color:

  • changeColor(color): This function should accept a color as a parameter
  • Update your buttons to use this new function:
    • Red button: onclick="changeColor('red')"
    • Blue button: onclick="changeColor('blue')"
    • Green button: onclick="changeColor('green')"

What You Should See

  • Each button should change the entire page background to its color
  • The page should smoothly transition between colors

Exercise 5: Interactive Piano (05-piano)

1. Complete the Missing Piano Functions

Open script.js and create the missing functions for the piano keys:

  • playF(): Play the F note
  • playG(): Play the G note
  • playA(): Play the A note
  • playB(): Play the B note
  • playC(): Play the high C note

Hint: Follow the pattern from the existing functions:

function playF() {
    const audio = document.querySelector("audio");
    audio.src = "scales/scale4/F.mp3";
    audio.play();
}

2. Connect the Missing Buttons

In the HTML file, add onclick attributes to the missing buttons:

  • F button: Add onclick="playF()"
  • G button: Add onclick="playG()"
  • A button: Add onclick="playA()"
  • B button: Add onclick="playB()"
  • High C button: Add onclick="playC()"

3. Challenge - Add Scale Selection

The dropdown should let users choose between "Low" and "High" scales. Try to make the piano keys play different octaves based on the selection.

What You Should See

  • Each piano key should play its corresponding musical note
  • The audio should play clearly when buttons are clicked
  • The piano should have a complete musical scale

Exercise 6: Theme Switching (06-theming)

1. Complete the Theme Functions

Open index.js and complete each function to change the page theme:

  • toggleFall(): Change the body class to "fall"
  • toggleWinter(): Change the body class to "winter"
  • toggleSpring(): Change the body class to "spring"

Hint: Use document.body.className = "fall" to change the body's class

2. Test the Themes

The buttons are already connected in the HTML. Click each button to see the different themes:

  • Fall: Should show autumn colors and fall background image
  • Winter: Should show winter colors and winter background image
  • Spring: Should show spring colors and spring background image

3. Challenge - Add a Summer Theme

Try adding a fourth button and theme:

  • Add a "Summer" button to the HTML
  • Create a toggleSummer() function
  • Add summer styles to the CSS file
  • Connect the button to your function

What You Should See

  • Each button should change the entire page's appearance
  • The header should show different background images
  • The text colors should change to match each season
  • The transitions should be smooth

Exercise 7: Simple Calculator (07-make-a-calculator)

1. Complete the Addition Function

Open index.js and complete the addNumbers() function:

  • Get the first number from the input field with id "num1"
  • Get the second number from the input field with id "num2"
  • Convert both values to numbers using parseInt() or Number()
  • Add the numbers together
  • Display the result in the element with id "answer"

Hint:

function addNumbers() {
    const num1 = document.getElementById("num1").value;
    const num2 = document.getElementById("num2").value;
    const result = parseInt(num1) + parseInt(num2);
    document.getElementById("answer").innerHTML = result;
}

2. Complete the Other Math Functions

Create the remaining functions:

  • subtractNumbers(): Subtract the second number from the first
  • multiplyNumbers(): Multiply the two numbers
  • divideNumbers(): Divide the first number by the second

3. Connect the Buttons

Add onclick attributes to the remaining buttons:

  • Subtract button: Add onclick="subtractNumbers()"
  • Multiply button: Add onclick="multiplyNumbers()"
  • Divide button: Add onclick="divideNumbers()"

4. Challenge - Add Error Handling

Try to handle cases where:

  • The user doesn't enter numbers
  • The user tries to divide by zero
  • The user enters invalid input

What You Should See

  • Enter two numbers in the input fields
  • Click any operation button to see the result
  • The answer should appear in the gray box below
  • All four operations (+, -, ×, ÷) should work correctly