Forem: Harsh Kumar

TCS CodeVita Experience

Harsh Kumar — Wed, 03 Dec 2025 07:55:07 +0000

Mujhe apni TCS CodeVita Contest ki performance ko dekhkar bahut khushi ho rahi hai aur haan abhi bhi improvements kiye hi ja sakte hain aur in fact har baar kiye ja sakte hain shayad yahi Science Community ko hamesha evolve karne ki prerna deti hai ki abhi jo paa liya bahut sahi ab aage aur achcha kya kar sakte hain aur phir usse bhi achcha aur is sab ko measure karna apni aur world ki past performance se yaani ki right progress with rights tools and right kind of tracking.

To start karte hain is achievement tak aa pane ki kahani se. Pahle main bahut pareshan tha jabse ye taabeez maine pahni hai meri zindagi badal gayi Sorry Sorry Sorry main majaak kar raha tha ye kahani vaisi kahaniyon ki tarah nahin hai bas thoda mahaul ko light karne ke liye anyways pahle main apna motive clear kar doon ki main ye post kyon likh raha hoon phir aage ki baat karte hain. Main is post se ye nahin batana chahta ki dekho maine sab kuchh haasil kar liya hai aur haan ye bhi nahin ki maine kuchh bhi haasil nahin kiya hai ye bas meri ek koshish hai ki main is post ko padh rahe un logon ko kah sakoon ki jo bhi flashy aap log dekhte hain vo easily nahin milta hai aur uske peechhe kaafi hard work, smart work in the right direction, pain aur bhi na jaane kya kya hota hai par iska matlab ye bilkul nahin hai ki koi ise paa nahin sakta in fact mujhse achcha perform karne wale kayi log is contest mein the and i appreciate them ki unhone iske liye kaafi jaan lagayi hogi so Cheers & Congrats to those awesome Problem Solvers aur un sabki hi tarah ham sab bhi apne aap ko improve kar sakte hain aur nahin nahin main bilkul bhi Motivational Speaker nahin banna chah raha hoon ye kaam already kaafi log shayad bahut achche se kar rahe hain.

To shayad sabki hi tarah mujhe bhi jab maine DSA (Data Structures & Algorithms) ko padhna start kiya tha to sab kuchh ekdam alag hi duniya se aaya hua lagta tha aur almost vahi feeling ki kya hi hone wala hai bhai in questions ko solve karke type feeling aati thi but kyonki ye course curriculum mein tha aur not to mention ki Placements mein iska kaafi important role rahta hi hai shayad ab tak to hai jab main ye post likh raha hoon isliye main bhi aa gaya is coding ke maidaan mein ki dekhen to aisi kaun si cheej hai jo bachchon ko dara rahi hai hamen sher ko darakar dikhaye to phir mujhe bhi daraya hi DSA Dada ne par jaise jaise isko aur padhna start kiya to almost after 1 month basics of C++ aur Array ke Questions lagne laga ki yaar kya sahi cheej hai ye ekdam Math ki tarah jaise Math hamen Problem Solving Abilities ko enhance karne mein help karti hai same pattern yahan bhi follow ho raha hai aur yahi to ham Engineers ka kaam hai ki Available Resource & Constraints mein jo bhi Best Possible Solution hai usko implement karo phir jab is mindset se cheejon ko seekhna chalu kiya to cheejen doable lagni lagin par tabhi End Semester Exams Aakar kahte hain hamen bhool gaye kya and the DSA Dada settled into background After all End Semester Exams apni importance hold karte hi hain aur phir lagbhag 1-1.5 mahine ke baad phir se DSA padhna start kiya aur ye journey chalti rahi cheejen aati rahin aur Schedule ki aur DSA Seekhne ki pace ki band bajati rahin obviously saare events sunne ka aapke paas time nahin hoga to short mein bas itna hi ki mujhe shayad 1 saal lag gaya Apni DSA Skills ko Good Enough banane mein par koi bhi cheej seekhne mein time lagta hi hai aur jaroori nahin ki har baar aapke plans ke according hi aap padhen yaa kuchh bhi karen aur is baat ke chances rahenge hi ki kuchh na kuchh aapko thoda out of track le hi jayega par hamesha yaad rakhna ki Something is better than nothing to keep doing your stuff and improve karte raho chahe jo bhi ho apne aap ko vaapis track par late rahna hi hai jo sabse important hai be that koi bhi kaam chahe vo koi skill ko master karna ho yaa kisi particular project ko complete karna yaa kuchh bhi aur Always & Always khud ko improve karte raho Aur main ye clear kardoon ki main Competitive Coders mein Top par nahin hoon filhal par iska matlab ye bilkul bhi nahin hai ki mujhe DSA pasand nahin hai balki ye bahut pasand hai kyonki ye Math ki hi tarah hamen Computer world ke Challenges ke liye prepare karta hai to i would recommend ki aap log bhi ise jaroor try out karen. Meri Github Repo ki link ye rahi jisse aap log meri DSA journey ka close look le sakte hain aur baaki dekhte hain kya aur kiya ja sakta hai.

https://github.com/HarshKumar123456/dsa-using-cpp

Aur Ye ek Chhota sa game jo DSA Problem Solving Ke Time Banaya tha:

https://harshku007.pages.dev/games/move-sofa-game

Iske Solution tak aane mein kya kya steps liye thodi si explanation video:

https://www.youtube.com/watch?v=2Hpnjwz8YEo

At last but not least i would like to say all of you that aapne yahan tak padha aur agar aap bhi thoda sa stuck feel kar rahen hain kisi bhi point par then keep going and sooner or later aapko uska impact dikhega bas sahi kaam karte rahiye kyonki slow progress while managing every part of life is good than dropping out things in the middle aur Maahi bhai yaani ki The One & Only Captain Cool MS Dhoni ka Cricket bhi hamen shayad yahi sikhata hai ki play till the end to win and stay strong come what may the situation arises to cool rahiye aur enjoy karte karte improve karte rahiye aur agar mere se koi Coding help chahiye ho yaa kuchh poochhna ho to jaroor poochhiye and i will be happy to help aur agar aap ek recruiter hain to i am happy to work at your company and Sorry agar time waste laga ho ise padhna mujhe thoda kam hi idea hai ki kaise ek post likha jata hai par apni feelings ko jaise bhi main kah sakta tha maine kahne ki koshish ki hai ek baar phir se sorry agar koi kami ho to aur Thanks if is post se aapko ek naya viewpoint mila ho to.

PS: Vaise Ye post mere khud ke liye jyada likha lagta hai as a memory to keep me pushing towards my better version but Thik Hai :)

Tic Tac Toe Using HTML, CSS and JS With Confetti animation

Harsh Kumar — Fri, 19 Jan 2024 13:50:55 +0000

Hello geeks we are going to make a simple Tic Tac Toe project with the magic of some Confetti animation to make your project stand out amongst all Tic Tac Toe projects.

Play it yourself (https://harshkumar123456.github.io/Tic-Tac-Toe-Using-HTML-CSS-and-JavaScript/)

We are going to use simply HTML, CSS and JavaScript for our project to make it simple. If you are an expert then you can always opt for some framework like React, Angular or Vue or any other to do the same.

Let's start....

First of all create a folder in which you are going to put this project. Let us name that folder project. Open that folder in VS Code(A code editor).

Step 1: Make a index.html file in that folder
Step 2: Now paste that code in your index.html and this is simply starting code of any html file you will be making.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
</head>
<body>

</body>
</html>

Step 3: Now as we know the tic tac toe game have 9 boxes in it so we have to create them also. Make 9 boxes of tic tac toe and take them inside a div tag and give them appropriate class and id for selecting them in later styling.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
</head>
<body>
    <div class="game-box">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
</body>
</html>

Step 4: Style them as you want here is one such example styling.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>

        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>

<body>
    <div class="game-box">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
</body>

</html>

Step 5: Add on click event listener to boxes

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Utility Classes */
        .game-text {
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            color: rgb(74, 74, 74);
            font-weight: bold;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>

<body>
    <div class="game-box game-text">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
    <script>

        // Add event listener to all the div having class box 
        function handleBoxClick(){
            console.log("Box " + this.id + " was clicked.");
        }

        const boxes = document.querySelectorAll('.box');

        boxes.forEach(box => {
            box.addEventListener('click', handleBoxClick);
        });
    </script>
</body>

</html>

Step 6: Initialise player's turn and show O or X in game boxes on clicking and if clicked again then show alert and return

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Utility Classes */
        .game-text {
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            color: rgb(74, 74, 74);
            font-weight: bold;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>

<body>
    <div class="game-box game-text">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
    <script>

        // Initialise playerTurn variable to know player's turn 
        let playerTurn = "O";

        // Function to toggle player's turn 
        function setPlayerTurn() {
            playerTurn = playerTurn === "O" ? "X" : "O";
        }

        // Add event listener to all the div having class box 
        function handleBoxClick(){
            console.log("Box " + this.id + " was clicked.");

            if(this.innerHTML){
                // If box has something in it then the same box should not clicked more than once show alert and return
                alert("Box is already filled...");
                return ;
            }

            // Change text inside box
            this.innerHTML = playerTurn;

            console.log("Now player turn is changed to " + playerTurn);
            setPlayerTurn();
            console.log(" to " + playerTurn);
        }

        const boxes = document.querySelectorAll('.box');

        boxes.forEach(box => {
            box.addEventListener('click', handleBoxClick);
        });

    </script>
</body>

</html>

Step 7: Setup winning logic and play winning sound if the current player won and save the sound file named victory-sound.mp3 in same project folder

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Utility Classes */
        .game-text {
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            color: rgb(74, 74, 74);
            font-weight: bold;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>

<body>
    <div class="game-box game-text">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
    <script>

        // Initialise playerTurn variable to know player's turn 
        let playerTurn = "O";
        let winner = false;
        let winningPattern = null;
        let winningSound = new Audio("victory-sound.mp3");

        const winningPatterns = [
            [1, 2, 3], // Horizontal rows
            [4, 5, 6],
            [7, 8, 9],
            [1, 4, 7], // Vertical columns
            [2, 5, 8],
            [3, 6, 9],
            [1, 5, 9], // Diagonals
            [3, 5, 7]
        ];


        function findPatternMatch(currentPlayer, pattern) {
            console.log("inside pattern" + pattern);

            for (const index of pattern) {
                if (document.getElementById(index.toString()).innerHTML !== currentPlayer) {
                    return false;
                }
            }

            return true;
        }


        function checkIfCurrentPlayerWon(currentPlayer) {
            for (const pattern of winningPatterns) {
                let isPatternMatch = findPatternMatch(currentPlayer, pattern);
                if (isPatternMatch) {
                    winningPattern = pattern;
                    winningSound.play();

                    return true;
                }
            }

            return false;
        }

        // Function to toggle player's turn 
        function setPlayerTurn() {
            playerTurn = playerTurn === "O" ? "X" : "O";
        }

        // Add event listener to all the div having class box 
        function handleBoxClick(){
            console.log("Box " + this.id + " was clicked.");

            if(this.innerHTML){
                // If box has something in it then the same box should not clicked more than once show alert and return
                alert("Box is already filled...");
                return ;
            }

            // Change text inside box
            this.innerHTML = playerTurn;

            let currentPlayer = playerTurn;
            winner = checkIfCurrentPlayerWon(currentPlayer);

            console.log("Now player turn is changed to " + playerTurn);
            setPlayerTurn();
            console.log(" to " + playerTurn);
        }

        const boxes = document.querySelectorAll('.box');

        boxes.forEach(box => {
            box.addEventListener('click', handleBoxClick);
        });

    </script>
</body>

</html>

Step 8: Add some error handling if one player wins then let the users know and if they click again on boxes then say them to restart game

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Utility Classes */
        .game-text {
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            color: rgb(74, 74, 74);
            font-weight: bold;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>

<body>
    <div class="player-turn-box game-text"></div>
    <div class="game-box game-text">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
    <script>

        // Initialise playerTurn variable to know player's turn 
        let playerTurn = "O";
        let winner = false;
        let winningPattern = null;
        let winningSound = new Audio("victory-sound.mp3");

        const winningPatterns = [
            [1, 2, 3], // Horizontal rows
            [4, 5, 6],
            [7, 8, 9],
            [1, 4, 7], // Vertical columns
            [2, 5, 8],
            [3, 6, 9],
            [1, 5, 9], // Diagonals
            [3, 5, 7]
        ];

        // Function to reload game
        function reloadGame() {
            location.reload();
        }

        // Initialise the player turn box to let the user know who will be going to start
        (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Player " + playerTurn + " Turn</h1>";


        function findPatternMatch(currentPlayer, pattern) {
            console.log("inside pattern" + pattern);

            for (const index of pattern) {
                if (document.getElementById(index.toString()).innerHTML !== currentPlayer) {
                    return false;
                }
            }

            return true;
        }


        function checkIfCurrentPlayerWon(currentPlayer) {
            for (const pattern of winningPatterns) {
                let isPatternMatch = findPatternMatch(currentPlayer, pattern);
                if (isPatternMatch) {
                    winningPattern = pattern;
                    winningSound.play();

                    return true;
                }
            }

            return false;
        }

        // Function to toggle player's turn 
        function setPlayerTurn() {
            playerTurn = playerTurn === "O" ? "X" : "O";
        }

        // Add event listener to all the div having class box 
        function handleBoxClick(){
            // If we got our winner then say user to restart game 
            if (winner) {
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Please restart game <button onclick='reloadGame()' style='border: none; background: none;'> <img width='24' height='24' src='https://img.icons8.com/material-two-tone/24/restart--v1.png' alt='restart--v1'/> </button> </h1>";
                return;
            }

            console.log("Box " + this.id + " was clicked.");

            if(this.innerHTML){
                // If box has something in it then the same box should not clicked more than once show alert and return
                alert("Box is already filled...");
                return ;
            }

            // Change text inside box
            this.innerHTML = playerTurn;

            let currentPlayer = playerTurn;
            winner = checkIfCurrentPlayerWon(currentPlayer);

            console.log("Now player turn is changed to " + playerTurn);
            setPlayerTurn();
            console.log(" to " + playerTurn);

            if (winner) {
                // If we got our winner then tell the users that the current player is won
                console.log("Now winner is " + playerTurn + " wohoo....");
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1> ' " + currentPlayer + " ' Wons <button onclick='reloadGame()' style='border: none; background: none;'> <img width='24' height='24' src='https://img.icons8.com/material-two-tone/24/restart--v1.png' alt='restart--v1'/> </button></h1>";
            }
            else {
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Player " + playerTurn + " Turn</h1>";
            }
        }

        const boxes = document.querySelectorAll('.box');

        boxes.forEach(box => {
            box.addEventListener('click', handleBoxClick);
        });

    </script>
</body>

</html>

Animation time

Update styling in style tag for zoom in and out effect

Include this CDN Link for confetti animation

https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js

Make functions to animate pattern we have got already earlier stored

Final code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        /* For Resetting any of the default margin padding in components */
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Utility Classes */
        .game-text {
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            color: rgb(74, 74, 74);
            font-weight: bold;
        }

        /* For Centering the game-box div and giving some font-family for a different look */
        body {
            height: 90vh;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            font-family: cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }


        /* For letting the 9 boxes of tic tac toe in layout of game */
        .game-box {
            width: 320px;
            display: grid;
            gap: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Box styling and making it flex for letting any O or X in center */
        .box {
            width: 100px;
            height: 100px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 10px 10px 20px #c7c7c7,
                -10px -10px 20px #ffffff;

            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.5s ease-out;
        }

        .box.zoom-out {
            animation: zoomOut 0.5s ease-out;
        }

        .box.zoom-in {
            animation: zoomIn 0.5s ease-out;
        }

        @keyframes zoomOut {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(0);
            }
        }

        @keyframes zoomIn {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="player-turn-box game-text"></div>
    <div class="game-box game-text">
        <div class="box" id="1"></div>
        <div class="box" id="2"></div>
        <div class="box" id="3"></div>
        <div class="box" id="4"></div>
        <div class="box" id="5"></div>
        <div class="box" id="6"></div>
        <div class="box" id="7"></div>
        <div class="box" id="8"></div>
        <div class="box" id="9"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>

    <script>

        // Initialise playerTurn variable to know player's turn 
        let playerTurn = "O";
        let winner = false;
        let winningPattern = null;
        let winningSound = new Audio("victory-sound.mp3");

        const winningPatterns = [
            [1, 2, 3], // Horizontal rows
            [4, 5, 6],
            [7, 8, 9],
            [1, 4, 7], // Vertical columns
            [2, 5, 8],
            [3, 6, 9],
            [1, 5, 9], // Diagonals
            [3, 5, 7]
        ];

        // Animation of winning pattern
        function animateWinningPattern(winningPattern) {
            if (winningPattern) {
                confetti({
                    particleCount: 100,
                    startVelocity: 50,
                    spread: 360,
                    origin: {
                        x: Math.random(),
                        // since they fall down, start a bit higher than random
                        y: Math.random() - 0.2
                    }
                });

                for (const index of winningPattern) {
                    document.getElementById(index.toString()).classList.toggle("zoom-out");
                    document.getElementById(index.toString()).classList.toggle("zoom-in");
                }
            }
        }
        setInterval(() => {
            animateWinningPattern(winningPattern);
        }, 500);

        // Function to reload game
        function reloadGame() {
            location.reload();
        }

        // Initialise the player turn box to let the user know who will be going to start
        (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Player " + playerTurn + " Turn</h1>";


        function findPatternMatch(currentPlayer, pattern) {
            console.log("inside pattern" + pattern);

            for (const index of pattern) {
                if (document.getElementById(index.toString()).innerHTML !== currentPlayer) {
                    return false;
                }
            }

            return true;
        }


        function checkIfCurrentPlayerWon(currentPlayer) {
            for (const pattern of winningPatterns) {
                let isPatternMatch = findPatternMatch(currentPlayer, pattern);
                if (isPatternMatch) {
                    winningPattern = pattern;
                    winningSound.play();

                    return true;
                }
            }

            return false;
        }

        // Function to toggle player's turn 
        function setPlayerTurn() {
            playerTurn = playerTurn === "O" ? "X" : "O";
        }

        // Add event listener to all the div having class box 
        function handleBoxClick(){
            // If we got our winner then say user to restart game 
            if (winner) {
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Please restart game <button onclick='reloadGame()' style='border: none; background: none;'> <img width='24' height='24' src='https://img.icons8.com/material-two-tone/24/restart--v1.png' alt='restart--v1'/> </button> </h1>";
                return;
            }

            console.log("Box " + this.id + " was clicked.");

            if(this.innerHTML){
                // If box has something in it then the same box should not clicked more than once show alert and return
                alert("Box is already filled...");
                return ;
            }

            // Change text inside box
            this.innerHTML = playerTurn;

            let currentPlayer = playerTurn;
            winner = checkIfCurrentPlayerWon(currentPlayer);

            console.log("Now player turn is changed to " + playerTurn);
            setPlayerTurn();
            console.log(" to " + playerTurn);

            if (winner) {
                // If we got our winner then tell the users that the current player is won
                console.log("Now winner is " + playerTurn + " wohoo....");
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1> ' " + currentPlayer + " ' Wons <button onclick='reloadGame()' style='border: none; background: none;'> <img width='24' height='24' src='https://img.icons8.com/material-two-tone/24/restart--v1.png' alt='restart--v1'/> </button></h1>";
            }
            else {
                (document.getElementsByClassName("player-turn-box"))[0].innerHTML = "<h1>Player " + playerTurn + " Turn</h1>";
            }
        }

        const boxes = document.querySelectorAll('.box');

        boxes.forEach(box => {
            box.addEventListener('click', handleBoxClick);
        });

    </script>
</body>

</html>

Thank you for reading

Harsh Kumar

Let us connect