Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

HTML Structure for Tic-Tac-Toe Game

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Tic-Tac-Toe Game</h1>
    <!-- Game board consisting of 3x3 grid -->
    <div id="gameBoard">
        <!-- Each cell in the grid where players can click -->
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
    </div>
    <!-- Button to restart the game -->
    <button id="restartButton">Restart Game</button>

    <script src="script.js"></script>
</body>
</html>

Tic-Tac-Toe Game – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

CSS Styling for Tic-Tac-Toe Game

/* Basic styling for the game's layout */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin-top: 20px;
}

/* Styling for the game board */
#gameBoard {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Creates a 3x3 grid */
    gap: 5px; /* Space between the cells */
}

/* Styling for each cell in the game board */
.cell {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    height: 100px;
}

/* Disables clicks on cells that are already marked */
.cell:not(:empty) {
    pointer-events: none;
}

CSS Styling for Tic-Tac-Toe Game Explained

Basic Styling for the Game’s Layout

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin-top: 20px;
}
  • display: flex;: Establishes a flexible container.
  • justify-content: center;: Aligns children horizontally in the center.
  • align-items: center;: Aligns children vertically in the center.
  • flex-direction: column;: Arranges children in a column.
  • font-family: Arial, sans-serif;: Sets the font style.
  • margin-top: 20px;: Adds space above the body.

Styling for the Game Board

#gameBoard {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Creates a 3x3 grid */
    gap: 5px; /* Space between the cells */
}
  • display: grid;: Sets up a grid layout.
  • grid-template-columns: repeat(3, 100px);: Defines a 3×3 grid.
  • gap: 5px;: Adds space between grid cells.

Styling for Each Cell in the Game Board

.cell {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    height: 100px;
}
  • background-color: #f0f0f0;: Sets cell background color.
  • Uses flexbox to center content.
  • font-size: 2em;: Enlarges text inside the cell.
  • cursor: pointer;: Indicates the cell is clickable.
  • height: 100px;: Sets cell height for square shape.

Disables Clicks on Cells That Are Already Marked

.cell:not(:empty) {
    pointer-events: none;
}
  • Targets cells that are not empty.
  • pointer-events: none;: Disables mouse interactions.

JavaScript Logic for Tic-Tac-Toe Game

// Select all cell elements and the restart button from the DOM
const cells = document.querySelectorAll('[data-cell]');
const restartButton = document.getElementById('restartButton');

// Define winning combinations as an array of arrays
const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

// Variable to keep track of whose turn it is
let circleTurn;

// Initialize the game
function startGame() {
    circleTurn = false; // Start with X's turn
    cells.forEach(cell => {
        cell.classList.remove('circle', 'x'); // Clear all marks from the board
        cell.removeEventListener('click', handleClick); // Remove previous event listeners
        cell.addEventListener('click', handleClick, { once: true }); // Listen for a click event once per cell
    });
}

// Handle click on cells
function handleClick(e) {
    const cell = e.target; // The clicked cell element
    const currentClass = circleTurn ? 'circle' : 'x'; // Determine the current player's class
    placeMark(cell, currentClass); // Place mark in the clicked cell


    if (checkWin(currentClass)) {
        // Check for a win
        alert(`${circleTurn ? "O's" : "X's"} Wins!`);
        startGame(); // Restart the game after win
    } else if (isDraw()) {
        // Check for a draw
        alert("Draw!");
        startGame(); // Restart the game after draw
    } else {
        swapTurns(); // Switch turns
    }
}

// Place mark in cell
function placeMark(cell, currentClass) {
    cell.classList.add(currentClass);
}

// Switch turns between X and O
function swapTurns() {
    circleTurn = !circleTurn;
}

// Check if the current player has won
function checkWin(currentClass) {
    return winningCombinations.some(combination => {
        return combination.every(index => {
            return cells[index].classList.contains(currentClass);
        });
    });
}

// Check if the game is a draw
function isDraw() {
    return [...cells].every(cell => {
        return cell.classList.contains('x') || cell.classList.contains('circle');
    });
}

// Event listener for the restart button
restartButton.addEventListener('click', startGame);

// Start the game when the page loads
startGame();

JavaScript Tic-Tac-Toe Game Code Explanation

const cells = document.querySelectorAll('[data-cell]');
Selects all the elements in the DOM that have a data-cell attribute, representing the Tic-Tac-Toe board’s cells.

const restartButton = document.getElementById('restartButton');
Selects the DOM element with the ID restartButton for restarting the game.

const winningCombinations = [ ... ];
Defines the winning combinations for the game as an array of arrays, each containing indices of cells that a player must fill to win.

let circleTurn;
A variable to keep track of whose turn it is, with true for O’s turn and false for X’s turn.

function startGame() { ... }
Initializes the game, sets the starting turn, clears the board, and sets up click event listeners for each cell.

function handleClick(e) { ... }
Handles cell clicks, placing the correct mark, checking for a win or draw, and either switching turns or restarting the game as needed.

function placeMark(cell, currentClass) { ... }
Adds the player’s mark (X or O) to the clicked cell by adding the corresponding class.

function swapTurns() { ... }
Switches the turn between players by toggling the circleTurn variable.

function checkWin(currentClass) { ... }
Checks if the current player has won by checking the winning combinations against the board’s state.

function isDraw() { ... }
Checks if the game is a draw, which happens when all cells are filled and there’s no winner.

restartButton.addEventListener('click', startGame);
Adds an event listener to the restartButton to restart the game when clicked.

startGame();
Calls startGame to initialize the game when the page loads.

Once you cut and paste the above code into an HTML file it will work like this below:

Tic Tac Toe Game

Tic-tac-toe – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

From Wikipedia, the free encyclopedia
Tic-tac-toe

A completed game of tic-tac-toe
Other names
  • Noughts and Crosses
  • Xs and Os
Genres Paper-and-pencil game
Players 2
Setup time Minimal
Playing time ~1 minute
Chance None
Skills Strategy, tactics, observation

Tic-tac-toe (American English), noughts and crosses (Commonwealth English), or Xs and Os (Canadian or Irish English) is a paper-and-pencil game for two players who take turns marking the spaces in a three-by-three grid with X or O. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner. It is a solved game, with a forced draw assuming best play from both players.

Names

In American English, the game is known as “tic-tac-toe”. It may also be spelled “tick-tack-toe”, “tick-tat-toe”, or “tit-tat-toe”.[1][2]

In Commonwealth English (particularly BritishSouth AfricanIndianAustralian, and New Zealand English), the game is known as “noughts and crosses”, alternatively spelled “naughts and crosses”. This name derives from the shape of the marks in the game (i.e the X and O); “nought” is an older name for the number zero, while “cross” refers to the X shape. While the term “nought” is now less commonly used, the name “noughts and crosses” is still preferred over the American name “tic-tac-toe” in these countries.

Sometimes, tic-tac-toe (where players keep adding “pieces”) and three men’s morris (where pieces start to move after a certain number have been placed) are confused with each other.

Gameplay – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

Tic-tac-toe is played on a three-by-three grid by two players, who alternately place the marks X and O in one of the nine spaces in the grid.

In the following example, the first player (X) wins the game in seven steps:

Game of Tic-tac-toe, won by X

There is no universally agreed rule as to who plays first, but in this article the convention that X plays first is used.

Players soon discover that the best play from both parties leads to a draw. Hence, tic-tac-toe is often played by young children who may not have discovered the optimal strategy.

Because of the simplicity of tic-tac-toe, it is often used as a pedagogical tool for teaching the concepts of good sportsmanship and the branch of artificial intelligence that deals with the searching of game trees. It is straightforward to write a computer program to play tic-tac-toe perfectly or to enumerate the 765 essentially different positions (the state space complexity) or the 26,830 possible games up to rotations and reflections (the game tree complexity) on this space.[3] If played optimally by both players, the game always ends in a draw, making tic-tac-toe a futile game.[4]

Incidence structure for tic-tac-toe

The game can be generalized to an m,n,k-game, in which two players alternate placing stones of their own color on an m-by-n board with the goal of getting k of their own color in a row. Tic-tac-toe is the 3,3,3-game.[5] Harary’s generalized tic-tac-toe is an even broader generalization of tic-tac-toe. It can also be generalized as an nd game, specifically one in which n equals 3 and d equals 2.[6] It can be generalised even further by playing on an arbitrary incidence structure, where rows are lines and cells are points. Tic-tac-toe’s incidence structure consists of nine points, three horizontal lines, three vertical lines, and two diagonal lines, with each line consisting of at least three points.

History

Games played on three-in-a-row boards can be traced back to ancient Egypt,[7] where such game boards have been found on roofing tiles dating from around 1300 BC.[8]

An early variation of tic-tac-toe was played in the Roman Empire, around the first century BC. It was called terni lapilli (three pebbles at a time) and instead of having any number of pieces, each player had only three; thus, they had to move them around to empty spaces to keep playing.[9] The game’s grid markings have been found chalked all over Rome. Another closely related ancient game is three men’s morris which is also played on a simple grid and requires three pieces in a row to finish,[10] and Picaria, a game of the Puebloans.

The different names of the game are more recent. The first print reference to “noughts and crosses” (nought being an alternative word for ‘zero’), the British name, appeared in 1858, in an issue of Notes and Queries.[11] The first print reference to a game called “tick-tack-toe” occurred in 1884, but referred to “a children’s game played on a slate, consisting of trying with the eyes shut to bring the pencil down on one of the numbers of a set, the number hit being scored”.[This quote needs a citation] “Tic-tac-toe” may also derive from “tick-tack”, the name of an old version of backgammon first described in 1558. The US renaming of “noughts and crosses” to “tic-tac-toe” occurred in the 20th century.[12]

In 1952, OXO (or Noughts and Crosses), developed by British computer scientist Sandy Douglas for the EDSAC computer at the University of Cambridge, became one of the first known video games.[13][14] The computer player could play perfect games of tic-tac-toe against a human opponent.[13]

In 1975, tic-tac-toe was also used by MIT students to demonstrate the computational power of Tinkertoy elements. The Tinkertoy computer, made out of (almost) only Tinkertoys, is able to play tic-tac-toe perfectly.[15] It is currently on display at the Computer History Museum.[16]

Combinatorics – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

When considering only the state of the board, and after taking into account board symmetries (i.e. rotations and reflections), there are only 138 terminal board positions. A combinatorics study of the game shows that when “X” makes the first move every time, the game outcomes are as follows:[17]

  • 91 distinct positions are won by (X)
  • 44 distinct positions are won by (O)
  • 3 distinct positions are drawn (often called a “cat’s game”[18])

Strategy

Optimal strategy for player X if starting in upper left. In each grid, the shaded red X denotes the optimal move, and the location of O’s next move gives the next subgrid to examine. Only two sequences of moves by O (both starting with the center, top-right, left-mid) lead to a draw, with the remaining sequences leading to wins from X.
Optimal strategy for player O. Player O can only force a win or draw by playing in the center first.

A player can play a perfect game of tic-tac-toe (to win or at least draw) if, each time it is their turn to play, they choose the first available move from the following list, as used in Newell and Simon’s 1972 tic-tac-toe program.[19]

  1. Win: If the player has two in a row, they can place a third to get three in a row.
  2. Block: If the opponent has two in a row, the player must play the third themselves to block the opponent.
  3. Fork: Cause a scenario where the player has two ways to win (two non-blocked lines of 2).
  4. Blocking an opponent’s fork: If there is only one possible fork for the opponent, the player should block it. Otherwise, the player should block all forks in any way that simultaneously allows them to make two in a row. Otherwise, the player should make a two in a row to force the opponent into defending, as long as it does not result in them producing a fork. For example, if “X” has two opposite corners and “O” has the center, “O” must not play a corner move to win. (Playing a corner move in this scenario produces a fork for “X” to win.)
  5. Center: A player marks the center. (If it is the first move of the game, playing a corner move gives the second player more opportunities to make a mistake and may therefore be the better choice; however, it makes no difference between perfect players.)
  6. Opposite corner: If the opponent is in the corner, the player plays the opposite corner.
  7. Empty corner: The player plays in a corner square.
  8. Empty side: The player plays in a middle square on any of the four sides.

The first player, who shall be designated “X”, has three possible strategically distinct positions to mark during the first turn. Superficially, it might seem that there are nine possible positions, corresponding to the nine squares in the grid. However, by rotating the board, we will find that, in the first turn, every corner mark is strategically equivalent to every other corner mark. The same is true of every edge (side middle) mark. From a strategic point of view, there are therefore only three possible first marks: corner, edge, or center. Player X can win or force a draw from any of these starting marks; however, playing the corner gives the opponent the smallest choice of squares which must be played to avoid losing.[20] This might suggest that the corner is the best opening move for X, however another study[21] shows that if the players are not perfect, an opening move in the center is best for X.

The second player, who shall be designated “O”, must respond to X’s opening mark in such a way as to avoid the forced win. Player O must always respond to a corner opening with a center mark, and to a center opening with a corner mark. An edge opening must be answered either with a center mark, a corner mark next to the X, or an edge mark opposite the X. Any other responses will allow X to force the win. Once the opening is completed, O’s task is to follow the above list of priorities in order to force the draw, or else to gain a win if X makes a weak play.

More detailed, to guarantee a draw, O should adopt the following strategies:

  • If X plays a corner opening move, O should take center, and then an edge, forcing X to block in the next move. This will stop any forks from happening. When both X and O are perfect players and X chooses to start by marking a corner, O takes the center, and X takes the corner opposite the original. In that case, O is free to choose any edge as its second move. However, if X is not a perfect player and has played a corner and then an edge, O should not play the opposite edge as its second move, because then X is not forced to block in the next move and can fork.
  • If X plays edge opening move, O should take center or one of the corners adjacent to X, and then follow the above list of priorities, mainly paying attention to block forks. With perfect play, O can also force a draw by taking the opposite edge from X.
  • If X plays the center opening move, O should take a corner, and then follow the above list of priorities, mainly paying attention to block forks.

When X plays corner first, and O is not a perfect player, the following may happen:

  • If O responds with a center mark (best move for them), a perfect X player will take the corner opposite the original. Then O should play an edge. However, if O plays a corner as its second move, a perfect X player will mark the remaining corner, blocking O’s 3-in-a-row and making their own fork.
  • If O responds with a corner mark, X is guaranteed to win. By taking any of the other two corners, O can only take the position between the two Xs, then by taking the remaining corner to create a fork, X will win on the next move.
  • If O responds with an edge mark, X is guaranteed to win. By taking center, O can only take the corner opposite the corner which X plays first, then by taking a corner to create a fork, X will win on the next move.

Further details – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

Consider a board with the nine positions numbered as follows:

1 2 3
4 5 6
7 8 9

When X plays 1 as their opening move, then O should take 5. Then X takes 9 (in this situation, O should not take 3 or 7, O should take 2, 4, 6 or 8):

  • X1 → O5 → X9 → O2 → X8 → O7 → X3 → O6 → X4, this game will be a draw.

or 6 (in this situation, O should not take 4 or 7, O should take 2, 3, 8 or 9. In fact, taking 9 is the best move, since a non-perfect player X may take 4, then O can take 7 to win).

  • X1 → O5 → X6 → O2 → X8, then O should not take 3, or X can take 7 to win, and O should not take 4, or X can take 9 to win, O should take 7 or 9.
    • X1 → O5 → X6 → O2 → X8 → O7 → X3 → O9 → X4, this game will be a draw.
    • X1 → O5 → X6 → O2 → X8 → O9 → X4 (7) → O7 (4) → X3, this game will be a draw.
  • X1 → O5 → X6 → O3 → X7 → O4 → X8 (9) → O9 (8) → X2, this game will be a draw.
  • X1 → O5 → X6 → O8 → X2 → O3 → X7 → O4 → X9, this game will be a draw.
  • X1 → O5 → X6 → O9, then X should not take 4, or O can take 7 to win, X should take 2, 3, 7 or 8.
    • X1 → O5 → X6 → O9 → X2 → O3 → X7 → O4 → X8, this game will be a draw.
    • X1 → O5 → X6 → O9 → X3 → O2 → X8 → O4 (7) → X7 (4), this game will be a draw.
    • X1 → O5 → X6 → O9 → X7 → O4 → X2 (3) → O3 (2) → X8, this game will be a draw.
    • X1 → O5 → X6 → O9 → X8 → O2 (3, 4, 7) → X4/7 (4/7, 2/3, 2/3) → O7/4 (7/4, 3/2, 3/2) → X3 (2, 7, 4), this game will be a draw.

In both of these situations (X takes 9 or 6 as the second move), X has a 1/3 property to win.

If X is not a perfect player, X may take 2 or 3 as a second move. Then this game will be a draw, X cannot win.

  • X1 → O5 → X2 → O3 → X7 → O4 → X6 → O8 (9) → X9 (8), this game will be a draw.
  • X1 → O5 → X3 → O2 → X8 → O4 (6) → X6 (4) → O9 (7) → X7 (9), this game will be a draw.

If X plays 1 opening move, and O is not a perfect player, the following may happen:

Although O takes the only good position (5) as the first move, O takes a bad position as the second move:

  • X1 → O5 → X9 → O3 → X7, then X can take 4 or 8 to win.
  • X1 → O5 → X6 → O4 → X3, then X can take 7 or 9 to win.
  • X1 → O5 → X6 → O7 → X3, then X can take 2 or 9 to win.

Although O takes good positions in the first two moves, O takes a bad position in the third move:

  • X1 → O5 → X6 → O2 → X8 → O3 → X7, then X can take 4 or 9 to win.
  • X1 → O5 → X6 → O2 → X8 → O4 → X9, then X can take 3 or 7 to win.

O takes a bad position as first move (except of 5, all other positions are bad):

  • X1 → O3 → X7 → O4 → X9, then X can take 5 or 8 to win.
  • X1 → O9 → X3 → O2 → X7, then X can take 4 or 5 to win.
  • X1 → O2 → X5 → O9 → X7, then X can take 3 or 4 to win.
  • X1 → O6 → X5 → O9 → X3, then X can take 2 or 7 to win.

Variations – Building a Tic-Tac-Toe Game: A Comprehensive Guide with HTML, CSS, and JavaScript

Many board games share the element of trying to be the first to get n-in-a-row, including three men’s morrisnine men’s morrispentegomokuQubicConnect FourQuartoGobbletOrder and ChaosToss Across, and Mojo. Tic-tac-toe is an instance of an m,n,k-game, where two players alternate taking turns on an m×n board until one of them gets k in a row. Harary’s generalized tic-tac-toe is an even broader generalization. The game can be generalised even further by playing on an arbitrary hypergraph, where rows are hyperedges and cells are vertices.

Other variations of tic-tac-toe include:

  • 3-dimensional tic-tac-toe on a 3×3×3 board. In this game, the first player has an easy win by playing in the centre if 2 people are playing.

One can play on a board of 4×4 squares, winning in several ways. Winning can include: 4 in a straight line, 4 in a diagonal line, 4 in a diamond, or 4 to make a square.

Another variant, Qubic, is played on a 4×4×4 board; it was solved by Oren Patashnik in 1980 (the first player can force a win).[22] Higher dimensional variations are also possible.[6]

  • In misère tic-tac-toe, the player wins if the opponent gets n in a row.[23] A 3×3 game is a draw. More generally, the first player can draw or win on any board (of any dimension) whose side length is odd, by playing first in the central cell and then mirroring the opponent’s moves.[6]
  • In “wild” tic-tac-toe, players can choose to place either X or O on each move.[24][25][26]
  • Number Scrabble or Pick15[27] is isomorphic to tic-tac-toe but on the surface appears completely different.[28] Two players in turn say a number between one and nine. A particular number may not be repeated. The game is won by the player who has said three numbers whose sum is 15.[27][29] If all the numbers are used and no one gets three numbers that add up to 15 then the game is a draw.[27] Plotting these numbers on a 3×3 magic square shows that the game exactly corresponds with tic-tac-toe, since three numbers will be arranged in a straight line if and only if they total 15.[30]
fear or try → r
be boat by → b
ten on any → n
  ↙

t

e

o

y

a

  • Another isomorphic game uses a list of nine carefully chosen words, for instance “try”, “be”, “on”, “any”, “boat”, “by”, “ten”, “or”, and “fear”. Each player picks one word in turn and to win, a player must select three words with the same letter. The words may be plotted on a tic-tac-toe grid in such a way that a three-in-a-row line wins.[31]
  • Numerical tic-tac-toe is a variation invented by the mathematician Ronald Graham. The numbers 1 to 9 are used in this game. The first player plays with the odd numbers, the second player plays with the even numbers. All numbers can be used only once. The player who puts down 15 points in a line wins (sum of 3 numbers).
  • In the 1970s, there was a two player game made by Tri-ang Toys & Games called Check Lines, in which the board consisted of eleven holes arranged in a geometrical pattern of twelve straight lines each containing three of the holes. Each player had exactly five tokens and played in turn placing one token in any of the holes. The winner was the first player whose tokens were arranged in two lines of three (which by definition were intersecting lines). If neither player had won by the tenth turn, subsequent turns consisted of moving one of one’s own tokens to the remaining empty hole, with the constraint that this move could only be from an adjacent hole.[32]
  • There is also a variant of the game with the classic 3×3 field, in which it is necessary to make two rows to win, while the opposing algorithm only needs one.[33]
  • Quantum tic-tac-toe allows players to place a quantum superposition of numbers on the board, i.e. the players’ moves are “superpositions” of plays in the original classical game. This variation was invented by Allan Goff of Novatia Labs.[34]

In popular culture

Various game shows have been based on tic-tac-toe and its variants:[citation needed]

  • On Hollywood Squares, nine celebrities filled the cells of the tic-tac-toe grid; players put symbols on the board by correctly agreeing or disagreeing with a celebrity’s answer to a question. Variations of the show include Storybook Squares and Hip Hop Squares. The British version was Celebrity Squares. Australia had various versions under the names of Celebrity SquaresPersonality Squares and All Star Squares.
  • In Tic-Tac-Dough, players put symbols up on the board by answering questions in various categories, which shuffle after both players have taken both turns.
  • In Beat the Teacher, contestants answer questions to win a turn to influence a tic-tac-toe grid.
  • On The Price Is Right, several national variants feature a pricing game called “Secret X”, in which players must guess prices of two small prizes to win Xs (in addition to one free X) to place on a blank board. They must place the Xs in position to guess the location of the titular “secret X” hidden in the center column of the board and form a tic-tac-toe line horizontally (across) or diagonally (no vertical lines allowed). There are no Os in this variant of the game.
  • On Minute to Win It, the game Ping Tac Toe has one contestant playing the game with nine water-filled glasses and white and orange ping-pong balls, trying to get three in a row of either color. They must alternate colors after each successful landing and must be careful not to block themself.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.