Girl Code

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?

We assume you've already made a Neocities account and tried some HTML and CSS.

Part 1: Set up Neocities

Click 'Edit Site'

Make a new file:

Call it tvshow.html

Open a tab to edit the new page.

Open a tab to view the new page.

Delete all the code it gives you, we don't want it.

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 class="display-area">Click the button!</h2>
<button class="button1">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'

let button = document.querySelector(".button1")
let displayElement = document.querySelector(".display-area")

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

button.addEventListener('click', makeAndDisplayIdea)

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

function makeAndDisplayIdea() {
  let people = []
  people.push("time traveller")
  people.push("school teacher")

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

  let myIdea = "How about: A " + pickRandom(people) + " who " + pickRandom(jobs)
  displayElement.innerHTML = myIdea
}
</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 35.

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

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

Part 2: pushing the limits

Right now, there are only two options for people the app can choose from.

Add two more people to the list of people.

Clues:

The push command adds something to a list.

Find a line of code that uses push to add people to the list of people.

Make a copy of the line and edit it to add new person to the list.

Test your change. Does it work? (Remember to save the code, and refresh the page.)

Once it's working, add two more jobs to the list of jobs.

Now your TV show generator can make lots of different TV ideas!

Part 3: Two Characters

I like shows that have two main characters.

Let's make the app choose two main characters instead of just one.

Look for the line that starts with let myIdea =. This is the only line you need to change!

This line sticks text together using the + symbol. Compare this line of code to what appears on the page when you click the button. Can you work out what each piece of code does?

Make the line pick another random person from the 'people' list.

You will need to include the words "and a" between the two random picks. Look closely at the code that's already there. Also look at the colour of the code - what do the colours mean?

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

A school teacher and a time traveller who run a hotel

A school teacher and a school teacher who solve mysteries

(I also had to update the jobs to fix the grammar. "runs a hotel" becomes "run a hotel", etc.)

What if it stopped working!?

During these activities, you may find that your code suddenly stops working. Just one mistake can make the whole page stop responding to your actions!

The good news is that we can use the Developer tools to help find the problem.

When viewing your page, open the Developer tools. If you're using Google Chrome, click on the options menu, then 'More Tools' then 'Developer Tools'.

(If you are not using Google Chrome, you probably have similar tools. Look around in the menus.)

Inside the Developer tools, look for a tab called Console near the top and click on it.

Now refresh the page. The console will show you if there are errors, and the line number where they happen. This error is on line number 61.

Hopefully that helps. The most common error here is that you are missing a + symbol between two things that need a plus to join them.

Other common mistakes are missing brackets - for every { there must be a matching } and for every ( there is a matching ).

Part 4: New York City

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

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

1. We will need a list of cities

2. We need to pick a random city, and add it to the final idea.

Clues:

¯\_(ツ)_/¯

Part 5: Emphasis on Adventure

Make the characters and the city appear italic. It should look like this in your web browser:

A school teacher and a cat who solve mysteries in London

If you right click and 'Inspect' the HTML code, it should look like this:

A <i>school teacher</i> and a <i>cat</i> who solves mysteries in <i>London</i>

In your JavaScript code, you need to add the <i> and </i> tags.

You need to put these tags inside speech marks. Speech marks tell JavaScript that you are writing the actual text you want it to put into the HTML page - not JavaScript instructions that it should think about and do.

For example, when our code says pickRandom, we don't put it in speech marks. We don't our webpage to say "pickRandom"! We want javaScript to pick a random thing. But for the <i> tags, we want them to go straight into the web page as they are.

Look at these examples. We've only included the start of the line.


  //Good example
  let myIdea = "How about: A " + "<i>" + pickRandom(people) + "</i>" + " who "

  //Bad example:
  let myIdea = "How about: A " + <i> + pickRandom(people) + </i> + " who "

Finished!

Once you have added italics to the people and city, it's time to move on to the Five Star activity.