JavaScript Essentials

// Modern JavaScript (ES6+)
const name = 'Th7media';
let count = 0;

// Arrow Functions
const greet = (name) => `Hello, ${name}!`;

// Template Literals
const message = `Welcome, ${name}! 
You have ${count} notifications.`;

// DOM Manipulation
document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('#myButton');
    const output = document.querySelector('#output');
    
    button.addEventListener('click', () => {
        count++;
        output.textContent = `Clicked ${count} times!`;
        output.classList.add('highlight');
    });
});

// Array Methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

// Promises
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data loaded!');
        }, 1000);
    });
};

// Async/Await
async function loadUserData() {
    try {
        const response = await fetch('/api/user');
        const user = await response.json();
        console.log(user);
        return user;
    } catch (error) {
        console.error('Error:', error);
    }
}

// Fetch API
async function getGitHubRepos(username) {
    const url = `https://api.github.com/users/${username}/repos`;
    
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Failed to fetch');
        const repos = await response.json();
        return repos;
    } catch (error) {
        console.error('Error fetching repos:', error);
        return [];
    }
}

// Event Listeners
document.addEventListener('DOMContentLoaded', () => {
    
    // Click Events
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', handleClick);
    });
    
    // Form Submission
    const form = document.querySelector('#contactForm');
    form.addEventListener('submit', handleSubmit);
    
    // Keyboard Events
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
    
    // Scroll Events (with debouncing)
    let scrollTimeout;
    window.addEventListener('scroll', () => {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            updateNavbar();
        }, 100);
    });
});

function handleClick(e) {
    e.preventDefault();
    const target = e.target;
    target.classList.toggle('active');
}

// Local Storage Utilities
const Storage = {
    set(key, value) {
        try {
            localStorage.setItem(key, JSON.stringify(value));
        } catch (e) {
            console.error('Storage error:', e);
        }
    },
    
    get(key) {
        try {
            const item = localStorage.getItem(key);
            return item ? JSON.parse(item) : null;
        } catch (e) {
            console.error('Storage error:', e);
            return null;
        }
    },
    
    remove(key) {
        localStorage.removeItem(key);
    }
};

// Progress Tracker Example
class ProgressTracker {
    constructor() {
        this.progress = Storage.get('learningProgress') || {};
    }
    
    completeLesson(lessonId) {
        this.progress[lessonId] = {
            completed: true,
            completedAt: new Date().toISOString()
        };
        this.save();
    }
    
    save() {
        Storage.set('learningProgress', this.progress);
    }
    
    getCompletionRate(totalLessons) {
        const completed = Object.keys(this.progress).length;
        return Math.round((completed / totalLessons) * 100);
    }
}