DJS01: Vanilla JS Podcast App

Overview

You will design and build a responsive web application that allows users to browse podcast shows on a landing page and view detailed information in a modal. The application should display clear, concise previews of podcast shows and offer additional information through a modal pop-up, all without navigating away from the page. Your app should showcase clean code architecture and strong UI/UX design while following JavaScript best practices.

---

Core Objectives

1. Landing Page – Podcast Previews

• Display a list of podcast shows on the landing page.
• Each podcast preview must include:
  • Cover image
  • Show title
  • Number of seasons
  • Genre names
  • Last updated date (in a human-readable format)

2. Modal View – Show Details

• When a user clicks on a podcast preview, open a modal.
• The modal should include:
  • Larger cover image
  • Podcast title
  • Description of the show
  • Genre tags
  • Last updated date (readable format)
  • List of season titles
  • Number of episodes in each season
• Include a clear and accessible way to close the modal.

3. Code Architecture & Best Practices

• Use object-oriented programming (OOP) where appropriate.
• Apply functional programming principles to ensure modularity and predictability.
• Follow SOLID design principles for clean, maintainable code.
• Abstract repeated logic into reusable functions or classes.
• Add JSDoc comments for major functions and modules.

---

Technical Requirements

• Use HTML, CSS (or Tailwind), and JavaScript.
• No page reloads: Use JavaScript to handle modal behaviour and data rendering.
• Ensure all UI states (modal open/close, hover effects, etc.) work smoothly.
• Ensure all data is displayed in a readable and accessible format.

---

Design & UX Goals

• Visually appealing UI with clear layout and hierarchy.
• Use a consistent colour scheme, typography, spacing, and sizing.
• Accessibility considerations (contrast, font readability, responsive buttons).
• App should be fully responsive on desktop, tablet, and mobile.

Make sure to dive into the wireframe reference images folder for guidance on how to build the UI structure. Note that the UI wireframes for both Desktop and Mobile are included.

---

Deliverables

• A fully functional, responsive podcast preview web application.
• Clean, well-commented source code (HTML, CSS, JS).