The Office Random Info API Project

Overview

This beginner-friendly web app displays random information from The Office TV show using two endpoints from The Office API:

1. Characters – Random character info (name, actor, jobs, workplace, first episode).
2. Episodes – Random episode info (title, summary, air date, season).

Users can navigate between character and episode views using the buttons.

The project uses HTML, CSS, and JavaScript and fetches data dynamically from the API.

---

Features

• Fetches random character information from the /characters endpoint.
• Fetches random episode information from the /episodes endpoint.
• Navigation buttons for switching between character and episode info.
• Dynamic GET requests on each click. Only used to retrieve necessary data.
• Basic styling with a background image from the show.
• Dates formatted in a US human-readable format using a helper function.

---

Setup Instructions (Run Locally)

1. Clone or download this repository to your local machine.

2. Open the project folder in VS Code (or any code editor).

3. Install Live Server (optional but recommended):

   • In VS Code, go to Extensions → search for Live Server → Install.

4. Run the app:

   • Right-click index.html → Open with Live Server
   • Or simply open index.html in your web browser (Chrome, Firefox, etc.)

5. Use the buttons:

   • Click Random Character to see a random character info.
   • Click Random Episode to see a random episode info.

6. Enjoy the app:

   • Each button click fetches new data from the API.

---

File Structure

Open-API-Project/

├─ index.html # Main HTML page
├─ css/
│ └─ index.css # Stylesheet
├─ js/
│ ├─ index.js # Main JavaScript file
│ └─ helpers.js # Helper functions (e.g., format date)
├─ assets/
│ └─ ... # Background image and other assets
└─ README.md # This file

---

Helpers (Date Formatting)

• helpers.js contains a simple function to convert API dates into MM/DD/YYYY format:

// helpers.js
export function formatDate(dateString) {
  if (!dateString) return null;
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    month: '2-digit',
    day: '2-digit',
    year: 'numeric'
  });
}

• You can import it in your index.js like this:

// index.js
import { formatDate } from './helpers.js';

 const airDate = formatDate(randomEp.airDate)

Notes

If any character or episode info is unknown, it will not display.

Background image uses a semi-transparent overlay so text is readable.

All fetch requests handle errors gracefully in the console.

Credits

API: The Office API

Background Image: The Office fan background

Demo Video

Watch the demonstration of this project on Loom.

Project by Jennifer Peterson, © 2025