Create a Magic Eightball for the Web

The Magic Eightball is a fun way to start learning real Web development.

What will the Magic Eightball predict?

What will the Magic Eightball predict?

Watch: The Magic Eightball

The main mission of this guided project is to experience how everything involved in web development fits together and feels as you do it. We don’t delve too deeply into any specific thing.

Concepts and skills are introduced in the order that they might come up during an actual development session familiarizing beginners with a real web development workflow.

As a secondary goal, this project demonstrates how closely tied programming concepts are to math, and how something as simple as a web browser can significantly assist with doing math – including basic algebra.

But First …

Step by Step

Make an eightball directory if you haven’t got one already.

mkdir eightball

Change into the eightball directory from your terminal.

cd eightball

Start VSCode from here.

code -r .

Notice you have a completely blank project.

Open your terminal in VSCode.

Create an index.html file using the touch command.

touch index.html

Open the index.html in a new tab by clicking on it in the sidebar.

Create a basic HTML5 document.

Add something like the following to the body of your index.html file.


1. Add `Enter your question below:` inside `p`.
1. Add a `<input>` element after `p`.
  1. Preview your page with Live Server.
    1. Click on Go Live in the bottom bar.
      1. Install Live Server if needed.
      2. Restart VSCode if needed.
    2. Open your web browser if it doesn’t open.
    3. Notice it is at
      1. You can also use localhost:5500.
    4. Try to type in some text.
    5. Notice nothing happens — yet.
  2. Open the Developer Tools in Chrome.
    1. Many ways to do this.
    2. Right click and select Inspect Element.
    3. Customize if you like:
      1. Click on triple dot.
      2. Select Settings.
      3. Find Dark Mode and select.
  3. Get familiar with Chrome Developer Tools.
    1. The #1 web development tool in the world.
    2. Get familiar with the Elements tab.
      1. What is CSS?
      2. Change the color of the background.
        1. Click on the <body> tag.
        2. Notice how hovering highlights.
        3. Click on the + to add New Style Rule.
        4. Click on the new body rule.
        5. Type background: whatever color.
        6. Notice DevTools helps you out.
        7. Notice colors instantly change.
        8. Click the color to get color selector.
        9. Find a color you like.
        10. Notice some colors have names others numbers.
    3. Get familiar with the Chrome DevTools console.

Return to your VSCode editor.

Add some JavaScript using the script element just before the ending </body> tag.

This practice of putting at the end originated because JavaScript used to stop your page from loading before it finished and could lag your page.

  console.log('Hello world')

Now check your Chrome DevTools console to test if it worked.

So that’s the first way to include JavaScript in your HTML page.

These days scripts are usually kept in their own files (see Separation of Concerns) so let’s do that.

Create a file called main.js.

Cut and paste the code from between your <script></script> tags into your main.js file.

You should now have an empty script element.


Go ahead and put both the tags on the same line.


Now we need to add the src attribute.

<script src='main.js'></script>

[Read more about HTML Attributes.]

Let’s do a regression test making sure everything still works.

Let’s so something more valuable with our JavaScript. First let’s think about what we want out app / game to do.

How can we make that more specific? What specific action are we looking for to trigger the code we want to run?

Let’s do the last one. But first let’s play with JavaScript events.

First we need to get some way to refer to the things on the page, the elements of the Document Object Mode (DOM) as it’s called.