Girl Code

We're going to make stars appear and disappear on our page.

It could be for giving ratings, or it could be for a game where you click on stars to get stardust.

(This activity uses JavaScript.)

What skills do I need?

We recommend doing this after doing our "Make a page" and "TV Show Idea Generator" activities first.

It helps if you know the difference between HTML, CSS and JavaScript.

Part 1: Set up Neocities

Click 'Edit Site'

Make a new file:

Call it fivestar.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>Five Star</title>
    <style>
    /*This is the start of the CSS*/

    .star-box {
      width: 600px;
      background-color: grey;
      display: flex;
      flex-wrap: wrap;
    }

    .star {
      width: 120px;
      height: 120px;
      background-image: url("https://girlcode.co.nz/course/2/fivestar/goldstar.png");
      transition: opacity 1s;
    }

    .faded {
      opacity: 0;
    }
    /*end of CSS */
    </style>
  </head>
  <body>
    <h1 class="title">Five Star Rating</h1>
    <div class="star-box">
      <div class="star"></div>
    </div>
    <button class="button1">hello</button>
    <script>
//Hi there! This is the start of the JavaScript.

function greeting() {
  alert("Welcome!")
}

function addStar() {
  let starHtml = '<div class="star"></div>'
  let starContainer = document.querySelector(".star-box")
  starContainer.innerHTML += starHtml
}

function removeStar() {
  let firstStar = document.querySelector(".star")
  firstStar.parentElement.removeChild(firstStar)
}

function fadeStars() {
  let allStars = document.querySelectorAll(".star")
  for (let star of allStars) {
    star.classList.toggle("faded")
  }
}

//make the buttons call functions when clicked
let button1 = document.querySelector(".button1")
button1.addEventListener("click", greeting)

//This is the end of the JavaScript.
    </script>
  </body>
</html>

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

What is this?

You will see a page with one star and one button.

Try clicking on the button. You should see a message pop up.

Part 2: All about functions

Find the JavaScript. It starts with a <script> tag and ends with a </script> tag. Anything between those tags is JavaScript code.

1. The script contains four functions. The first function is called 'greeting'. Can you work out the names of the other three functions?

The other three functions are named addStar, removeStar and fadeStars.

2. Each function has a pair of curly brackets { and } that mark the start and end - much like a CSS rule. The code in between the brackets is inside that function.

Most of the JavaScript code is inside a function. Can you find any code that is not inside a function?

The last two lines, which mention 'button1', are not inside a function.

Part 3: Make the button add a star

We use JavaScript to make the button call a function when you click on it.

1. In the JavaScript, find this line: button1.addEventListener("click", greeting). (It's near the end.)

2. The word 'greeting' is the name of the function that the button is connected to.

3. Replace the word greeting with addStar.

We just changed what happens when you click on the button, using JavaScript.

CHECK: clicking the button now adds a star.

Part 4: Fix the button's label

The button's label says "hello". It should say something like "Add a star".

1. Find the HTML that adds a button to the page.

This is not the same line we were at before! This line is in the HTML, not the JavaScript.

2. Look for where it says 'hello' and replace 'hello' with a better label.

CHECK: The button has a better label instead of "hello".

Part 5: Remove stars

Let's make a new button that removes stars.

1. Add a new button to the HTML. Do this by copying the HTML code for the old button. (Remember, HTML means pointy brackets like these: <button...>)

2. Give your new button a different class. So our JavaScript can tell which is which.

3. CHECK that there are now two different buttons when you view the page.

4. In the JavaScript, make your new button work. Make it call the removeStar function when it is clicked.

CLUE: Remember the line right at the end? It starts with button1.addEventListener(. You will need to copy that line and the line above, and then change a few things to make your new button work.

CHECK: You have 2 buttons. One adds stars, one removes stars.

Part 6: Bonus function

We have connected buttons to the addStar and removeStar functions.

There is one more function in the code that we haven't used yet. Can you see it?

Add a third button, and make it call the other function.

Part 7: Styles

You could probably change the CSS (between <style> and </style>) to make the page look a lot better. Try giving the buttons a border, background-color, margin and padding!

What's next?

Once you've added some nice styles, move on to the Cat City activity! 🐈🐈🐈