// Variable Declaration
// ES6+ (Modern JavaScript)
let age = 25;          // Can be reassigned
const PI = 3.14;       // Cannot be reassigned
var name = "John";     // Old way (avoid)

// Data Types
let string = "Hello World";      // String
let number = 42;                 // Number
let boolean = true;              // Boolean
let array = [1, 2, 3];           // Array
let object = {                   // Object
    name: "John",
    age: 25
};
let nothing = null;              // Null
let notDefined;                  // Undefined

// Type Checking
console.log(typeof "Hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof []);          // "object"
console.log(Array.isArray([]));  // true

// Select Elements
let element = document.getElementById('id');
let element = document.querySelector('.class');
let elements = document.querySelectorAll('.class');

// Create Element
let div = document.createElement('div');
div.textContent = "Hello World";
div.id = "myDiv";
div.className = "container";

// Modify Elements
element.innerHTML = "New Content";
element.textContent = "Plain Text";
element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";

// Add/Remove Classes
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');

// Hide/Show Elements
element.style.display = 'none';      // Hide
element.style.display = 'block';     // Show
element.style.visibility = 'hidden'; // Hide (keeps space)

// Append Elements
document.body.appendChild(div);
parentElement.append(div);    // ES6+
parentElement.prepend(div);   // Add at beginning

// Get Form Elements
let input = document.getElementById('username');
let select = document.getElementById('country');
let checkbox = document.getElementById('agree');
let radio = document.querySelector('input[name="gender"]:checked');

// Get Values
let username = input.value;
let country = select.value;
let isChecked = checkbox.checked;
let gender = radio ? radio.value : '';

// Set Values
input.value = "John Doe";
select.value = "US";
checkbox.checked = true;

// Enable/Disable
input.disabled = true;    // Disable
input.disabled = false;   // Enable

// Readonly
input.readOnly = true;

// Focus/Blur
input.focus();    // Set focus
input.blur();     // Remove focus

// Form Submission
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent page reload
    // Process form data here
});

// Add Event Listener
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Remove Event Listener
element.removeEventListener('click', handler);

// Common Events
element.addEventListener('click', handler);      // Mouse click
element.addEventListener('dblclick', handler);   // Double click
element.addEventListener('mouseover', handler);  // Mouse enters
element.addEventListener('mouseout', handler);   // Mouse leaves
element.addEventListener('focus', handler);      // Element focused
element.addEventListener('blur', handler);       // Element lost focus
element.addEventListener('change', handler);     // Value changed
element.addEventListener('input', handler);      // Real-time input
element.addEventListener('keydown', handler);    // Key pressed
element.addEventListener('keyup', handler);      // Key released

// Event Object
element.addEventListener('click', function(event) {
    console.log(event.target);      // Clicked element
    console.log(event.type);        // Event type
    console.log(event.clientX);     // Mouse X position
    event.preventDefault();         // Prevent default behavior
    event.stopPropagation();        // Stop event bubbling
});

// Array Creation
let fruits = ['Apple', 'Banana', 'Orange'];
let numbers = [1, 2, 3, 4, 5];

// Array Methods
fruits.push('Mango');           // Add to end
fruits.pop();                   // Remove from end
fruits.unshift('Strawberry');   // Add to beginning
fruits.shift();                 // Remove from beginning
fruits.slice(1, 3);             // Get portion
fruits.splice(2, 1, 'Kiwi');    // Replace element
fruits.indexOf('Banana');       // Find index
fruits.includes('Apple');       // Check if exists
fruits.sort();                  // Sort alphabetically
fruits.reverse();               // Reverse array
fruits.join(', ');              // Join to string

// Loops
// For loop
for (let i = 0; i < 5; i++) {    console.log(i);}// For...of loop (arrays)for (let fruit of fruits) {    console.log(fruit);}// forEach methodfruits.forEach(function(fruit, index) {    console.log(index, fruit);});// Map methodlet doubled = numbers.map(num => num * 2);

// Filter method
let even = numbers.filter(num => num % 2 === 0);

// Reduce method
let sum = numbers.reduce((total, num) => total + num, 0);

// Function Declaration
function greet(name) {
    return `Hello ${name}!`;
}

// Function Expression
const greet = function(name) {
    return `Hello ${name}!`;
};

// Arrow Function (ES6)
const greet = (name) => {
    return `Hello ${name}!`;
};

// Shorter Arrow Function
const greet = name => `Hello ${name}!`;

// Default Parameters
function greet(name = "Guest") {
    return `Hello ${name}!`;
}

// Rest Parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

// Immediately Invoked Function Expression (IIFE)
(function() {
    console.log("IIFE executed!");
})();

// Callback Functions
function processData(data, callback) {
    let result = data.toUpperCase();
    callback(result);
}

processData("hello", function(result) {
    console.log(result); // "HELLO"
});

// Email Validation
function validateEmail(email) {
    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
}

// Phone Number Validation
function validatePhone(phone) {
    const regex = /^[\+]?[1-9][\d]{9,14}$/;
    return regex.test(phone.replace(/[\s\-\(\)]/g, ''));
}

// Password Validation
function validatePassword(password) {
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    return regex.test(password);
}

// Name Validation
function validateName(name) {
    const regex = /^[a-zA-Z\s]+$/;
    return regex.test(name);
}

// Required Field Validation
function isRequired(value) {
    return value !== null && 
           value !== undefined && 
           value.toString().trim() !== '';
}

// Show Validation Error
function showError(input, message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.textContent = message;
    errorDiv.style.color = 'red';
    input.parentNode.appendChild(errorDiv);
    input.style.borderColor = 'red';
}

// Clear Validation Errors
function clearErrors() {
    document.querySelectorAll('.error-message').forEach(el => el.remove());
}

// Set Item
localStorage.setItem('key', 'value');

// Get Item
let value = localStorage.getItem('key');

// Remove Item
localStorage.removeItem('key');

// Clear All
localStorage.clear();

// Store Object
let user = {
    name: "John Doe",
    email: "john@example.com",
    age: 25
};

localStorage.setItem('user', JSON.stringify(user));

// Retrieve Object
let savedUser = JSON.parse(localStorage.getItem('user'));

// Session Storage (cleared when browser closes)
sessionStorage.setItem('key', 'value');
let sessionValue = sessionStorage.getItem('key');

// Example: Save Form Data
function saveFormData() {
    let formData = {
        username: document.getElementById('username').value,
        email: document.getElementById('email').value
    };
    
    localStorage.setItem('formData', JSON.stringify(formData));
}

// Example: Load Form Data
function loadFormData() {
    let savedData = localStorage.getItem('formData');
    if (savedData) {
        let formData = JSON.parse(savedData);
        document.getElementById('username').value = formData.username || '';
        document.getElementById('email').value = formData.email || '';
    }
}