Idea Generator

We're using JavaScript to make a TV Series Idea Generator.

It will help you come up with great ideas for a TV series, like this:

A dance instructor and a rebellious teenager solve mysteries on a tropical island.

What skills do I need?

This activity is for people who've already done some basic HTML and CSS.

If you've never written HTML, please do our "make a page" activity instead.

Part 1: Set up Neocities

Make a new page:

Call it tvshow

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>TV Concept Generator</title>
    <style>
    
    body {
        background-color: #aaaaff;
    }

    h2 {
        color: blue;
    }
    </style>
  </head>
  <body>
    <h1>TV concept generator</h1>
    <h2 id="display-area">Click the button!</h2>
    <button id="next-page-button">Next idea</button>
    <script>
      //Hello! This is the JavaScript.
      //You can skip this part for now. Jump ahead down to where I say 'LOOK HERE'

      var button = document.getElementById("next-page-button");

      var showThisMessage = function (message) {
        var displayArea = document.getElementById("display-area");
        displayArea.innerHTML = message;
      };

      var makeAndShowConcept = function () {
        var randomConcept = getRandomConcept();
        showThisMessage(randomConcept);
      };

      var pickRandom = function (list) {
        return list[Math.floor(Math.random()*list.length)];
      };

      button.addEventListener('click', makeAndShowConcept);

      // ***
      // LOOK HERE
      // ***
      // Hello again! This is the part we are working on.

      var getRandomConcept = function () {
        var people = [];
        people.push("time traveller");
        people.push("school teacher");

        var jobs = [];
        jobs.push("runs a hotel");
        jobs.push("solves mysteries");

        var myConcept = "A " + pickRandom(people) + " who " + pickRandom(jobs);
        return myConcept;
      };
    </script>
  </body>
</html>

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

What is this?

View the page. You'll see a blue page with a button.

Click on 'Next idea'. What happens? Try it lots of times.

Now you have your own copy of the TV show idea generator, and you can make changes to it.

In the code, find line number 44.

For now, we are only looking from line 44 to the end.

Can you see any connection between this code and what happens when you click 'Next idea'?

Part 2: pushing the limits

1. Add two new people ideas to the app.

2. Add two new job ideas to the app.

Clues:

This is the symbol for an empty list: []

This is the command to add something to a list: push

Remember, you only need to make changes from line 44 to the end.

Part 3: Two Characters

I like shows that have two main characters.

Make it so when you click the button, it picks two people from the list.

You should include the words "and a" between the two people.

When it's working it should make ideas like this:

A school teacher and a time traveller who runs a hotel

A school teacher and a school teacher who solves mysteries

Clue:

Look for the word myConcept in 2 lines of code near the end. Take a close look at those two lines, and what happens when you click 'Next idea'.

Part 4: New York City

We need to say what city the show is set in.

It should say in New York or in London at the end of each concept.

1. We will need a list of cities

2. We need to pick a random city, and display it somehow.

Clues:

¯\_(ツ)_/¯

Part 5: Make it pretty

Take a break from the JavaScript and improve the CSS.

Do you remember CSS from our HTML and CSS activity?

Use CSS to style each part of the app – the button, the h1, and the h2.

The CSS is near the top of the file. It probably starts on line 8.

Once your generator is looking cool, you're ready to show some people!

Code Club Auckland

Making cool stuff with code!