aa-codecademy · aneta88hristova-png · Jun 4, 2026
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,13 +1,13 @@
 :root {
-    /* Avenga Academy Brand Colors */
-    --color-primary: #dd2c00;
-    --color-primary-dark: #b02400;
-    --color-secondary: #0257b4;
-    --color-accent: #ffa500;
+    /* Avenga Academy Brand Colors - Uppdaterad till Lila */
+    --color-primary: #9333ea;
+    --color-primary-dark: #7e22ce;
+    --color-secondary: #4f46e5;
+    --color-accent: #a855f7;
     --color-success: #48bb78;
-    --color-danger: #dd2c00;
-    --color-warning: #ffa500;
-    --color-info: #0257b4;
+    --color-danger: #dc2626;
+    --color-warning: #f59e0b;
+    --color-info: #3b82f6;
     --color-text: #2d3748;
     --color-text-light: #718096;
     --color-border: #e2e8f0;
@@ -78,7 +78,7 @@ body {
 
 .btn-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 10px 20px rgba(221, 44, 0, 0.3);
+    box-shadow: 0 10px 20px rgba(147, 51, 234, 0.3);
 }
 
 .btn-secondary {
@@ -195,7 +195,7 @@ body {
 .form-input:focus {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(221, 44, 0, 0.1);
+    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
 }
 
 /* Modal */

diff --git a/assets/js/controllers/bloom/eventsController.js b/assets/js/controllers/bloom/eventsController.js
@@ -1,16 +1,13 @@
 /**
  * Events Controller (Student/Alumni)
  * Browse upcoming career-related events and industry news.
- *
- * User story: "Events and industry news"
- *
- * Available mock service methods:
- *  - mockDataService.getEvents()
- *  - mockDataService.getEventById(id)
- *  - mockDataService.registerForEvent(eventId, userId)
  */
 import authService from '../../services/authService.js';
+import mockDataService from '../../services/mockDataService.js';
 import { renderAppHeader } from '../../views/appHeader.js';
+import { renderEventsHeader } from '../../views/events/eventsHeader.js';
+import { renderEventsFilters, attachFilterListeners, updateFilterButtonStyles } from '../../views/events/eventsFilters.js';
+import { formatDate, getEventTypeStyles, getEventTypeIcon, getEventTypeLabel, filterEventsByDate, showToast } from '../../utils/eventHelpers.js';
 
 export default async function eventsController() {
     const app = document.getElementById('app');
@@ -21,30 +18,195 @@ export default async function eventsController() {
         return;
     }
 
-    // TODO (student task): list events, support registration, filter by type/date
-    // const events = await mockDataService.getEvents();
-
-    app.innerHTML = `
-        ${renderAppHeader(user, window.location.pathname)}
-        <div class="bg-gray-50 min-h-screen py-8">
-            <div class="container mx-auto px-4">
-                <div class="fade-in">
-                    <div class="mb-8">
-                        <h1 class="text-4xl font-bold text-gray-800 mb-2">
-                            <i class="fas fa-calendar-alt text-purple-600 mr-3"></i>
-                            Events
-                        </h1>
-                        <p class="text-gray-600">Upcoming career days, workshops, and networking events</p>
+    let allEvents = [];
+    let filteredEvents = [];
+    let currentFilters = {
+        type: 'all',
+        dateRange: 'all'
+    };
+
+    function renderEventsGrid() {
+        const eventsGrid = document.getElementById('eventsGrid');
+        if (!eventsGrid) return;
+
+        if (filteredEvents.length === 0) {
+            eventsGrid.innerHTML = `
+                <div class="col-span-full text-center py-12">
+                    <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
+                    <h3 class="text-2xl font-bold text-gray-600 mb-2">No events found</h3>
+                    <p class="text-gray-500">Try adjusting your filters or check back later for new events.</p>
+                </div>
+            `;
+            return;
+        }
+
+        eventsGrid.innerHTML = filteredEvents.map(event => `
+            <div class="card fade-in">
+                <div class="mb-4">
+                    <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold ${getEventTypeStyles(event.type)}">
+                        <i class="fas ${getEventTypeIcon(event.type)} mr-1"></i>
+                        ${getEventTypeLabel(event.type)}
+                    </span>
+                </div>
+                <h3 class="text-xl font-bold text-gray-800 mb-2">${event.title}</h3>
+                <p class="text-gray-600 mb-4 line-clamp-2">${event.description}</p>
+                <div class="space-y-2 mb-4">
+                    <div class="flex items-center gap-2 text-sm text-gray-500">
+                        <i class="fas fa-calendar-alt w-4"></i>
+                        <span>${formatDate(event.date)} at ${event.time}</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm text-gray-500">
+                        <i class="fas ${event.isOnline ? 'fa-video' : 'fa-map-marker-alt'} w-4"></i>
+                        <span>${event.isOnline ? 'Online Event' : event.location}</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm text-gray-500">
+                        <i class="fas fa-users w-4"></i>
+                        <span>${event.registeredCount || 0} / ${event.maxParticipants || '∞'} registered</span>
+                    </div>
+                </div>
+                <button class="view-event-btn w-full btn ${(event.registeredCount >= event.maxParticipants) ? 'btn-secondary opacity-50 cursor-not-allowed' : 'btn-primary'}"
+                        data-event-id="${event.id}"
+                        ${(event.registeredCount >= event.maxParticipants) ? 'disabled' : ''}>
+                    ${(event.registeredCount >= event.maxParticipants) ? 'Event Full' : 'View Details & Register'}
+                </button>
+            </div>
+        `).join('');
+
+        document.querySelectorAll('.view-event-btn').forEach(btn => {
+            if (!btn.disabled) {
+                btn.addEventListener('click', () => {
+                    const event = allEvents.find(e => e.id === btn.dataset.eventId);
+                    if (event) showEventDetails(event);
+                });
+            }
+        });
+    }
+
+    function showEventDetails(event) {
+        const modalHtml = `
+            <div id="eventModal" class="modal-overlay fade-in">
+                <div class="modal-content" style="max-width: 600px;">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-bold text-purple-600">${event.title}</h2>
+                        <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-center gap-2 text-gray-600">
+                            <i class="fas fa-calendar-alt text-purple-600"></i>
+                            <span>${formatDate(event.date)} at ${event.time}</span>
+                        </div>
+                        <div class="flex items-center gap-2 text-gray-600">
+                            <i class="fas ${event.isOnline ? 'fa-video' : 'fa-map-marker-alt'} text-purple-600"></i>
+                            <span>${event.isOnline ? 'Online Event' : event.location}</span>
+                        </div>
+                        <div class="flex items-center gap-2 text-gray-600">
+                            <i class="fas fa-users text-purple-600"></i>
+                            <span>${event.registeredCount || 0} / ${event.maxParticipants || 'Unlimited'} participants</span>
+                        </div>
+                        <div class="pt-4">
+                            <h3 class="font-semibold text-gray-800 mb-2">About this event</h3>
+                            <p class="text-gray-600">${event.description}</p>
+                        </div>
+                    </div>
+                    <div class="flex gap-3 mt-6">
+                        <button id="registerFromModalBtn" class="btn btn-primary flex-1" ${(event.registeredCount >= event.maxParticipants) ? 'disabled' : ''}>
+                            ${(event.registeredCount >= event.maxParticipants) ? 'Event Full' : 'Register Now'}
+                        </button>
+                        <button id="closeModalBtn2" class="btn btn-secondary">Close</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        const modal = document.getElementById('eventModal');
+        const closeModal = () => modal.remove();
+
+        document.getElementById('closeModalBtn')?.addEventListener('click', closeModal);
+        document.getElementById('closeModalBtn2')?.addEventListener('click', closeModal);
+        document.getElementById('registerFromModalBtn')?.addEventListener('click', async () => {
+            await handleRegistration(event.id);
+            closeModal();
+        });
+        modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
+    }
+
+    async function handleRegistration(eventId) {
+        try {
+            const result = await mockDataService.registerForEvent(eventId, user.id);
+
+            if (result.success) {
+                const event = allEvents.find(e => e.id === eventId);
+                if (event) event.registeredCount = (event.registeredCount || 0) + 1;
+                showToast('Successfully registered for the event!', 'success');
+                applyFiltersAndRender();
+            } else if (result.reason === 'event_full') {
+                showToast('Sorry, this event is full!', 'error');
+            }
+        } catch (error) {
+            console.error('Registration failed:', error);
+            showToast('Failed to register for event. Please try again.', 'error');
+        }
+    }
+
+    function applyFiltersAndRender() {
+        let filtered = [...allEvents];
+        if (currentFilters.type !== 'all') {
+            filtered = filtered.filter(event => event.type === currentFilters.type);
+        }
+        filtered = filterEventsByDate(filtered, currentFilters.dateRange);
+        filteredEvents = filtered;
+        renderEventsGrid();
+    }
+
+    function handleFilterChange(filterType, filterValue) {
+        currentFilters[filterType] = filterValue;
+        updateFilterButtonStyles(filterType, filterValue);
+        applyFiltersAndRender();
+    }
+
+    try {
+        app.innerHTML = `
+            ${renderAppHeader(user, window.location.pathname)}
+            <div class="bg-gray-50 min-h-screen py-8">
+                <div class="container mx-auto px-4">
+                    <div class="fade-in">
+                        <div id="eventsHeader"></div>
+                        <div id="filtersContainer"></div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="eventsGrid"></div>
                     </div>
+                </div>
+            </div>
+        `;
+
+        allEvents = await mockDataService.getEvents();
+        filteredEvents = [...allEvents];
+
+        const headerContainer = document.getElementById('eventsHeader');
+        const filtersContainer = document.getElementById('filtersContainer');
+
+        if (headerContainer) headerContainer.innerHTML = renderEventsHeader(allEvents);
+        if (filtersContainer) filtersContainer.innerHTML = renderEventsFilters(currentFilters, handleFilterChange);
+
+        renderEventsGrid();
+        attachFilterListeners(handleFilterChange);
+
+    } catch (error) {
+        console.error('Failed to load events:', error);
+        app.innerHTML = `
+            ${renderAppHeader(user, window.location.pathname)}
+            <div class="bg-gray-50 min-h-screen py-8">
+                <div class="container mx-auto px-4">
                     <div class="card text-center py-16">
-                        <i class="fas fa-tools text-6xl text-gray-300 mb-4"></i>
-                        <h3 class="text-2xl font-bold text-gray-600 mb-2">TODO: Events listing</h3>
-                        <p class="text-gray-500">Implement events grid, filters, and registration flow.</p>
+                        <i class="fas fa-exclamation-triangle text-6xl text-red-500 mb-4"></i>
+                        <h3 class="text-2xl font-bold text-gray-600 mb-2">Failed to load events</h3>
+                        <p class="text-gray-500">Please try again later.</p>
                     </div>
                 </div>
             </div>
-        </div>
-    `;
+        `;
+    }
 
     const logoutBtn = document.getElementById('logoutBtn');
     if (logoutBtn) logoutBtn.addEventListener('click', () => authService.logout());

diff --git a/assets/js/utils/eventHelpers.js b/assets/js/utils/eventHelpers.js
@@ -0,0 +1,77 @@
+/**
+ * Event Helper Functions
+ */
+
+export function formatDate(dateString) {
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    return new Date(dateString).toLocaleDateString('en-US', options);
+}
+
+export function getEventTypeStyles(type) {
+    const styles = {
+        'career-day': 'bg-purple-100 text-purple-700',
+        'workshop': 'bg-blue-100 text-blue-700',
+        'webinar': 'bg-green-100 text-green-700',
+        'networking': 'bg-yellow-100 text-yellow-700'
+    };
+    return styles[type] || 'bg-gray-100 text-gray-700';
+}
+
+export function getEventTypeIcon(type) {
+    const icons = {
+        'career-day': 'fa-briefcase',
+        'workshop': 'fa-laptop-code',
+        'webinar': 'fa-chalkboard-teacher',
+        'networking': 'fa-handshake'
+    };
+    return icons[type] || 'fa-calendar';
+}
+
+export function getEventTypeLabel(type) {
+    const labels = {
+        'career-day': 'Career Day',
+        'workshop': 'Workshop',
+        'webinar': 'Webinar',
+        'networking': 'Networking'
+    };
+    return labels[type] || 'Event';
+}
+
+export function filterEventsByDate(events, dateRange) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    switch (dateRange) {
+        case 'upcoming':
+            return events.filter(event => new Date(event.date) >= today);
+        case 'this-week':
+            const nextWeek = new Date(today);
+            nextWeek.setDate(today.getDate() + 7);
+            return events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate >= today && eventDate <= nextWeek;
+            });
+        case 'this-month':
+            const nextMonth = new Date(today);
+            nextMonth.setMonth(today.getMonth() + 1);
+            return events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate >= today && eventDate <= nextMonth;
+            });
+        default:
+            return events;
+    }
+}
+
+export function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    const colors = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        info: 'bg-blue-500'
+    };
+    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white z-50 fade-in ${colors[type] || colors.info}`;
+    toast.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>${message}`;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+}