Tic-Tac-Toe

The Big Idea

Tic-Tac-Toe is the first time in Foundations you'll build a complete, working program from a blank page. You'll use the JavaScript, HTML, and CSS skills you've been building across Sprints 3 and 4 — and apply them together in one bigger project. The point is not perfection. The point is practising how to break a problem into pieces and solve each piece in code.

⚑ This task can be submitted for assessment You choose either this or JavaScript Carnival for NZQA marking. If you choose this one, it needs to be complete up to and including the checkForWin function — the game must detect a winner and update the subtitle. Stretch features are not required. Your code will be marked on whether it uses variables, functions, loops, and conditionals correctly, and whether it runs without errors. Let your facilitator know which one you're submitting.

Your Roadmap

You should attempt both Tic-Tac-Toe and JavaScript Carnival. The one you submit for assessment must be fully complete.

Choose your approach

You have two ways to tackle this challenge — pick whichever suits you:

• Work independently — follow the README in the repo and figure it out yourself. Use Discord and your facilitator when you get stuck.
• Be guided by your chatbot — use the interactive chatbot guide in the Code along with your chatbot section below. It will walk you through the solution one step at a time without writing the code for you. Reach out to your facilitator or Discord when the chatbot prompts you to, or when you feel like you've been going in circles for a while.

You can switch between the two at any point.

Before you start

This challenge is longer than anything you've done in Foundations so far — similar in length to the JavaScript Cafe in Sprint 3, but with less hand-holding. You'll write snippets that are part of a bigger whole, which means sometimes things won't visibly work in your browser until more pieces are in place.

These strategies will help you get through it:

• Use console.log() throughout to check that values are being passed correctly.
• Watch your browser's developer console for error messages — they tell you exactly where something broke.
• If you've been stuck on the same problem for more than 30 minutes, check in on the Discord Foundations channel. Getting unstuck quickly is a skill in itself.
• Take regular breaks. A five-minute reset — stepping away from the screen, getting a glass of water — gives your brain space to process, and often you'll spot the solution the moment you come back.
• Stick to the timebox. A partially working solution that demonstrates core concepts is more valuable than an incomplete but ambitious one.
• Add, commit, and push your code regularly.

Set up

Step 1: Fork the repo

Go to the tic-tac-toe repo on GitHub and fork it to your own account.

Step 2: Clone your fork

git clone git@github.com:your-name/tic-tac-toe.git

Replace your-name with your GitHub username.

Step 3: Open the project

Navigate into the folder and open it in VS Code:

cd tic-tac-toe
code .

Step 4: Explore the starter files

You'll see three files: an HTML file, a CSS file, and a JavaScript file. Read the HTML and CSS files first — the board is already built using an HTML table with some basic styling applied. The JavaScript is yours to write.

Build it

Follow the instructions in the repo's README. It describes one possible solution — but there are many valid ways to build Tic-Tac-Toe. If you have prior programming experience and want to take your own approach, go for it.

If the task feels easy, use the extra capacity to experiment — try a different approach, or add a feature like a score tracker or reset button.

If the task feels overwhelming, scale back the scope. Focus on getting one small part working (e.g. clicking a square and displaying X or O) before worrying about win detection.

Code along with your chatbot

You can use your chatbot as an interactive guide to build Tic-Tac-Toe step by step. It will walk you through the solution one step at a time — asking questions, giving hints, and checking your code as you go. It will never write the code for you.

Pick the option that matches how you're using AI:

claude

gemini

How to know you've nailed it