Codinglog/script.js at main · Coder-Connections/Codinglog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// ============================================
// Projects Data Structure
// ============================================

const projects = [
    {
        id: 'todo-app',
        title: 'Todo Application',
        category: 'Web App',
        date: '2025-11-24',
        description: 'A full-featured todo application built with vanilla JavaScript, featuring local storage, filtering, and modern UI design.',
        tags: ['JavaScript', 'HTML', 'CSS', 'LocalStorage'],
        links: [
            { text: 'View Code', url: 'https://github.com/example/todo-app' },
            { text: 'Live Demo', url: 'https://example.com/todo-app' }
        ]
    }
];

// ============================================
// Utility Functions
// ============================================

function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
}

// Note: getProjectById is kept for potential future use
// but individual project pages now use static HTML files
function getProjectById(id) {
    return projects.find(project => project.id === id);
}

// ============================================
// Main Page Functionality
// ============================================

function renderProjects() {
    const projectsGrid = document.getElementById('projectsGrid');

    if (!projectsGrid) return;

    projectsGrid.innerHTML = projects.map(project => `
        <div class="project-card" onclick="navigateToProject('${project.id}')">
            <div class="project-card-header">
                <span class="project-card-category">${project.category}</span>
                <h3 class="project-card-title">${project.title}</h3>
            </div>
            <p class="project-card-description">${project.description}</p>
            <div class="project-card-tags">
                ${project.tags.map(tag => `<span class="project-tag">${tag}</span>`).join('')}
            </div>
        </div>
    `).join('');
}

function navigateToProject(projectId) {
    // Map project IDs to their HTML file names in the projects folder
    const projectFileMap = {
        'todo-app': 'projects/todo-app.html'
    };

    const fileName = projectFileMap[projectId];
    if (fileName) {
        window.location.href = fileName;
    }
}

// ============================================
// Initialize Application
// ============================================

function init() {
    // Only render projects on the main index page
    if (document.getElementById('projectsGrid')) {
        renderProjects();
    }
}

// Run initialization when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}

// Make navigateToProject available globally for onclick handlers
window.navigateToProject = navigateToProject;