master-stm/TicTacToe.html

## TicTacToe.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #eee;
        }

        .play-area {
            display: grid;
            width: 300px;
            height: 300px;
            grid-template-columns: auto auto auto;
        }

        .block {
            display: flex;
            width: 100px;
            height: 100px;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: bold;
            border: 3px solid black;
            transition: background 0.2s ease-in-out;
        }

        .block:hover {
            cursor: pointer;
            background: #EEFFEE;
        }

        #block_0,
        #block_1,
        #block_2 {
            border-top: none;
        }

        #block_0,
        #block_3,
        #block_6 {
            border-left: none;
        }

        #block_6,
        #block_7,
        #block_8 {
            border-bottom: none;
        }

        #block_2,
        #block_5,
        #block_8 {
            border-right: none;
        }

        h1 {
            padding: 20px 0;
        }

        h2 {
            margin-bottom: .5em;
        }

        h3 {
            margin-bottom: .7em;
        }

        button {
            font-size: 1.2em;
            font-weight: 500;
            margin-right: .5em;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #F03A17;
            border-bottom: 2px solid black;
            border-right: 2px solid black;
        }

        button:hover {
            border-bottom: none;
            border-right: none;
            border-top: 2px solid black;
            border-left: 2px solid black;
        }

        h2,
        h4,
        button {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        #results {
            display: none;
            margin-top: 2em;

        }
    </style>
    <title>Tic Tac Toe</title>
</head>

<body>

    <div class="container">
        <h1>Tic-Tac-Toe</h1>
        <div class="play-area">
            <div id="block_0" class="block"></div>
            <div id="block_1" class="block"></div>
            <div id="block_2" class="block"></div>
            <div id="block_3" class="block"></div>
            <div id="block_4" class="block"></div>
            <div id="block_5" class="block"></div>
            <div id="block_6" class="block"></div>
            <div id="block_7" class="block"></div>
            <div id="block_8" class="block"></div>
        </div>
        <div id="results">
            <h2>Ready Player One</h2>
            <h3>Play Again?</h3>
            <button onclick="clearFields()">Play</button>
            <button onclick="window.close()">No</button>
        </div>
    </div>

    <script>

        let tdList = document.querySelectorAll('.block')
        let playerTurn = true

        let clearFields = () => {
            document.location.reload()
            document.querySelector('#results').style.display = "none";

        }

        let checkWinner = (mark) => {
            if ((tdList[0].innerText === mark && tdList[1].innerText === mark && tdList[2].innerText === mark)
                || (tdList[3].innerText === mark && tdList[4].innerText === mark && tdList[5].innerText === mark)
                || (tdList[6].innerText === mark && tdList[7].innerText === mark && tdList[8].innerText === mark)
                || (tdList[2].innerText === mark && tdList[4].innerText === mark && tdList[6].innerText === mark)
                || (tdList[0].innerText === mark && tdList[4].innerText === mark && tdList[8].innerText === mark)
                || (tdList[0].innerText === mark && tdList[3].innerText === mark && tdList[6].innerText === mark)
                || (tdList[2].innerText === mark && tdList[5].innerText === mark && tdList[8].innerText === mark)
                || (tdList[1].innerText === mark && tdList[4].innerText === mark && tdList[7].innerText === mark)
            ) {
                document.querySelector('#results h2').innerText = `Player with ${mark} won!`
                document.querySelector('#results').style.display = "block";
            }
        }

        let draw = () => {
            document.querySelector('#results h2').innerText = `It's a Draw!`
            document.querySelector('#results').style.display = "block";
        }

        let sum = 0
        tdList.forEach((td, i) => {
            td.addEventListener('click', () => {
                let mark = ''
                playerTurn ? mark = '🙂' : mark = "🙃"
                td.innerText = mark
                playerTurn = !playerTurn
                sum++
                sum < tdList.length ? checkWinner(mark) : draw()
            }, { once: true })
        })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	}

	.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #eee;
	}

	.play-area {
	display: grid;
	width: 300px;
	height: 300px;
	grid-template-columns: auto auto auto;
	}

	.block {
	display: flex;
	width: 100px;
	height: 100px;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: bold;
	border: 3px solid black;
	transition: background 0.2s ease-in-out;
	}

	.block:hover {
	cursor: pointer;
	background: #EEFFEE;
	}

	#block_0,
	#block_1,
	#block_2 {
	border-top: none;
	}

	#block_0,
	#block_3,
	#block_6 {
	border-left: none;
	}

	#block_6,
	#block_7,
	#block_8 {
	border-bottom: none;
	}

	#block_2,
	#block_5,
	#block_8 {
	border-right: none;
	}

	h1 {
	padding: 20px 0;
	}

	h2 {
	margin-bottom: .5em;
	}

	h3 {
	margin-bottom: .7em;
	}

	button {
	font-size: 1.2em;
	font-weight: 500;
	margin-right: .5em;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #F03A17;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	}

	button:hover {
	border-bottom: none;
	border-right: none;
	border-top: 2px solid black;
	border-left: 2px solid black;
	}

	h2,
	h4,
	button {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}

	#results {
	display: none;
	margin-top: 2em;

	}
	</style>
	<title>Tic Tac Toe</title>
	</head>

	<body>

	<div class="container">
	<h1>Tic-Tac-Toe</h1>
	<div class="play-area">
	<div id="block_0" class="block"></div>
	<div id="block_1" class="block"></div>
	<div id="block_2" class="block"></div>
	<div id="block_3" class="block"></div>
	<div id="block_4" class="block"></div>
	<div id="block_5" class="block"></div>
	<div id="block_6" class="block"></div>
	<div id="block_7" class="block"></div>
	<div id="block_8" class="block"></div>
	</div>
	<div id="results">
	<h2>Ready Player One</h2>
	<h3>Play Again?</h3>
	<button onclick="clearFields()">Play</button>
	<button onclick="window.close()">No</button>
	</div>
	</div>

	<script>

	let tdList = document.querySelectorAll('.block')
	let playerTurn = true

	let clearFields = () => {
	document.location.reload()
	document.querySelector('#results').style.display = "none";

	}

	let checkWinner = (mark) => {
	if ((tdList[0].innerText === mark && tdList[1].innerText === mark && tdList[2].innerText === mark)
	\|\| (tdList[3].innerText === mark && tdList[4].innerText === mark && tdList[5].innerText === mark)
	\|\| (tdList[6].innerText === mark && tdList[7].innerText === mark && tdList[8].innerText === mark)
	\|\| (tdList[2].innerText === mark && tdList[4].innerText === mark && tdList[6].innerText === mark)
	\|\| (tdList[0].innerText === mark && tdList[4].innerText === mark && tdList[8].innerText === mark)
	\|\| (tdList[0].innerText === mark && tdList[3].innerText === mark && tdList[6].innerText === mark)
	\|\| (tdList[2].innerText === mark && tdList[5].innerText === mark && tdList[8].innerText === mark)
	\|\| (tdList[1].innerText === mark && tdList[4].innerText === mark && tdList[7].innerText === mark)
	) {
	document.querySelector('#results h2').innerText = `Player with ${mark} won!`
	document.querySelector('#results').style.display = "block";
	}
	}

	let draw = () => {
	document.querySelector('#results h2').innerText = `It's a Draw!`
	document.querySelector('#results').style.display = "block";
	}

	let sum = 0
	tdList.forEach((td, i) => {
	td.addEventListener('click', () => {
	let mark = ''
	playerTurn ? mark = '🙂' : mark = "🙃"
	td.innerText = mark
	playerTurn = !playerTurn
	sum++
	sum < tdList.length ? checkWinner(mark) : draw()
	}, { once: true })
	})
	</script>
	</body>

	</html>
No results found