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 — FND04 JavaScript Programs 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. You will submit a link to your branch via the Assessment Tracker (AT) — see Submit via AT below.

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: Clone the repo

Go to your cohort's repo: tic-tac-toe — select your cohort in the top-right corner of this page to see the link. On the repo page, click the green Code button and copy the SSH URL.

Clone it to your machine and navigate into it:

git clone <paste the SSH URL you copied>
cd tic-tac-toe

Step 2: Create your branch

Use your full name in lowercase with a hyphen:

git checkout -b your-branch-name

Step 3: Open the project

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

Submit via AT

Once your game detects a winner and updates the subtitle, push your branch:

git add -A
git commit -m "Complete tic-tac-toe"
git push origin your-branch-name

Go to your branch on GitHub and copy its URL — it will look like https://github.com/YOUR-COHORT/tic-tac-toe/tree/your-branch-name.

Submit FND04 — JavaScript Programs in the Assessment Tracker (AT) with a link to your branch. Only submit one of Tic-Tac-Toe or JavaScript Carnival — whichever one you completed fully.

How to know you've nailed it