Create a Simple Oracle Game for the Web

The Oracle game is a fun way to start learning real web development.

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.

Typing more than 30 words per minute is preferred.

But First …

Step by Step

Change into the oracle directory.

Start VSCode from here

code -r .

Notice you have a completely blank project.

Open your terminal.

Create an index.html file using the touch command.

  1. Open the index.html in a new tab.

  2. Create a minimal starting HTML document.
    1. Add a <!doctype html> element.
    2. Add an <html></html> element.
    3. Add a <head></head> element inside html.
    4. Add a <title></title> element inside head.
    5. Add Oracle text inside title.
    6. Add a <body></body> element after head.
    7. Add a <h1></h1> element inside body.
    8. Add Oracle text inside h1.
    9. Add a <p></p> element after h1.
    10. Add Enter your question below: inside p.
    11. Add a <input> element after p.
  3. 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 127.0.0.1:5500.
      1. You can also use localhost:5500.
    4. Try to type in some text.
    5. Notice nothing happens — yet.
  4. 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.
  5. 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.

...
<input>
<script>
  console.log('Hello world')
</script>
</body>
...

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.

...
<input>
<script>
</script>
</body>
...

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

...
<input>
<script></script>
</body>
...

Now we need to add the src attribute.

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

[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.

TODO