Five Star

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 and jQuery.)

What skills do I need?

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

We recommend doing this after doing our "Make a page" and "Idea generator" activities first.

Part 1: Set up Neocities

Make a new page:

Call it fivestar

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'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>Five Star</title>
    <style>
    /*This is the start of the CSS*/

    .star-box {
      width: 600px;
      height: 120px;
      background-color: grey;
    }

    .star {
      width: 120px;
      height: 120px;
      background-image: url("http://codeclubakl.github.io/linked/goldstar.png");
      float: left;
    }

    /*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>
//Hello! This is the start of the JavaScript.

var greeting = function () {
  alert("Hello there!");
}

var addStar = function () {
  var star = $('<div class="star"></div>');
  $(".star-box").append(star);
}

var removeStar = function () {
  $('.star').first().remove();
}

var fadeStars = function () {
  $('.star').fadeToggle();
}

//make the buttons call functions when clicked
$(".button1").on("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.

Clicking the button makes a message pop up.

Part 2: Make the button add a star

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

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

2. Find this line: $(".button1").on("click", greeting);. (It's near the end.)

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 3: 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 before! It's not part of the JavaScript.

2. Give the button a better label.

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

Part 4: 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. This means the JavaScript can know 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'). You will need to copy that line and then change a few things to make your new button work.

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

Part 5: More functions

There is one more function in the code. Can you see it? Can you make a new button that calls that function?

Part 6: Styles

You could probably change the CSS (between <style> and </style>) to make the page look a lot better. You can make the buttons look different!

Code Club Auckland

Making cool stuff with code!