Skip to content

tictactoe zack #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zacktjc wants to merge 1 commit into
base: master
Choose a base branch
from
Open

tictactoe zack #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tic tac toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id= 'container'>
<h1 id="title">tic tac toe</h1>
<div id="board">
<div class="game-row">
<span class="game-square" id = 'sq1'></span><span class="game-square" id = 'sq2'></span><span class="game-square" id = 'sq3'></span>
</div>
<div class="game-row">
<span class="game-square" id = 'sq4'></span><span class="game-square" id = 'sq5'></span><span class="game-square" id = 'sq6'></span>
</div>
<div class="game-row">
<span class="game-square" id = 'sq7'></span><span class="game-square" id = 'sq8'></span><span class="game-square" id = 'sq9'></span>
</div>
</div>
<button type="button" id = 'button'>restart!</button>
<script src="script.js"></script>
</div>
</body>
</html>
169 changes: 169 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
// row 1
var sq1 = document.querySelector('sq1');
var sq2 = document.querySelector('sq2');
var sq3 = document.querySelector('sq3');
// row 2
var sq4 = document.querySelector('sq4');
var sq5 = document.querySelector('sq5');
var sq6 = document.querySelector('sq6');
// row 3
var sq7 = document.querySelector('sq7');
var sq8 = document.querySelector('sq8');
var sq9 = document.querySelector('sq9');

var currentShape;
var clickCycle = 0;


var clickSquare1 = document.getElementById('sq1');
clickSquare1.addEventListener('click',function(event){
console.log('Click 2 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare1.innerText = currentShape;
})

var clickSquare2 = document.getElementById('sq2');
clickSquare2.addEventListener('click',function(event){
console.log('Click 2 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare2.innerText = currentShape;
})
var clickSquare3 = document.getElementById('sq3');
clickSquare3.addEventListener('click',function(event){
console.log('Click 3 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare3.innerText = currentShape;
})
var clickSquare4 = document.getElementById('sq4');
clickSquare4.addEventListener('click',function(event){
console.log('Click 4 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare4.innerText = currentShape;
})
var clickSquare5 = document.getElementById('sq5');
clickSquare5.addEventListener('click',function(event){
console.log('Click 5 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare5.innerText = currentShape;
})
var clickSquare6 = document.getElementById('sq6');
clickSquare6.addEventListener('click',function(event){
console.log('Click 6 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare6.innerText = currentShape;
})
var clickSquare7 = document.getElementById('sq7');
clickSquare7.addEventListener('click',function(event){
console.log('Click 7 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare7.innerText = currentShape;
})
var clickSquare8 = document.getElementById('sq8');
clickSquare8.addEventListener('click',function(event){
console.log('Click 8 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare8.innerText = currentShape;
})
var clickSquare9 = document.getElementById('sq9');
clickSquare9.addEventListener('click',function(event){
console.log('Click 9 worked');
switch(clickCycle) {
case 0 :
clickCycle = 1;
currentShape = "X";
break;
case 1 :
clickCycle = 0;
currentShape = "O";
break;
}
clickSquare9.innerText = currentShape;
})

var restart = function(){
clickSquare1.innerText = "";
clickSquare2.innerText = "";
clickSquare3.innerText = "";
clickSquare4.innerText = "";
clickSquare5.innerText = "";
clickSquare6.innerText = "";
clickSquare7.innerText = "";
clickSquare8.innerText = "";
clickSquare9.innerText = "";
clickCycle = 0;
}

var restartButton = document.querySelector('#button');
restartButton.addEventListener('click', restart);
12 changes: 12 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
#container {
max-width: 300px;
margin: auto;
}

.game-square {
display: inline-block;
width: 50px;
height: 50px;
background-color: orange;
margin: 1px;
}
3 changes: 3 additions & 0 deletions tictactoe.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"folders": []
}