Wonder Learning

Defined a JavaScript data model for the course catalog as a flat array of course objects. Each course contains a lessons array, making the entire platform content model self-contained in a single file that any JavaScript module can import.

// course-data.js
const courses = [
  {
    id: 'web-101',
    title: 'Introduction to Web Development',
    category: 'web',
    thumbnail: 'images/web-101.jpg',
    description: 'Learn HTML, CSS, and JavaScript fundamentals.',
    lessons: [
      { id: 'web-101-l1', title: 'What is the Web?',      videoId: 'dQw4w9WgXcQ', duration: '8:24' },
      { id: 'web-101-l2', title: 'Your First HTML Page',  videoId: 'UB1O30fR-EE', duration: '12:10' },
      { id: 'web-101-l3', title: 'Styling with CSS',      videoId: 'yfoY53QXEnI', duration: '15:33' },
    ]
  },
  // ... more courses
];

The catalog page renders course cards from the data array using a template function that returns an HTML string. innerHTML is used to insert the rendered cards into the grid container. Each card's anchor link encodes the course ID as a URL query parameter (?id=web-101) so the course detail page can read it on load.

// catalog.js
function renderCard(course) {
  const progress = getProgress(course.id);
  const pct = Math.round((progress.completed.size / course.lessons.length) * 100);
  return `
    <article class="course-card" data-category="${course.category}">
      <img src="${course.thumbnail}" alt="${course.title}" loading="lazy">
      <div class="course-card__body">
        <h3><a href="course.html?id=${course.id}">${course.title}</a></h3>
        <span class="course-card__category">${course.category}</span>
        <div class="progress-bar">
          <div class="progress-bar__fill" style="width:${pct}%"></div>
        </div>
        <span class="progress-label">${pct}% complete</span>
      </div>
    </article>`;
}

const grid = document.getElementById('course-grid');
grid.innerHTML = courses.map(renderCard).join('');

The course detail page reads the course ID from URLSearchParams, finds the matching course in the data array, renders the lesson list, and initialises the YouTube player with the first lesson's video ID. Clicking a lesson item in the list calls player.loadVideoById(videoId) on the YT.Player instance to switch the playing video without reloading the page.

// player.js
const params = new URLSearchParams(location.search);
const course = courses.find(c => c.id === params.get('id'));

let player;
window.onYouTubeIframeAPIReady = () => {
  player = new YT.Player('video-container', {
    videoId: course.lessons[0].videoId,
    events: {
      onStateChange: e => {
        if (e.data === YT.PlayerState.ENDED) {
          markComplete(course.id, currentLessonId);
        }
      }
    }
  });
};

lessonItems.forEach(item => {
  item.addEventListener('click', () => {
    currentLessonId = item.dataset.lessonId;
    player.loadVideoById(item.dataset.videoId);
  });
});

The progress module reads and writes a JSON object in localStorage keyed as 'wl-progress'. The stored structure is a flat object where each key is a course ID and the value is an array of completed lesson IDs. The module exposes getProgress(courseId) and markComplete(courseId, lessonId) functions used by all other modules.

// progress.js
const STORAGE_KEY = 'wl-progress';

function loadAll() {
  try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}; }
  catch { return {}; }
}

function getProgress(courseId) {
  const all = loadAll();
  return { completed: new Set(all[courseId] || []) };
}

function markComplete(courseId, lessonId) {
  const all = loadAll();
  const completed = new Set(all[courseId] || []);
  completed.add(lessonId);
  all[courseId] = [...completed];
  localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
  updateProgressUI(courseId, completed);
}

Filter buttons with data-filter attributes show/hide course cards by comparing the filter value to each card's data-category attribute — the same pattern used across multiple projects in this portfolio. The active filter state is preserved in a module-level variable and reapplied after the catalog re-renders to keep the filter consistent after a sort or search operation.

The course catalog uses grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). The course detail page uses a two-column Grid layout with the lesson list sidebar at a fixed 280 px and the video player taking the remaining width. On viewports below 768 px, the sidebar stacks above the player in a single column.

/* Course detail — two-column layout */
.course-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .course-layout { grid-template-columns: 1fr; }
}

/* Video player responsive container */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-wrapper iframe { width: 100%; height: 100%; }