Girl Code

IF you rescue five cats THEN you win a free breadmaker!

(This activity uses JavaScript.)

What skills do I need?

IF you have tried HTML and CSS before THEN this is the right activity for you!

Part 1: Set up Neocities

IF you have a Neocities account, THEN Log in to Neocities.org. OTHERWISE, create a new Neocities account and log in. (It's free.)

In the Neocities dashboard, Make a new file:

Call it catcity.html

Open a tab to edit the new page.

Open a tab to view the new page.

Delete all the default code

Copy and Paste this code instead:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Cat City</title>
    <style>
    /*This is the start of the CSS*/
    body {
      background-color: orange;
    }
    button {
      background-color: lightgreen;
      padding:20px;
    }
    .info {
      font-size: 20px;
    }
    </style>
  </head>
  <body>
    <h1>Cat City</h1>
    <p class="info"></p>
    <p class="message"></p>
    <button class="button1">Buy catfood</button>
    <button class="button2">Catch a cat</button>
    <button class="button3">Give a cat to the SPCA</button>
    <script>
//Hello! This is the start of the JavaScript.
let catfood = 0

let messageElement = document.querySelector(".message")

function showInfo() {
  let infoElement = document.querySelector(".info")
  infoElement.innerHTML = "You have " + catfood + " tins of catfood."
}

function getCatfood() {
  catfood = catfood + 1
  showInfo()
  messageElement.innerHTML = "You bought some catfood."
}

let button1 = document.querySelector(".button1")
button1.addEventListener("click", getCatfood)
    </script>
  </body>
</html>

CHECK that you copied all the code. Save the page, then view it.

Part 2: What is this?

You get an orange page with 3 buttons.

Try the buttons. One already works – easy! But you will have to make the other two work.

Before you start, read these rules for how it should work.

Cat City Design

When you've finished, Cat City should work like this:

1. Buy catfood – this button gives you 1 more catfood. This part is already done for you!

2. Catch a cat – If you have some catfood (i.e. more than 0 catfoods), then you gain 1 cat and lose 1 catfood.

3. Give a cat to the SPCA – If you have some cats (more than 0 cats), then you lose 1 cat and gain 1 medal.

On every action, we need to call showInfo() which will write the new total amount of catfood and other numbers onto the page for the player to see.

We also need to display an appropriate message inside the messageElement.

Once you have read the design above, you can get started!

Part 3: Counting cats

Find the JavaScript. It starts with <script> and ends with </script>

Look at the first line of JavaScript code. It creates a variable called catfood and sets it to 0.

That variable represents how many tins of catfood the user has.

Add this line after it. This line creates a variable called cats and set it to 0.


let cats = 0

Look at the function named showInfo. It tells you how much catfood you have.

Let's edit the showInfo function so it also shows how many cats you have.

You need to change the line that starts with infoElement.innerHTML =

Here's the updated line, if you need it:

infoElement.innerHTML = "You have " + catfood + " tins of catfood and " + cats + " cats."

Test the page. When you click the first button, it should say "You have 1 tins of catfood and 0 cats."

OK.

Now we're going to add a way to catch a cat, by using some catfood.

Look at the function named getCatfood.

This function adds 1 to the number in the catfood variable.

Now you need to do a few things:

Make a copy of the getCatfood function.
Rename it to getCat.
In the new function, Instead of adding 1 to your catfood, subtract 1 from your catfood.
Add a new line that adds 1 to your cats. It will be very similar to the line that adds 1 to your catfood.
Update the message that is displayed to say "You used some catfood to catch a cat!"

To use this new function, it must be connected to a button. Do you remember how we connect a button to a function?

Connect the getCat function to button2. Look at the code at the end of the file for reference.

Test it out:

A user should be able to click 'Buy catfood' to increase catfood by 1.

A user should be able to click 'Catch a cat' to increase cats by 1, but decrease catfood by 1.

What happens if you have no catfood, but you still 'Catch a cat?'

Part 4: If and Else

A user should not be able to catch a cat if they have no catfood!

We can use the if command to make different things happen in different situations.

Add this inside your getCat function:


if (catfood > 0) {
  //you have catfood
} else {
  //you do not have catfood
}

Any instructions in the first pair of curly brackets will only happen if the test (catfood is more than 0) is true. The second pair of brackets has instructions that will happen if the test is false.

Move the appropriate code into the appropriate place so it only happens when the user has some catfood.

If they do not have any catfood, we shouldn't change any variables. But we should display a message:


messageElement.innerHTML = "You can't catch a cat until you buy some cat food!"

Testing time!

Test that you can buy catfood.

Test that you can catch cats, but it costs catfood.

Test that you cannot catch cats if catfood is 0.

Part 5: Make the third button work!

Make the third button work. This button is very similar to the one you just did. Except instead of taking catfood and giving cats, it takes cats and gives medals.

Look at the section "Part 2" above for a reminder of what each button should do.

You will need to make a new variable medals and set it to 0.

You will need to make the showInfo function say how many medals the user has.

You will need to make a new function that subtracts 1 from cats and adds 1 to medals.

You will need to connect the function to button3.

Oops, my page stopped working?

One mistake in your JavaScript can make everything stop working!

The good news is, we can see exactly where the mistake is.

When viewing your page, open the Javascript Console. If you're using Google Chrome, press CTRL+SHIFT+I (on Windows) or CMD+OPTION+I (on Mac) then find Console in the options that pop up.

(If you are not using Google Chrome, you still have a JavaScript console. Look in the options for 'Developer Tools'

Once the console is open, refresh the page. Any errors will be listed and the console will tell you exactly which line they happen on.

If the error message is "unexpected end of input", then the line number it tells you will be wrong. This error means that you haven't closed all of your brackets. (You're probably missing a closing curly bracket at the end of one of your functions.)

Your computer doesn't know where you left out a bracket. It just knows that one is missing, somewhere!

Part 6: free breadmaker

(Make sure you have the other three buttons working before starting this.)

The rule for breadmakers is: If you have 5 medals (more than 4 medals), you can trade in 5 medals to get a free breadmaker!

Can you add a new button that lets the player get a breadmaker?

Test all the different actions. Remember to test both success and failure. For example:

Give a cat to the SPCA - if I have 1 cat, it should work.
Give a cat to the SPCA - if I have 0 cats, it should not work!

Part 7: Emojis

Try adding this code to the end of the line in showInfo function that starts with infoElement.innerHTML =


  + "🐈".repeat(cats)

It will repeat the cat emoji as many times as the number of cats.

Add similar code to show the other variables - catfood, medals and breadmakers - as emoji too!

If you can't type emojis on your computer, you can copy and paste emojis from an emoji dictionary.

What's next?

Once you're happy with your Cat City, move on to the final JS activity: Stopwatch!