Tic Tac Toe

						@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
.code-container {
    max-width: 100%;
    width: 450px;
    padding: 30px 10px;
    box-shadow: 0px 0px 10px #0000003d;
    border-radius: 10px;
}
.tic-tac-toe-box {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 260px;
    height: 260px;
    margin: 0 auto 20px auto;
}
.tic-tac-toe-box input {
    outline: none;
    text-align: center;
    font-size: 55px;
    cursor: pointer;
    border-radius: 0;
    border: 1px solid #000;
}
.text-center{
	text-align:center;
}
.winner-result{
	display:none;
	color: #14936f;
}
.code-container h1 {
    margin: 0 0 20px 0;
}
.play-game-again {
    background: #ff7600;
    border: none;
    color: #fff;
    padding: 5px 20px;
    border-radius: 5px;
    margin: 0 auto;
    display: none;
    cursor: pointer;
}

					

						//Add Boxes
let ticBox = ''
for(let j = 1; j < 10; j++){
	ticBox += '<input type="text" class="tic-box" readonly="" data-value="'+j+'">'
}
document.querySelector(".tic-tac-toe-box").insertAdjacentHTML('afterbegin', ticBox)

//Set first click
let firstClick = 0

//Winning Matches
let winingChances = [
	[1,2,3],
	[4,5,6],
	[7,8,9],
	[1,4,7],
	[2,5,8],
	[3,6,9],
	[1,5,9],
	[3,5,7],
]

//Player 1 Clicked Box
let storeWinOne = new Array()

//Player 2 Clicked Box
let storeWinTwo = new Array()

let clickBox = document.querySelectorAll(".tic-box")
let click = 0

//Disable all box after win
const disableAll = (player) => {
	for(let i = 0;i < clickBox.length; i++){
		clickBox[i].disabled = true
	}
	document.querySelector("#player-win").innerHTML = player
	document.querySelector(".winner-result").style.display = "block"
	document.querySelector(".play-game-again").style.display = "block"
        firstClick = 0
}

//Reset Game
const resetGame = () => {
	for(let i = 0;i < clickBox.length; i++){
		clickBox[i].disabled = false
		clickBox[i].classList.remove("clicked")
		clickBox[i].value = ''
	}
	click = 0
	storeWinOne = []
	storeWinTwo = []
	document.querySelector(".play-game-again").removeAttribute("style")
	document.querySelector(".winner-result").removeAttribute("style")
        firstClick = 0
}

//Play Again
let playAgainBtn = document.querySelector(".play-game-again")
playAgainBtn.addEventListener('click', function(e) {
	resetGame()
});

Array.prototype.forEach.call(clickBox, function(element) {
	element.addEventListener('click', function(e) {
		if(e.target.classList.contains("clicked")) return false
		click++
		firstClick == 0 ? firstClick = 1 : firstClick = 0
		e.target.setAttribute("data", firstClick)
		e.target.classList.add("clicked")
		if(firstClick == 0){
			e.target.value = 'X'
		}else{
			e.target.value = '0'
		}
		if(firstClick == 1 &amp;&amp; e.target.classList.contains("clicked")){
			storeWinOne.push(Number(e.target.getAttribute("data-value")))
		}
		if(firstClick == 0 &amp;&amp; e.target.classList.contains("clicked")){
			storeWinTwo.push(Number(e.target.getAttribute("data-value")))
		}
		for(let i = 0; i < winingChances.length; i++){
			let isFounded_1 = winingChances[i].every(elem => storeWinOne.includes(elem))
			let isFounded_2 = winingChances[i].every(elem => storeWinTwo.includes(elem))
			if(isFounded_1){
				disableAll(1)
				return false
			}
			if(isFounded_2){
				disableAll(2)
				return false
			}
		}
		if(click == 9){
			resetGame()
		}
	});
});