Bored API

Entertainment

Beginner

Overview

Free API for activity suggestions to cure boredom

Integration Guide

Step 1: Understanding the API

The Bored API is a free, public API that doesn't require authentication. It provides random activity suggestions to help cure boredom, with options to filter by type, number of participants, price, and accessibility.

Step 2: Set Up Your Project

Create the necessary files for your activity suggestion application:

index.html - The HTML structure
styles.css - CSS for styling
script.js - JavaScript for API integration

Step 3: Implement the Code

Copy the following code into your project files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bored? Find Something To Do!</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Bored? Find Something To Do!</h1>
    
    <div class="activity-container">
      <div class="activity-card">
        <h2 id="activity-title">Ready for a suggestion?</h2>
        <p id="activity-description">Click the button below to get an activity suggestion.</p>
        <div id="activity-details" class="activity-details hidden">
          <div class="detail">
            <span class="label">Type:</span>
            <span id="activity-type"></span>
          </div>
          <div class="detail">
            <span class="label">Participants:</span>
            <span id="activity-participants"></span>
          </div>
          <div class="detail">
            <span class="label">Price:</span>
            <div id="activity-price-bar" class="price-bar">
              <div id="activity-price-indicator" class="price-indicator"></div>
            </div>
          </div>
          <div class="detail">
            <span class="label">Accessibility:</span>
            <div id="activity-accessibility-bar" class="accessibility-bar">
              <div id="activity-accessibility-indicator" class="accessibility-indicator"></div>
            </div>
          </div>
        </div>
      </div>
      
      <button id="get-activity-btn">Find Something To Do</button>
    </div>
    
    <div class="filters-container">
      <h2>Filters</h2>
      <div class="filters">
        <div class="filter-group">
          <label for="type-select">Activity Type:</label>
          <select id="type-select">
            <option value="">Any Type</option>
            <option value="education">Education</option>
            <option value="recreational">Recreational</option>
            <option value="social">Social</option>
            <option value="diy">DIY</option>
            <option value="charity">Charity</option>
            <option value="cooking">Cooking</option>
            <option value="relaxation">Relaxation</option>
            <option value="music">Music</option>
            <option value="busywork">Busywork</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label for="participants-select">Participants:</label>
          <select id="participants-select">
            <option value="">Any Number</option>
            <option value="1">1 Person</option>
            <option value="2">2 People</option>
            <option value="3">3 People</option>
            <option value="4">4 People</option>
            <option value="5">5+ People</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label for="price-select">Price Range:</label>
          <select id="price-select">
            <option value="">Any Price</option>
            <option value="free">Free</option>
            <option value="low">Low Cost</option>
            <option value="medium">Medium Cost</option>
            <option value="high">High Cost</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label for="accessibility-select">Accessibility:</label>
          <select id="accessibility-select">
            <option value="">Any Level</option>
            <option value="high">High (Easy to access)</option>
            <option value="medium">Medium</option>
            <option value="low">Low (Harder to access)</option>
          </select>
        </div>
      </div>
    </div>
    
    <div class="saved-activities">
      <h2>Saved Activities</h2>
      <div id="saved-list" class="saved-list">
        <p class="empty-message">No saved activities yet. Click the "Save" button when you find an activity you like!</p>
      </div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

Step 4: Test Your Implementation

Open your HTML file in a browser to test your activity suggestion application. You should be able to:

Get random activity suggestions
Filter activities by type, participants, price, and accessibility
Save activities you're interested in
Remove saved activities

Error Handling

Common Errors

404 Not Found: Invalid endpoint
No Activity Found: The API may return an error when no activity matches the filters
Network Errors: Connection issues or API downtime

Filter Combinations

Some combinations of filters might not yield any results. For example, there might not be any free activities for 5 participants in the cooking category.

Best Practice

When implementing filters, provide clear feedback to users when no activities match their criteria. Suggest trying different filter combinations to help them find suitable activities.

API Details

Base URL: https://www.boredapi.com/api
Authentication: None
Documentation: Official Docs

Endpoints

GET
/activity
Get a random activity suggestion
GET
/activity?type={type}
Get an activity of a specific type
Parameters
- type*
  string - Type of activity (education, recreational, social, diy, charity, cooking, relaxation, music, busywork)
GET
/activity?participants={participants}
Get an activity for a specific number of participants
Parameters
- participants*
  number - Number of participants (1-5)
GET
/activity?minprice={minprice}&maxprice={maxprice}
Get an activity within a price range
Parameters
- minprice
  number - Minimum price (0.0-1.0)
- maxprice
  number - Maximum price (0.0-1.0)
GET
/activity?accessibility={accessibility}
Get an activity with a specific accessibility level
Parameters
- accessibility*
  number - Accessibility level (0.0-1.0, where 0 is most accessible)