Commit 0bd84373 authored by Arian Stolwijk's avatar Arian Stolwijk
Browse files

Initial setup

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:
"version": "0.2.0",
"configurations": [
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "file://${file}",
"webRoot": "${workspaceFolder}"
\ No newline at end of file
# Tic Tac Toe
This is a little assignment where you implement the tic tac toe game. At
symbaloo everything evolves around tiles, just like the tiles in tic tac toe!
## Goal
The goal is that you create a little bit of code so we can talk about it. It
doesn't have to be perfect, don't spend too much time!
## Setup
There are three files:
- `tictactoe.html`: The HTML file with the HTML structure
- `tictactoe.js`: The interactive JavaScript part
- `tictactoe.css`: Some styling to layout the HTML elements and add some color
Each file has a little bit of code so you have somethign to start with. Your job
is to implement the rest :)
body {
background: #c2cad0;
color: #7e685a;
font-family: Arial, Helvetica, sans-serif;
margin: 30px;
body.winner {
background: url("");
#message {
font-size: 20px;
text-align: center;
padding: 50px;
#grid {
padding: 30px;
border: 3px solid #afd275;
background: #afd275;
margin-bottom: 20px;
button {
background: #e7717d;
border: 1px solid #c2b9b0;
border-radius: 10px;
padding: 10px;
button.hidden {
display: none;
<!DOCTYPE html>
<link href="tictactoe.css" rel="stylesheet" />
<title>Tic Tac Toe</title>
<div id="message">Press start</div>
<div id="grid">
Build some HTML to render a 3x3 grid
<button id="start-game">Start Game</button>
<script src="tictactoe.js"></script>
let currentPlayer = "X";
const messageElement = document.getElementById("message");
const startButton = document.getElementById("start-game");
startButton.addEventListener("click", startGame);
* Function that initiates the game
function startGame() {
messageElement.innerHTML = `Player '${currentPlayer}' can click a tile`;
// assign event listeners to the grid (tiles)
* Event handler (that still should be assigned to the elements) to handle when
* the user clicks an tile in the grid
function clickTile() {
// change the elements in the HTML
// detect if X or O has won
// if not, change `currentPlayer`
* Call this function if one of the players has won
function winner(player) {
if (player == "X") {
messageElement.innerHTML = "Well done X!!";
} else if (player == "O") {
messageElement.innerHTML = "Great job O!!";
function reset() {
// optional feature if you have time
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment