Tic Tac Toe

├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tic Tac Toe 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |

25 | 26 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Raleway", sans-serif; 6 | } 7 | body { 8 | height: 100vh; 9 | background: linear-gradient(135deg, #000000, #000000); 10 | } 11 | html { 12 | font-size: 16px; 13 | } 14 | .wrapper { 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | } 20 | .container { 21 | width: 70vmin; 22 | height: 70vmin; 23 | display: flex; 24 | flex-wrap: wrap; 25 | gap: 2vmin; 26 | } 27 | .button-option { 28 | background: #ffffff; 29 | height: 22vmin; 30 | width: 22vmin; 31 | border: none; 32 | border-radius: 8px; 33 | font-size: 12vmin; 34 | color: #000000; 35 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); 36 | } 37 | #restart { 38 | font-size: 1.3em; 39 | padding: 1em; 40 | border-radius: 8px; 41 | background-color: #0ab5a6; 42 | color: #ffffff; 43 | border: none; 44 | position: relative; 45 | margin: 1.5em auto 0 auto; 46 | display: block; 47 | } 48 | .popup { 49 | background: linear-gradient(135deg, #000000, #000000); 50 | height: 100%; 51 | width: 100%; 52 | position: absolute; 53 | display: flex; 54 | z-index: 2; 55 | align-items: center; 56 | justify-content: center; 57 | flex-direction: column; 58 | gap: 1em; 59 | font-size: 12vmin; 60 | } 61 | #new-game { 62 | font-size: 0.6em; 63 | padding: 0.5em 1em; 64 | background-color: #0ab5a6; 65 | color: #ffffff; 66 | border-radius: 0.2em; 67 | border: none; 68 | } 69 | #message { 70 | color: #ffffff; 71 | text-align: center; 72 | font-size: 1em; 73 | } 74 | .popup.hide { 75 | display: none; 76 | } 77 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let btnRef = document.querySelectorAll(".button-option"); 2 | let popupRef = document.querySelector(".popup"); 3 | let newgameBtn = document.getElementById("new-game"); 4 | let restartBtn = document.getElementById("restart"); 5 | let msgRef = document.getElementById("message"); 6 | //Winning Pattern Array 7 | let winningPattern = [ 8 | [0, 1, 2], 9 | [0, 3, 6], 10 | [2, 5, 8], 11 | [6, 7, 8], 12 | [3, 4, 5], 13 | [1, 4, 7], 14 | [0, 4, 8], 15 | [2, 4, 6], 16 | ]; 17 | //Player 'X' plays first 18 | let xTurn = true; 19 | let count = 0; 20 | 21 | //Disable All Buttons 22 | const disableButtons = () => { 23 | btnRef.forEach((element) => (element.disabled = true)); 24 | //enable popup 25 | popupRef.classList.remove("hide"); 26 | }; 27 | 28 | //Enable all buttons (For New Game and Restart) 29 | const enableButtons = () => { 30 | btnRef.forEach((element) => { 31 | element.innerText = ""; 32 | element.disabled = false; 33 | }); 34 | //disable popup 35 | popupRef.classList.add("hide"); 36 | }; 37 | 38 | //This function is executed when a player wins 39 | const winFunction = (letter) => { 40 | disableButtons(); 41 | if (letter == "X") { 42 | msgRef.innerHTML = "🎉
'X' Wins"; 43 | } else { 44 | msgRef.innerHTML = "🎉
'O' Wins"; 45 | } 46 | }; 47 | 48 | //Function for draw 49 | const drawFunction = () => { 50 | disableButtons(); 51 | msgRef.innerHTML = "😎
It's a Draw"; 52 | }; 53 | 54 | //New Game 55 | newgameBtn.addEventListener("click", () => { 56 | count = 0; 57 | enableButtons(); 58 | }); 59 | restartBtn.addEventListener("click", () => { 60 | count = 0; 61 | enableButtons(); 62 | }); 63 | 64 | //Win Logic 65 | const winChecker = () => { 66 | //Loop through all win patterns 67 | for (let i of winningPattern) { 68 | let [element1, element2, element3] = [ 69 | btnRef[i[0]].innerText, 70 | btnRef[i[1]].innerText, 71 | btnRef[i[2]].innerText, 72 | ]; 73 | //Check if elements are filled 74 | //If 3 empty elements are same and would give win as would 75 | if (element1 != "" && (element2 != "") & (element3 != "")) { 76 | if (element1 == element2 && element2 == element3) { 77 | //If all 3 buttons have same values then pass the value to winFunction 78 | winFunction(element1); 79 | } 80 | } 81 | } 82 | }; 83 | 84 | //Display X/O on click 85 | btnRef.forEach((element) => { 86 | element.addEventListener("click", () => { 87 | if (xTurn) { 88 | xTurn = false; 89 | //Display X 90 | element.innerText = "X"; 91 | element.disabled = true; 92 | } else { 93 | xTurn = true; 94 | //Display Y 95 | element.innerText = "O"; 96 | element.disabled = true; 97 | } 98 | //Increment count on each click 99 | count += 1; 100 | if (count == 9) { 101 | drawFunction(); 102 | } 103 | //Check for win on every click 104 | winChecker(); 105 | }); 106 | }); 107 | //Enable Buttons and disable popup on page load 108 | window.onload = enableButtons; 109 | --------------------------------------------------------------------------------