Skip to content

Instantly share code, notes, and snippets.

@sarahzinger

sarahzinger/index.html

Created October 31, 2016 11:06
Show Gist options
  • Save sarahzinger/4c73cb96cb78266f57ca8acfbbe9f3dc to your computer and use it in GitHub Desktop.
Save sarahzinger/4c73cb96cb78266f57ca8acfbbe9f3dc to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=4c73cb96cb78266f57ca8acfbbe9f3dc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Tic Tac Toe</h1>
<h2 id="turn">Turn: X</h2>
<h3 id="winner"></h3>
<div>
<div class="row">
<div id="1" class="box" onclick="select(this)">
</div>
<div id="2" class="box" onclick="select(this)">
</div>
<div id="3" class="box" onclick="select(this)">
</div>
</div>
<div class="row">
<div id="4" class="box" onclick="select(this)">
</div>
<div id="5" class="box" onclick="select(this)">
</div>
<div id="6" class="box" onclick="select(this)">
</div>
</div>
<div class="row">
<div id="7" class="box" onclick="select(this)">
</div>
<div id="8" class="box" onclick="select(this)">
</div>
<div id="9" class="box" onclick="select(this)">
</div>
</div>
</div>
</body>
</html>
Raw
script.js
var whoseTurnIsIt = "X";
var turnsLeft = 9;
var select = function(box) {
var text = box.children[0];
box.textContent = whoseTurnIsIt;
if(whoseTurnIsIt ==="X") {
whoseTurnIsIt = "O";
} else {
whoseTurnIsIt = "X";
}
var h2 = document.querySelector("#turn");
h2.innerHTML = "Turn: " + whoseTurnIsIt;
turnsLeft--;
if(turnsLeft === 0){
console.log("game over!");
var h3 = document.querySelector("#winner");
h3.innerHTML="No more squares!";
}
};
Raw
styles.css
.row div {
display: inline-block;
vertical-align:top;
}
.box {
width: 100px;
height: 80px;
margin: 1px;
background-color: grey;
font-size: 300%;
text-align: center;
padding-top: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment