Skip to content

start here #12

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
destinyfsetzer wants to merge 5 commits into
base: master
Choose a base branch
from
Open

start here #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef48e4c
start here
destinyfsetzer Jul 16, 2020
06f7f82
5/6
destinyfsetzer Jul 16, 2020
b14f066
tic tac fml
destinyfsetzer Jul 16, 2020
310f0df
added markers to board
destinyfsetzer Jul 17, 2020
82b285e
made it look better
destinyfsetzer Jul 18, 2020
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
57 changes: 45 additions & 12 deletions dom-tictactoe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ const addMarker = (id) => {
console.log(`We'll place a mark on square: ${id}`)
// @TODO, Mix & Match.
// You will need the following pieces:

document.getElementById(id).innerHTML = currentMarker
// = currentMarker
// .getElementById(id)
// document
// .innerHTML

// Arrange the above pieces into one a single line of code
// to add an X or O to the board to the DOM so it can be scene on the screen.
}
Expand All @@ -45,11 +45,12 @@ const updateBoard = (id) => {
// parses the id string into a number then captures the first and last part the newly create number as row & column
const row = parseInt(id.charAt(0))
const column = parseInt(id.charAt(2))

console.log(`you clicked the sq at ${row} and ${column}`)
console.log(board)

// @TODO, Your code here: use the above information to change the board variable(array of arrays)
board[row][column] = currentMarker

// HINT: in your browser open up the dev tools -> console
}

Expand All @@ -61,20 +62,46 @@ const checkForWin = () => {
} else {
// if no win, change the marker from X to O, or O to X for the next player.
changeMarker()
}
}
}

const horizontalWin = () => {
// @TODO, Your code here: to check for horizontal wins
}

const verticalWin = () => {
// @TODO, Your code here: to check for vertical wins
// Your code here to check for horizontal wins
if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) {
return true
} else if((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
return true
} else if((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
}

const diagonalWin = () => {
// @TODO, Your code here: to check for diagonal wins
}
const verticalWin = () => {
// Your code here to check for vertical wins

if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) {
return true
} else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
return true
} else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
}

const diagonalWin = () => {
// Your code here to check for diagonal wins
if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) {
return true
} else if((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
}

const changeMarker = () => {
// ternary operator: if it's an X make it an O, if O make it an X
Expand All @@ -95,6 +122,12 @@ const resetBoard = () => {
}

// @TODO, Your code here: make sure to reset the array of arrays to empty for a new game
board = [
["", "", ""],
["", "", ""],
["", "", ""]
]

}

// **BONUSES**
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
<!--bootstrap & style links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="tictactoe.css">
<!-- link to JavaScript code -->
<script src="dom-tictactoe.js"></script>

</head>
<body>
<div class="container">
Expand Down Expand Up @@ -38,5 +37,7 @@ <h1>Welcome to Tic Tac Toe</h1>
</tr>
</table>
</div>
<!-- link to JavaScript code -->
<script src="dom-tictactoe.js"></script>
</body>
</html>
71 changes: 67 additions & 4 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const rl = readline.createInterface({
output: process.stdout
});

//START HERE//

// creates and empty "board" for the user to see where marks can be placed.
// using let because the variable is expected to change with more 'X's and 'O's to add
let board = [
Expand All @@ -22,6 +24,7 @@ let board = [
// using let because the variable is expected to change from 'X' to 'O' and back
let playerTurn = 'X';


// is a function that print the current status of the board using the variable - board
const printBoard = () => {
console.log(' 0 1 2');
Expand All @@ -34,25 +37,85 @@ const printBoard = () => {

const horizontalWin = () => {
// Your code here to check for horizontal wins
if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) {
return true
} else if((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
return true
} else if((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
// it('should check for horizontal wins', () => {
// board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ];
// assert.equal(horizontalWin(), true);
// });
}

const verticalWin = () => {
// Your code here to check for vertical wins

if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) {
return true
} else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
return true
} else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
// it('should check for vertical wins', () => {
// board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ];
// assert.equal(verticalWin(), true);
// });
}

const diagonalWin = () => {
// Your code here to check for diagonal wins
}

const checkForWin = () => {
// Your code here call each of the check for types of wins
if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) {
return true
} else if((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) {
return true
} else {
return false
}
// it('should check for diagonal wins', () => {
// board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ];
// assert.equal(diagonalWin(), true);
// });
}

const ticTacToe = (row, column) => {
// Your code here to place a marker on the board
// then check for a win
board[row][column] = playerTurn

checkForWin()

}

const changeMarker = () => {
if(playerTurn === "X"){
playerTurn = "O"
} else {
playerTurn = "X"
}
}

const checkForWin = () => {
// Your code here call each of the check for types of wins
if(horizontalWin() || verticalWin() || diagonalWin()) {
console.log(`Player ${playerTurn} won!`)
return true
} else {
changeMarker()
}
}

// it('should detect a win', () => {
// assert.equal(checkForWin(), true);
// });

const getPrompt = () => {
printBoard();
console.log("It's Player " + playerTurn + "'s turn.");
Expand Down