script.js

// Project data - all projects
const projects = [
    {
        name: "Counter Program",
        path: "./plain-js/Counter-Program/",
        description: "A simple counter application with increment and decrement functionality.",
        icon: "🔢"
    },
    {
        name: "Login Checker",
        path: "./plain-js/Login-Checker/",
        description: "A login validation system to check user credentials.",
        icon: "🔐"
    },
    {
        name: "Movie Rating",
        path: "./plain-js/Movie-Rating/",
        description: "Rate and review your favorite movies with this interactive app.",
        icon: "🎬"
    },
    {
        name: "Quiz App",
        path: "./plain-js/Quiz-App/",
        description: "Test your knowledge with this interactive quiz application.",
        icon: "❓"
    },
    {
        name: "To-Do List",
        path: "./plain-js/To-Do/",
        description: "Organize your tasks with this feature-rich to-do list application.",
        icon: "✅"
    },
    {
        name: "Traffic Light",
        path: "./plain-js/Traffic-light/",
        description: "An interactive traffic light simulation and demonstration.",
        icon: "🚦"
    },
    {
        name: "Weather App",
        path: "./plain-js/Weather-App/",
        description: "Get real-time weather information and forecasts.",
        icon: "🌤️"
    },
    {
        name:"Guessing Game",
        path: "./plain-js/Guessing-Game/",
        description: "A simple number guessing game.",
        icon: "🤔",
    },
    {
        name: "Student DashBoard",
        path: "./plain-js/Student-Dashboard/",
        description: "A Dashboard to add Students details and get overview.",
        icon: "🗂️",
    }

];

// Function to create a project card
function createProjectCard(project) {
    const card = document.createElement('div');
    card.className = 'project-card';
    
    card.innerHTML = `
        <span class="project-icon">${project.icon}</span>
        <h2 class="project-title">${project.name}</h2>
        <p class="project-description">${project.description}</p>
        <a href="${project.path}index.html" class="project-link">View Project →</a>
    `;
    
    return card;
}

// Function to display all projects
function displayProjects() {
    const projectGrid = document.getElementById('projectGrid');
    
    if (!projectGrid) {
        console.error('Project grid element not found');
        return;
    }
    
    // Clear any existing content
    projectGrid.innerHTML = '';
    
    // Create and append project cards
    projects.forEach(project => {
        const card = createProjectCard(project);
        projectGrid.appendChild(card);
    });
    
    // Add click event to cards for better UX
    const cards = document.querySelectorAll('.project-card');
    cards.forEach((card, index) => {
        card.addEventListener('click', (e) => {
            // Don't navigate if clicking the link directly
            if (e.target.classList.contains('project-link')) {
                return;
            }
            // Navigate to project when clicking the card
            window.location.href = projects[index].path + 'index.html';
        });
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    displayProjects();
    
    // Add smooth scroll behavior
    document.documentElement.style.scrollBehavior = 'smooth';
});

// Search/filter functionality
function addSearchFunctionality() {
    // Need to add search functionality later
    console.log('Projects loaded successfully!');
}

// Call search functionality
addSearchFunctionality();