Quotable API

Entertainment

Beginner

Overview

Free API for quotes from famous historical figures

Integration Guide

Step 1: Understanding the API

The Quotable API is a free, public API that doesn't require authentication. It provides random quotes, a searchable database of quotes, and filtering by tags, authors, and length.

Step 2: Set Up Your Project

Create the necessary files for your quotes 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>Inspirational Quotes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Inspirational Quotes</h1>
    
    <div class="quote-container">
      <div class="quote-card">
        <blockquote id="quote-text"></blockquote>
        <p id="quote-author"></p>
        <div id="quote-tags"></div>
      </div>
      
      <button id="new-quote-btn">New Quote</button>
    </div>
    
    <div class="filter-container">
      <h2>Filter Quotes</h2>
      <div class="filter-options">
        <div class="filter-group">
          <label for="tag-select">Filter by Tag:</label>
          <select id="tag-select">
            <option value="">Any Tag</option>
            <!-- Tags will be populated by JavaScript -->
          </select>
        </div>
        
        <div class="filter-group">
          <label for="length-select">Quote Length:</label>
          <select id="length-select">
            <option value="">Any Length</option>
            <option value="short">Short (< 50 chars)</option>
            <option value="medium">Medium (50-100 chars)</option>
            <option value="long">Long (> 100 chars)</option>
          </select>
        </div>
      </div>
    </div>
    
    <div class="browse-container">
      <h2>Browse Quotes</h2>
      <div id="quotes-list"></div>
      <div class="pagination">
        <button id="prev-page" disabled>Previous</button>
        <span id="page-info">Page 1</span>
        <button id="next-page">Next</button>
      </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 quotes application. You should be able to:

Get a random quote by clicking the "New Quote" button
Filter quotes by tag
Filter quotes by length
Browse through a paginated list of quotes

Error Handling

Common Errors

404 Not Found: Invalid endpoint or resource not found
400 Bad Request: Invalid query parameters
Network Errors: Connection issues or API downtime

Rate Limiting

The Quotable API doesn't explicitly state rate limits, but as with any public API, it's good practice to implement reasonable request limits in your application.

Best Practice

To be a good API citizen, avoid making excessive requests in short periods. Consider implementing caching for frequently accessed data like tags and authors.

API Details

Base URL: https://api.quotable.io
Authentication: None
Documentation: Official Docs

Endpoints

GET
/random
Get a random quote
Parameters
- tags
  string - Filter random quotes by tag(s)
- maxLength
  number - Maximum length in characters
- minLength
  number - Minimum length in characters
GET
/quotes
Get a paginated list of all quotes
Parameters
- page
  number - Page number (default: 1)
- limit
  number - Number of results per page (default: 20, max: 150)
- tags
  string - Filter quotes by tag(s)
- author
  string - Filter quotes by author
GET
/tags
Get a list of all tags
GET
/authors
Get a paginated list of all authors
Parameters
- page
  number - Page number (default: 1)
- limit
  number - Number of results per page (default: 20, max: 150)