Zoo Webpage

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 a different fact appears.
3. Click Night Mode. The whole page changes to dark colours. The button label changes to Day Mode. Click it again to change back.

How it works

The random fact. The page keeps the facts 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 it 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 1. It never gives you 1 itself.
• Multiplying by randomFacts.length makes the number run from 0 up to the number of facts.
• Math.floor() rounds the number down to a whole number. That always gives you a real position in the array.

Try it. Open the console with F12. Type randomFacts[0], then randomFacts[1]. Then type a position that is too big for the array. Watch for undefined.

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

Build it step by step

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

1. 1

   Start with the finished HTML and CSS

   Open index.html. The animals are there. The buttons do nothing yet, because you have not connected any JavaScript to them. Check that <script src="zoo-interactive.js"></script> is the last line inside <body>.

2. 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. 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. 3

   Show a random fact

   Write a function called showRandomFact(). It picks a random position, gets the fact at that position, 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. 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. Click the button. The page changes colour.