Open weejh opened 8 years ago
:+1: Nicely done! :star:
Split the long event listener function into multiple functions that deal with just one element.
document.querySelector('.button1')
.addEventListener('click', event => {
var button = event.target
// ... button click code
reSet()
document.querySelector('.status').textContent = 'It is X\'s turn'
currentPlayer = 'one'
})
Array.from(document.querySelectorAll('.tile')).forEach(tile =>
tile.addEventListener('click', () => {
if (tile.textContent) return
// ... tile click code
// ...
})
Use classes to group a bunch of CSS declarations into a single statement.
.tile {
color: black;
font-size: 160;
}
.tile.one { background-color: red; }
.tile.two { background-color: purple; }
var playerSymbol = currentPlayer === 'one' ? 'x' : 'o'
tile.classList.add(currentPlayer)
currentPlayer = currentPlayer === 'one' ? 'two' : 'one'
document.querySelector('.status').textContent = 'It is ' +
playerSymbol.toUpperCase() +
'\'s turn'
A lot of code looks repeated identically except for a few values. See other TTT code reviews for how to solve that.
Thanks for your review.
@cbas, @sevresbabylone