← Basic Web Development

Lesson 2 of 10

Zoo Webpage

Add your first JavaScript: a button that shows a random fact, and a button that turns on night mode.

What you will learn

  • Arrays
  • Functions
  • Math.random()
  • click events
  • textContent
  • classList.toggle
  • if / else

Before you start

Geological Wonders. You already know HTML and CSS. This lesson adds JavaScript to a page that is already built.

What this page does

  1. The page shows three animals. Each animal has a picture and some facts.
  2. Click Show me a random animal fact. A fact appears under the buttons. Click again and you get a different fact.
  3. Click Night Mode. The whole page changes to dark colours, and the button label changes to Day Mode. Click it again to change back.

How it works

The random fact. The facts are stored in an array called randomFacts. An array is a numbered list. The first item is at position 0, not position 1. The function picks a random position, then writes that fact into the page.

var i = Math.floor(Math.random() * randomFacts.length);
randomFactDisplay.textContent = randomFacts[i];
  • Math.random() gives a number from 0 up to (but not including) 1.
  • Multiplying by randomFacts.length stretches that number to the size of the list.
  • Math.floor() rounds down to a whole number, so you always get a real position.

Try it. Open the console with F12 and type randomFacts[0], then randomFacts[1], then a number too big for the list. Watch when undefined appears.

Night mode. The function toggleTheme() adds the class night-mode to the page, or removes it if it is already there. That is what classList.toggle means. The CSS rule body.night-mode { ... } does the actual colour change. An if / else changes the button label.

Make night mode your own

These are the `body.night-mode` rules in index.css. Click Night Mode in your page first, so you can see them change.

400px
#10141c

Turn Night Mode on in the page first, then change this.

#1b2130

Build it step by step

Add one button at a time. Test each button before you write the next one.

  1. Start with the finished HTML and CSS

    Open index.html. The animals are there, but the buttons do nothing. Nothing is wired up yet. Check that <script src="zoo-interactive.js"></script> is the last line inside <body>.

  2. Make the list of facts

    In zoo-interactive.js, make an array called randomFacts. Put a few fact strings in it. Remember that an array is a numbered list and it starts at 0.

    var randomFacts = [
    "A lemur's tail is longer than its body.",
    "Orangutans build a new nest every night.",
    "Snakes smell with their tongue."
];

  3. Show a random fact

    Write a function called showRandomFact(). It picks a random position, gets that fact, and puts it in #randomFactDisplay using textContent. Then connect the function to the button. Click the button. You get a different fact each time.

    function showRandomFact() {
    var i = Math.floor(Math.random() * randomFacts.length);
    randomFactDisplay.textContent = randomFacts[i];
}

randomFactBtn.addEventListener("click", showRandomFact);

  4. Add night mode

    Write toggleTheme(). Use body.classList.toggle("night-mode"). Add an if / else to change the button label. Check that your CSS has the body.night-mode rules. Connect the function to the button and click it. The page changes colour.

Try these changes

Make these in the files beside this guide. None of them need anything the lesson has not covered.

  • Add more facts to the `randomFacts` array.
  • Add a fourth animal. Copy an `.animal-container` block, then change the text and the image.
  • Add a third button that changes the heading text.
  • Change the `body.night-mode` colours in `index.css` to your own dark theme.
Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Do not build the HTML page in this lesson. Start from the finished page so the whole session is about JavaScript.
  • Write the array first and read a fact by hand in the console: randomFacts[0], then randomFacts[1]. Do this before any function is written. It fixes the idea that arrays start at 0.
  • Type Math.random() in the console five times so the student sees a different number each time. Then add Math.floor() and run it again.
  • Attach the first button and stop. Let the student click it many times before you move on.
  • Do the console exercise on positions properly. Type randomFacts[0], [1], [2], then one too far, and let the student see undefined appear. This is the only place the course teaches array bounds directly, and Bug Hunt asks about them.