Get ready to play!
- - -| - | - | - |
| - | - | - |
| - | - | - |
Built 100% using JavaScript
+ + + + \ No newline at end of file diff --git a/test.js b/test.js new file mode 100644 index 0000000..392f50b --- /dev/null +++ b/test.js @@ -0,0 +1,120 @@ + +let a = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; +let p = document.createElement('p') +let wh = "50px" +let xo = 'X' +let av = { 1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '', 8: '', 9: '' } +let h1, h2, h3, v1, v2, v3, d1, d2 + +let createTable = () => { + let tbl = document.createElement('table'); + + let addCell = (tr, v) => { + let td = document.createElement('td'); + td.id = v; + tr.appendChild(td); + }; + + let addRow = (tbl, a) => { + let tr = document.createElement('tr'); + a.forEach(e => { + addCell(tr, e); + }); + tbl.appendChild(tr); + }; + + a.forEach(e => { + addRow(tbl, e); + }); + tbl.border = 1 + tbl.cellPadding = 0 + tbl.cellSpacing = 0 + + document.body.appendChild(tbl); +}; + +createTable(); + +let tbl = document.querySelector('table'); +let td = tbl.getElementsByTagName('td'); + +/* +let styleTable = (td) => { + for (var cell of td) { + cell.style.border = '1px solid black'; + cell.style.width = wh; + cell.style.height = wh; + cell.style.textAlign = 'center'; + cell.style.fontSize = '40px' + }; +}; +*/ + + +//styleTable(td); + +let handleTdClick = (i) => { + let cell = document.getElementById(i); + if (cell.innerHTML == '') { + cell.innerHTML = xo; + av[i] = xo; + xo == 'X' ? xo = 'O' : xo = 'X'; + checkForWinner(); + } +} + +let addClickListener = (arr) => { + for (var cell of arr) { + cell.addEventListener('click', e => { + handleTdClick(e.target.id); + }) + } +} + +let checkForWinner = () => { + h1 = av[1] + av[2] + av[3] + h2 = av[4] + av[5] + av[6] + h3 = av[7] + av[8] + av[9] + v1 = av[1] + av[4] + av[7] + v2 = av[2] + av[5] + av[8] + v3 = av[3] + av[6] + av[9] + d1 = av[1] + av[5] + av[9] + d2 = av[3] + av[5] + av[7] + let hvd = [h1, h2, h3, v1, v2, v3, d1, d2] + + hvd.forEach(e => { + if (e == "XXX" || e == "OOO") { + p.innerHTML = 'Winner Winner Chicken Dinner!!!' + } + }) +} + +addClickListener(td); + +let newGame = () => { + p.innerHTML = ''; + for (let i in av) { + av[i] = '' + } + + for (let i in td) { + td[i].innerHTML = '' + } +} + +let createPandBtn = () => { + p.style.height = '25px' + document.body.appendChild(p) + let btn = document.createElement('button'); + btn.textContent = "Start New Game" + btn.addEventListener('click', newGame); + btn.type = "button"; + btn.name = "button"; + btn.classList.add("btn"); + btn.classList.add("btn-primary"); + btn.classList.add("btn-lg"); + document.body.appendChild(btn); +} + + +createPandBtn() diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..39c7899 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -5,3 +5,5 @@ td{ border: 5px solid black; font-size: 100px; } + +