CIT (Club d'Informatique et Télécoms) offers free courses taught by INPT students across various tech domains. Our Web Development cell is dedicated to bringing your ideas to life through code - from concept to creation.

CIT Web Development Hub

Learn • Build • Collaborate

## What is JavaScript?

JavaScript is a **programming language used to make web pages interactive**.

It runs directly inside the web browser (Chrome, Firefox, etc.) without needing any installation.

It was created in 1995 to make websites more dynamic, and today it has become one of the most widely used languages in the world.

With JavaScript, you can:

- Respond to user actions (clicks, typing, scrolling)
- Change the content of a page without reloading
- Create animations, menus, sliders, popups
- Communicate with servers to load data
- Build full web apps (like Gmail, Instagram, or Spotify Web)

JavaScript is now used **everywhere**: front-end, back-end (Node.js), mobile apps, desktop apps, and even games.

**In simple terms:**

➡️ **HTML builds the page**  
➡️ **CSS styles it**  
➡️ **JavaScript brings it to life**

---

## 📌 How to Add JavaScript to HTML

Before we start writing JavaScript, we need to connect our `.js` file to our `.html` file.

Here are the main methods:

### Method 1: Script tag at the bottom of `<body>` (Recommended)

This is the most common method. Place the `<script>` tag just before the closing `</body>` tag.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

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

**Why at the bottom?** Because the browser reads HTML from top to bottom. If we put the script at the top, JavaScript will try to access HTML elements that haven't been loaded yet.

---

### Method 2: Script tag in `<head>` with defer attribute

The `defer` attribute tells the browser to load the JavaScript file but wait until the HTML is fully loaded before executing it.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>
</body>
</html>
```

**Advantage:** Keeps your `<head>` section organized and the script loads in parallel with the HTML.

---

### Method 3: Inline script (Not recommended for large code)

You can write JavaScript directly inside HTML using `<script>` tags without a `src` attribute.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

  <script>
    // JavaScript code directly here
    const button = document.querySelector("#myButton");
    button.addEventListener("click", () => {
      alert("Button clicked!");
    });
  </script>
</body>
</html>
```

**Note:** This method is fine for small scripts or testing, but for real projects, always use external `.js` files to keep your code organized.

---

## 1. Variables

### What are Variables?

Variables are like labeled boxes that store information. You can put data inside them, retrieve it later, and even change it.

### Declaring Variables

JavaScript has three ways to declare variables:

| Keyword | Can be changed? | Best for |
|---------|----------------|----------|
| `const` | ❌ No | Values that won't change |
| `let` | ✅ Yes | Values that will change |
| `var` | ✅ Yes | Old way (avoid using) |

### Examples

```js
// Using const - value cannot be reassigned
const appName = "My App";
const maxUsers = 100;

// Using let - value can be reassigned
let userCount = 0;
userCount = 5;  // ✅ This works
userCount = 10; // ✅ This also works

// Trying to reassign const
const siteName = "My Site";
// siteName = "New Site"; // ❌ ERROR! Cannot reassign const
```

---

## Data Types in Variables

```js
// Numbers
let age = 25;
let price = 19.99;

// Strings (text)
const firstName = "Sarah";
const message = 'Hello, world!';

// Booleans (true/false)
let isLoggedIn = false;
let hasAccess = true;

// Undefined (no value assigned yet)
let futureValue;
console.log(futureValue); // undefined
```

---

## Naming Rules

### ✅ Good names:

```js
const userName = "Alex";
let itemCount = 5;
const MAX_ATTEMPTS = 3;
```

### ❌ Bad names:

```js
const x = "Alex";           // Not descriptive
let 1stItem = "Apple";     // Cannot start with number
const user-name = "Sam";   // Cannot use hyphens
```

### Best practices:

- Use **camelCase**: `firstName`, `maxValue`, `isActive`
- Be **descriptive**: `userAge` instead of `a`
- **Constants in UPPERCASE**: `MAX_SIZE`, `API_KEY`

---

## What's Next?

In **Part 2**, we'll dive into functions and learn how to create reusable blocks of code! 🚀

Understand what JavaScript is and learn how to connect JavaScript files to HTML

Master JavaScript fundamentals - from linking scripts to DOM manipulation and event handling

JavaScript Definition & Linking to HTML


Functions and arrays are fundamental building blocks of JavaScript. Let's master them!

---

## 2. Functions

### What are Functions?

Functions are reusable blocks of code that perform a specific task. Think of them as recipes - you write the instructions once and use them many times.

### Basic Function Syntax

```js
function functionName(parameter1, parameter2) {
  // Code to execute
  return result; // Optional
}
```

---

## Examples

### Simple Function (no parameters, no return)

```js
function sayHello() {
  console.log("Hello, everyone!");
}

// Call the function
sayHello(); // Output: "Hello, everyone!"
sayHello(); // Can be called multiple times
```

---

### Function with Parameters

```js
function greetUser(name) {
  console.log("Welcome, " + name + "!");
}

greetUser("Alice"); // Output: "Welcome, Alice!"
greetUser("Bob");   // Output: "Welcome, Bob!"
```

---

### Function with Return Value

```js
function addNumbers(a, b) {
  const sum = a + b;
  return sum;
}

const result = addNumbers(5, 3);
console.log(result); // Output: 8

// Use directly in other operations
const total = addNumbers(10, 20) + 5;
console.log(total); // Output: 35
```

---

### Function with Multiple Parameters

```js
function calculateArea(width, height) {
  return width * height;
}

const area1 = calculateArea(5, 10);
console.log(area1); // Output: 50

const area2 = calculateArea(7, 3);
console.log(area2); // Output: 21
```

---

## Arrow Functions (Modern Syntax)

Arrow functions are a shorter way to write functions.

```js
// Traditional function
function multiply(x, y) {
  return x * y;
}

// Arrow function - same thing
const multiply = (x, y) => {
  return x * y;
};

// Arrow function - shorter (one-line)
const multiply = (x, y) => x * y;

// Example with one parameter
const square = (num) => num * num;
console.log(square(4)); // Output: 16

// Example with no parameters
const getRandom = () => Math.random();
console.log(getRandom()); // Output: random number
```

---

## When to Use Functions?

- When you repeat the same code multiple times
- To organize complex code into smaller parts
- To make code more readable and maintainable

```js
// Without function - repetitive
let price1 = 100;
let tax1 = price1 * 0.2;
let total1 = price1 + tax1;

let price2 = 200;
let tax2 = price2 * 0.2;
let total2 = price2 + tax2;

// With function - clean and reusable
function calculateTotal(price) {
  const tax = price * 0.2;
  return price + tax;
}

const total1 = calculateTotal(100); // 120
const total2 = calculateTotal(200); // 240
```

---

## 3. Arrays

### What are Arrays?

Arrays are ordered lists that store multiple values in a single variable. Each item has a position called an **index**, starting from **0**.

```
Index:  0        1         2         3
Array: ["apple", "banana", "orange", "grape"]
```

---

## Creating Arrays

```js
// Array of strings
const fruits = ["apple", "banana", "orange"];

// Array of numbers
const numbers = [10, 20, 30, 40, 50];

// Array with mixed types (possible but not recommended)
const mixed = ["text", 42, true];

// Empty array
const emptyArray = [];
```

---

## Accessing Array Elements

```js
const colors = ["red", "green", "blue", "yellow"];

console.log(colors[0]); // "red" (first item)
console.log(colors[1]); // "green" (second item)
console.log(colors[3]); // "yellow" (fourth item)

// Getting the last item
const lastColor = colors[colors.length - 1];
console.log(lastColor); // "yellow"
```

---

## Modifying Arrays

```js
const students = ["Alice", "Bob", "Charlie"];

// Change an existing element
students[1] = "Ben";
console.log(students); // ["Alice", "Ben", "Charlie"]

// Add a new element at specific index
students[3] = "Diana";
console.log(students); // ["Alice", "Ben", "Charlie", "Diana"]
```

---

## Common Array Methods

### Adding Elements

```js
const numbers = [1, 2, 3];

// Add to the end
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

numbers.push(5, 6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// Add to the beginning
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5, 6]
```

---

### Removing Elements

```js
const fruits = ["apple", "banana", "orange", "grape"];

// Remove from the end
const lastFruit = fruits.pop();
console.log(lastFruit); // "grape"
console.log(fruits);    // ["apple", "banana", "orange"]

// Remove from the beginning
const firstFruit = fruits.shift();
console.log(firstFruit); // "apple"
console.log(fruits);     // ["banana", "orange"]
```

---

### Other Useful Methods

```js
const animals = ["cat", "dog", "bird", "fish"];

// Get array length
console.log(animals.length); // 4

// Check if value exists
console.log(animals.includes("dog"));  // true
console.log(animals.includes("lion")); // false

// Find index of element
console.log(animals.indexOf("bird")); // 2
console.log(animals.indexOf("lion")); // -1 (not found)

// Join array into string
const text = animals.join(", ");
console.log(text); // "cat, dog, bird, fish"
```

---

## Looping Through Arrays

### Using a for loop

```js
const scores = [85, 92, 78, 95, 88];

for (let i = 0; i < scores.length; i++) {
  console.log("Score " + (i + 1) + ": " + scores[i]);
}

// Output:
// Score 1: 85
// Score 2: 92
// Score 3: 78
// Score 4: 95
// Score 5: 88
```

---

### Using forEach (modern way)

```js
const names = ["Emma", "Liam", "Olivia"];

names.forEach((name, index) => {
  console.log(index + ": " + name);
});

// Output:
// 0: Emma
// 1: Liam
// 2: Olivia
```

---

## Practical Example: Sum all numbers

```js
const prices = [10, 25, 30, 15];
let total = 0;

for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}

console.log("Total: $" + total); // Total: $80
```

---

## What's Next?

In **Part 3**, we'll explore the DOM (Document Object Model) and learn how to select and manipulate HTML elements with JavaScript! 🎯


Master JavaScript functions and arrays to write reusable, organized code that handles multiple values efficiently

Functions & Arrays - Building Blocks of JavaScript


Now it's time to make your web pages interactive! Let's learn how JavaScript talks to HTML.

---

## 4. The DOM (Document Object Model)

### What is the DOM?

![DOM Structure](/posts/sessions/session-3/images/DOM.png)

The DOM is a tree-like structure that represents your HTML document. JavaScript can access and modify this tree to change what users see on the page.

Think of it like this:

```
document
  └── html
      ├── head
      │   ├── title
      │   └── meta
      └── body
          ├── h1
          ├── p
          └── button
```

---

### HTML Example

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="title">Welcome</h1>
  <p class="description">This is a paragraph.</p>
  <button id="myButton">Click Me</button>
</body>
</html>
```

JavaScript can access any of these elements and change them!

---

## 5. document.querySelector

### What is querySelector?

`document.querySelector` is a method that finds and returns the **first** HTML element that matches a CSS selector.

### Syntax

```js
const element = document.querySelector("css-selector");
```

---

### Selecting by Tag Name

```js
// Select the first <h1> element
const heading = document.querySelector("h1");
console.log(heading); // <h1>Welcome</h1>

// Select the first <p> element
const paragraph = document.querySelector("p");
console.log(paragraph); // <p>This is a paragraph.</p>
```

---

### Selecting by ID

Use `#` before the ID name (just like in CSS).

```html
<div id="container">Content here</div>
```

```js
const container = document.querySelector("#container");
console.log(container); // <div id="container">...</div>
```

---

### Selecting by Class

Use `.` before the class name (just like in CSS).

```html
<p class="info">Information text</p>
<p class="info">More information</p>
```

```js
// Gets only the FIRST element with class "info"
const firstInfo = document.querySelector(".info");
console.log(firstInfo); // <p class="info">Information text</p>
```

---

### Selecting Multiple Elements

Use `querySelectorAll` to get all matching elements (returns a list).

```html
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
```

```js
const allBoxes = document.querySelectorAll(".box");
console.log(allBoxes.length); // 3

// Loop through all boxes
allBoxes.forEach((box, index) => {
  console.log("Box " + (index + 1) + ": " + box.textContent);
});
```

---

### Complex Selectors

You can use any CSS selector!

```js
// Select button inside a div with class "container"
const button = document.querySelector(".container button");

// Select all paragraphs inside an article
const paragraphs = document.querySelectorAll("article p");

// Select element with specific attribute
const emailInput = document.querySelector('input[type="email"]');
```

---

## 6. Events

### What are Events?

Events are actions that happen in the browser:

- User clicks a button
- User types in an input field
- Page finishes loading
- Mouse moves over an element

JavaScript can listen for these events and react to them.

![JavaScript Events](/posts/sessions/session-3/images/Events.png)

---

### Common Event Types

| Event | When it happens |
|-------|----------------|
| `click` | Element is clicked |
| `dblclick` | Element is double-clicked |
| `mouseover` | Mouse moves over element |
| `mouseout` | Mouse leaves element |
| `keydown` | Key is pressed |
| `keyup` | Key is released |
| `submit` | Form is submitted |
| `change` | Input value changes |
| `load` | Page finishes loading |

---

## Adding Event Listeners (Method 1: JavaScript)

This is the **recommended** way to handle events.

### Syntax:

```js
element.addEventListener("eventType", function);
```

---

### Example 1: Simple Click Event

```html
<button id="myButton">Click me</button>
<p id="message"></p>
```

```js
const button = document.querySelector("#myButton");
const message = document.querySelector("#message");

button.addEventListener("click", () => {
  message.textContent = "Button was clicked!";
});
```

---

### Example 2: Using a Named Function

```js
const button = document.querySelector("#myButton");

function handleClick() {
  alert("Hello, World!");
}

button.addEventListener("click", handleClick);
```

---

### Example 3: Getting Event Information

```js
const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  console.log("Event type:", event.type);      // "click"
  console.log("Element clicked:", event.target); // <button>
  console.log("Mouse position X:", event.clientX);
  console.log("Mouse position Y:", event.clientY);
});
```

---

## Adding Event Listeners (Method 2: Inline HTML)

You can also add event handlers directly in your HTML using attributes like `onclick`.

### Example:

```html
<button onclick="showMessage()">Click me</button>

<script>
  function showMessage() {
    alert("Button clicked!");
  }
</script>
```

### Another example with inline code:

```html
<button onclick="alert('Hello!')">Say Hello</button>
```

---

## Multiple Events on Same Element

```js
const box = document.querySelector("#box");

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "white";
});

box.addEventListener("click", () => {
  box.style.backgroundColor = "blue";
});
```

---

## Events on Multiple Elements

```html
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
```

```js
const buttons = document.querySelectorAll(".btn");

buttons.forEach((button, index) => {
  button.addEventListener("click", () => {
    alert("You clicked button " + (index + 1));
  });
});
```

---

## What's Next?

In **Part 4**, we'll learn **DOM Manipulation** - how to change text, styles, and structure of your web pages dynamically! 🎨


Learn how to access and interact with HTML elements using JavaScript, and respond to user actions with event listeners

The DOM, querySelector & Events


Now let's learn how to change your web pages after they've loaded!

---

## 7. DOM Manipulation

### What is DOM Manipulation?

DOM manipulation means using JavaScript to change the content, structure, or style of your HTML page after it has loaded.

---

## 7.1 Changing Text Content

### Using textContent

```html
<h1 id="title">Original Title</h1>
<p id="description">Original description</p>
```

```js
const title = document.querySelector("#title");
const description = document.querySelector("#description");

// Change text
title.textContent = "New Title";
description.textContent = "This is the new description.";
```

---

### Using innerText (similar to textContent)

```js
const heading = document.querySelector("h1");
heading.innerText = "Updated Heading";
```

**Note:** `textContent` vs `innerText`:

- `textContent`: Shows all text, including hidden elements
- `innerText`: Shows only visible text
- Both work for basic text changes

---

## 7.2 Changing HTML Content

### Using innerHTML

```html
<div id="container">
  <p>Old content</p>
</div>
```

```js
const container = document.querySelector("#container");

// Replace entire HTML content
container.innerHTML = "<h2>New Heading</h2><p>New paragraph</p>";

// Add to existing content
container.innerHTML += "<p>Additional paragraph</p>";
```

⚠️ **Warning:** Be careful with `innerHTML` when using user input - it can create security risks!

---

## 7.3 Changing CSS Styles

### Using the style property

```html
<div id="box">This is a box</div>
```

```js
const box = document.querySelector("#box");

// Change individual styles
box.style.backgroundColor = "lightblue";
box.style.color = "white";
box.style.padding = "20px";
box.style.fontSize = "18px";
box.style.border = "2px solid navy";

// Note: CSS properties with hyphens become camelCase
// CSS: background-color → JavaScript: backgroundColor
// CSS: font-size → JavaScript: fontSize
```

---

### Practical example:

```js
const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  button.style.backgroundColor = "green";
  button.style.color = "white";
  button.style.fontSize = "20px";
});
```

---

## 7.4 Working with CSS Classes

### Using classList

This is the **better** way to change styles (instead of `style` property).

```html
<div id="box" class="container">Content</div>
```

```css
/* In your CSS file */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

.large {
  font-size: 24px;
}
```

```js
const box = document.querySelector("#box");

// Add a class
box.classList.add("highlight");

// Remove a class
box.classList.remove("container");

// Toggle a class (add if not present, remove if present)
box.classList.toggle("large");

// Check if class exists
if (box.classList.contains("highlight")) {
  console.log("Box is highlighted!");
}

// Add multiple classes at once
box.classList.add("highlight", "large");
```

---

### Why use classList instead of style?

- Keeps styles in CSS where they belong
- Easier to manage and reuse
- Better performance
- Cleaner code

---

## 7.5 Showing and Hiding Elements

### Method 1: Using style.display

```html
<div id="content">
  <p>This content can be hidden.</p>
</div>
<button id="toggleBtn">Toggle Content</button>
```

```js
const content = document.querySelector("#content");
const toggleBtn = document.querySelector("#toggleBtn");

toggleBtn.addEventListener("click", () => {
  if (content.style.display === "none") {
    content.style.display = "block"; // Show
  } else {
    content.style.display = "none";  // Hide
  }
});
```

---

### Method 2: Using a CSS class (better)

```css
.hidden {
  display: none;
}
```

```js
const content = document.querySelector("#content");
const toggleBtn = document.querySelector("#toggleBtn");

toggleBtn.addEventListener("click", () => {
  content.classList.toggle("hidden");
});
```

---

## 7.6 Getting and Setting Attributes

```html
<img id="myImage" src="old.jpg" alt="Old Image">
<input id="email" type="text" placeholder="Enter email">
```

```js
const image = document.querySelector("#myImage");
const input = document.querySelector("#email");

// Get attribute value
console.log(image.src);           // "old.jpg"
console.log(input.placeholder);   // "Enter email"

// Set attribute value
image.src = "new.jpg";
image.alt = "New Image";
input.placeholder = "Your email here";

// Using getAttribute and setAttribute (alternative)
const oldSrc = image.getAttribute("src");
image.setAttribute("src", "another.jpg");
```

---

## 7.7 Creating and Adding Elements

### Creating new elements

```js
// Create a new element
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
newParagraph.classList.add("info");

// Add it to the page
document.body.appendChild(newParagraph);
```

---

### More complex example:

```js
// Create a new div with content
const newDiv = document.createElement("div");
newDiv.classList.add("card");

const heading = document.createElement("h3");
heading.textContent = "Card Title";

const text = document.createElement("p");
text.textContent = "This is card content.";

// Build the structure
newDiv.appendChild(heading);
newDiv.appendChild(text);

// Add to page
const container = document.querySelector("#container");
container.appendChild(newDiv);
```

---

## 7.8 Removing Elements

```html
<div id="message">This message will disappear.</div>
<button id="removeBtn">Remove Message</button>
```

```js
const message = document.querySelector("#message");
const removeBtn = document.querySelector("#removeBtn");

removeBtn.addEventListener("click", () => {
  message.remove(); // Remove the element
});
```

---

## 🎯 Key Takeaways

✅ **Variables** store data (`let` for changing values, `const` for constants)

✅ **Functions** organize reusable code

✅ **Arrays** store ordered lists of values (starting at index 0)

✅ **DOM** is the tree structure representing your HTML

✅ **querySelector** finds HTML elements using CSS selectors

✅ **Events** let you respond to user actions (clicks, typing, etc.)

✅ **DOM Manipulation** changes content, styles, and structure dynamically

---

## Final Tips

🔹 Link your JavaScript file properly and always test your code in the browser!

🔹 Use `console.log()` to debug and see what's happening

🔹 Practice by building small interactive projects

🔹 Keep your code organized with functions

🔹 Use meaningful variable and function names

---

## Congratulations! 🎉

You've completed **Session 3 - JavaScript Basics**!

You now know how to:
- Connect JavaScript to HTML
- Use variables, functions, and arrays
- Select and manipulate DOM elements
- Handle user events
- Change styles and content dynamically

Keep practicing and building! The more you code, the better you'll get. 🚀


Master DOM manipulation to change content, styles, classes, and structure of your web pages with JavaScript

DOM Manipulation - Changing Your Web Pages Dynamically


Time to apply everything you've learned! Let's build a complete XO Game (Tic Tac Toe) from scratch.

---

## 🎮 Project Overview

In this practice project, you'll build a fully functional Tic Tac Toe game that demonstrates all the JavaScript concepts you've learned:

- Variables to track game state
- Functions to organize game logic
- Arrays to store board data
- DOM manipulation to update the interface
- Event listeners to respond to user clicks
- Conditional statements to check winners

---

##  Getting Started

### Step 1: Clone the Starter Code

We've prepared a starter repository with HTML and CSS already done. You just need to write the JavaScript!

```bash
git clone https://github.com/yassinelamsaaf/CELL_WEB---XO-game.git
cd CELL_WEB---XO-game
```

### Step 2: Open in Your Code Editor

Open the folder in VS Code or your preferred editor.

You'll find three files:
- `index.html` - The game structure (already complete)
- `style.css` - The game styling (already complete)
- `game-solution.js` - Your JavaScript file (this is where you'll work!)

### Step 3: Open in Browser

Double-click `index.html` to open it in your browser and see the game interface.

---

## 📁 Starter Files

### HTML Structure (index.html)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XO Game - Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>XO Game</h1>
        
        <div class="game-info">
            <p>Current Player: <span id="current-player">X</span></p>
            <p id="game-status">Game in progress...</p>
        </div>

        <div class="game-board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>

        <button id="reset-btn">Reset Game</button>
    </div>

    <script src="game-solution.js"></script>
</body>
</html>
```

---

### CSS Styling (style.css)

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #667eea;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.game-info {
    margin-bottom: 30px;
}

.game-info p {
    font-size: 1.2rem;
    color: #555;
    margin: 10px 0;
}

#current-player {
    font-weight: bold;
    color: #667eea;
    font-size: 1.5rem;
}

#game-status {
    font-weight: bold;
    color: #764ba2;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 auto 30px;
    max-width: 400px;
}

.cell {
    aspect-ratio: 1;
    background: #f5f7fa;
    border: none;
    border-radius: 10px;
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cell:hover {
    transform: scale(1.05);
    background: #e0e7ff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cell.x {
    color: #667eea;
}

.cell.o {
    color: #764ba2;
}

.cell.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

#reset-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

#reset-btn:hover {
    transform: translateY(-2px);
    background: #5568d3;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

#reset-btn:active {
    transform: translateY(0);
}

/* Responsive design */
@media (max-width: 500px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    .cell {
        font-size: 2rem;
    }
}
```

---

## Your Mission: Complete the JavaScript

Open `game-solution.js` and follow the TODO comments to build the game logic.

### JavaScript Structure (game-solution.js)

The file contains detailed comments guiding you through each step:

```js
// ============================================
// XO GAME - TIC TAC TOE
// JavaScript Tutorial with Comments
// ============================================

// ============================================
// VARIABLES
// ============================================
// TODO: Declare variables to track the game state
// - Create an array to represent the 9 cells of the board (initially empty strings)
// - Create a variable to track whose turn it is (starts with 'X')
// - Create a variable to track if the game is still active (boolean)


// ============================================
// DOM ELEMENT REFERENCES
// ============================================
// TODO: Use querySelector and querySelectorAll to get references to HTML elements
// - Get all cell elements (use querySelectorAll with class 'cell')
// - Get the current player display element (id: 'current-player')
// - Get the game status element (id: 'game-status')
// - Get the reset button (id: 'reset-btn')


// ============================================
// WINNING PATTERNS
// ============================================
// TODO: Create an array of arrays containing all possible winning combinations
// The board indices are:
// [0] [1] [2]
// [3] [4] [5]
// [6] [7] [8]
// 
// Winning combinations are:
// Rows: [0,1,2], [3,4,5], [6,7,8]
// Columns: [0,3,6], [1,4,7], [2,5,8]
// Diagonals: [0,4,8], [2,4,6]


// ============================================
// INITIALIZE GAME
// ============================================
// TODO: Create a function called 'initializeGame' that:
// - Resets the board array to empty strings
// - Sets the current player to 'X'
// - Sets game active to true
// - Clears all cell texts using DOM manipulation
// - Removes disabled classes from cells
// - Updates the status message


// ============================================
// HANDLE CELL CLICK
// ============================================
// TODO: Create a function called 'handleCellClick' that takes an event parameter
// This function should:
// - Get the clicked cell element from the event
// - Get the cell index from the data-index attribute
// - Use conditionals (if/else) to check:
//   * If the cell is already filled (check the board array)
//   * If the game is not active
//   * If either condition is true, return early (do nothing)
// - Update the board array at the clicked index with current player
// - Use DOM manipulation to update the cell's innerText
// - Add a class to the cell for styling ('x' or 'o')
// - Call function to check for winner
// - If no winner, switch players


// ============================================
// CHECK FOR WINNER
// ============================================
// TODO: Create a function called 'checkWinner' that:
// - Uses a loop (for loop) to iterate through all winning patterns
// - For each pattern, check if all three positions have the same value
//   and that value is not empty
// - Use conditionals (if statements) to determine:
//   * If there's a winner - call handleGameEnd with winner
//   * If the board is full (no empty strings) - call handleGameEnd with 'draw'
// - You can use array methods or loops to check if board is full


// ============================================
// HANDLE GAME END
// ============================================
// TODO: Create a function called 'handleGameEnd' that takes a result parameter
// This function should:
// - Set game active to false
// - Use conditionals (if/else) to check the result:
//   * If result is 'draw', update status to show it's a draw
//   * Otherwise, update status to show the winner
// - Use a loop or querySelectorAll to add 'disabled' class to all cells


// ============================================
// SWITCH PLAYER
// ============================================
// TODO: Create a function called 'switchPlayer' that:
// - Uses a conditional (if/else or ternary operator) to switch between 'X' and 'O'
// - Updates the current player variable
// - Uses DOM manipulation to update the current player display (innerText)


// ============================================
// EVENT LISTENERS
// ============================================
// TODO: Add click event listeners to all cells
// - Use a loop (forEach) to iterate through all cell elements
// - Add a click event listener to each cell that calls handleCellClick


// TODO: Add click event listener to reset button
// - Should call initializeGame when clicked


// ============================================
// START THE GAME
// ============================================
// TODO: Call initializeGame to start the game when the page loads


// ============================================
// BONUS CHALLENGES FOR STUDENTS
// ============================================
// 1. Add a score counter that tracks wins for X and O
// 2. Add animation when someone wins
// 3. Highlight the winning combination
// 4. Add sound effects for clicks and wins
// 5. Add AI opponent for single player mode
```

---

##  Step-by-Step Guide

### Step 1: Variables
Create variables to store:
- Board state (array of 9 empty strings)
- Current player ('X' or 'O')
- Game active status (boolean)

### Step 2: DOM References
Use `querySelector` and `querySelectorAll` to get HTML elements

### Step 3: Winning Patterns
Define all 8 possible winning combinations

### Step 4: Initialize Function
Reset the game to starting state

### Step 5: Handle Click
Respond when a player clicks a cell

### Step 6: Check Winner
Loop through winning patterns to find a winner

### Step 7: Handle Game End
Display winner or draw message

### Step 8: Switch Player
Alternate between X and O

### Step 9: Event Listeners
Attach click handlers to cells and reset button

### Step 10: Start Game
Call initialize when page loads

---

## ✅ Testing Your Game

Make sure your game can:

1. ✅ Display X or O when clicking a cell
2. ✅ Prevent clicking the same cell twice
3. ✅ Alternate between X and O players
4. ✅ Detect when someone wins (all 8 patterns)
5. ✅ Detect a draw (board full, no winner)
6. ✅ Display game status messages
7. ✅ Disable cells when game ends
8. ✅ Reset the game with the Reset button

---

##  Bonus Challenges

Once your game works, try these enhancements:

1. **Score Counter** - Track wins for X and O across multiple games
2. **Win Animation** - Highlight or animate the winning cells
3. **Sound Effects** - Add sounds for clicks and wins
4. **AI Opponent** - Make the computer play as O
5. **Themes** - Add dark mode or different color schemes

---

##  Concepts Used

This project uses everything from Session 3:

- ✅ Variables (const, let)
- ✅ Functions (regular and arrow functions)
- ✅ Arrays (storing board state, winning patterns)
- ✅ DOM manipulation (querySelector, textContent, classList)
- ✅ Events (addEventListener, click events)
- ✅ Conditionals (if/else)
- ✅ Loops (for, forEach)

---

##  What You'll Learn

By completing this project, you'll understand:

- How to structure a complete JavaScript application
- Managing application state with variables
- Organizing code with functions
- User interaction with event listeners
- Dynamic UI updates with DOM manipulation
- Game logic with conditionals and loops

---

##  Tips

- **Test frequently** - Run your code after each function
- **Use console.log()** - Debug by printing values
- **Read error messages** - They tell you what's wrong
- **Start simple** - Get basic clicks working first
- **Ask for help** - Don't struggle alone!

---

##  Congratulations!

Once you complete this project, you'll have a fully functional game built with pure JavaScript!

This demonstrates real-world programming skills and shows you can:
- Plan and structure an application
- Implement interactive features
- Debug and test code
- Create something people can actually use

**Keep coding and keep building!** 


Put your JavaScript skills to the test by building a complete XO Game (Tic Tac Toe) with event listeners, DOM manipulation, and game logic

SESSION 3

JavaScript Definition & Linking to HTML

Functions & Arrays - Building Blocks of JavaScript

The DOM, querySelector & Events

DOM Manipulation - Changing Your Web Pages Dynamically

Practice Project - XO Game (Tic Tac Toe)