Forem: 200 OK

Build a US Gas Price Tracker in 15 Minutes with JavaScript

200 OK — Tue, 10 Mar 2026 22:17:00 +0000

Gas prices vary wildly by state — over $2/gallon difference between California and Mississippi. Whether you're building a travel app, a fleet management tool, or just a personal finance dashboard — real-time fuel price data by state is surprisingly hard to find in a clean API.

In this tutorial, I'll show you how to build a US gas price tracker using vanilla JavaScript and the US Fuel & Energy Price API on RapidAPI.

What We're Building

A tracker that shows:

National average gas prices (regular, midgrade, premium, diesel)
State-by-state price comparison with a sortable list
Gas vs electricity cost comparison by state
Historical price trend for a selected state

No frameworks. Just HTML, CSS, and vanilla JavaScript.

Prerequisites

A free RapidAPI account (sign up here)
Subscribe to the US Fuel & Energy Price API (free tier — 100 requests/day)
A text editor and browser

Step 1: Set Up the HTML

Create an index.html file:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>US Gas Price Tracker</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
    .container { max-width: 720px; margin: 0 auto; }
    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; }

    .national-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; }
    .price-item { background: #0f172a; border-radius: 8px; padding: 1rem; text-align: center; }
    .price-item .price { font-size: 1.5rem; font-weight: 700; color: #22c55e; }
    .price-item .type { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; text-transform: capitalize; }

    .controls { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .controls select, .controls button { padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 0.9rem; }
    .controls select { flex: 1; }
    .controls button { background: #22c55e; color: #0f172a; font-weight: 600; border: none; cursor: pointer; }
    .controls button:hover { background: #16a34a; }

    .state-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .comparison-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #334155; }
    .comparison-row:last-child { border-bottom: none; }
    .comparison-row .state-name { font-weight: 500; }
    .comparison-row .state-price { font-weight: 700; font-family: monospace; font-size: 1.1rem; }
    .comparison-row .state-price.high { color: #ef4444; }
    .comparison-row .state-price.mid { color: #f59e0b; }
    .comparison-row .state-price.low { color: #22c55e; }

    .energy-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .energy-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
    .energy-stat { background: #0f172a; border-radius: 8px; padding: 1rem; text-align: center; }
    .energy-stat .value { font-size: 1.3rem; font-weight: 700; }
    .energy-stat .label { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }

    .hidden { display: none; }
    .loading { text-align: center; padding: 2rem; color: #64748b; }

    @media (max-width: 600px) {
      .price-grid { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>US Gas Price Tracker</h1>
    <div id="national" class="hidden"></div>
    <div class="controls">
      <select id="stateSelect">
        <option value="CA">California</option>
        <option value="TX">Texas</option>
        <option value="NY">New York</option>
        <option value="FL">Florida</option>
        <option value="IL">Illinois</option>
        <option value="PA">Pennsylvania</option>
        <option value="OH">Ohio</option>
        <option value="GA">Georgia</option>
        <option value="WA">Washington</option>
        <option value="CO">Colorado</option>
        <option value="MS">Mississippi</option>
      </select>
      <button id="compareBtn">Compare</button>
    </div>
    <div id="stateResults" class="hidden"></div>
    <div id="loading" class="loading">Loading national averages...</div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Build an Air Quality Dashboard in 15 Minutes with JavaScript

200 OK — Tue, 10 Mar 2026 22:16:29 +0000

Air quality is becoming a critical health concern worldwide. Whether you're building a weather app, a health tracker, or a smart home dashboard — real-time air quality data makes your app more valuable.

In this tutorial, I'll show you how to build a live air quality dashboard using vanilla JavaScript and the Air Quality Index API on RapidAPI.

What We're Building

A dashboard that shows:

Current AQI (Air Quality Index) for any city
Pollutant breakdown (PM2.5, PM10, O3, NO2, SO2, CO)
Health recommendations based on current conditions
Color-coded risk levels (Good → Hazardous)

Prerequisites

Basic JavaScript knowledge
A free RapidAPI account (sign up here)
A text editor and browser

Step 1: Get Your API Key (1 minute)

Go to the Air Quality Index API on RapidAPI
Click Subscribe to Test and select the Free plan (100 requests/day)
Copy your X-RapidAPI-Key from the code snippets section

Step 2: Build the HTML (5 minutes)

Create an index.html file:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Air Quality Dashboard</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f0f2f5; padding: 2rem;
    }
    .dashboard {
      max-width: 600px; margin: 0 auto;
    }
    h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; }
    .search {
      display: flex; gap: 8px; margin-bottom: 1.5rem;
    }
    .search input {
      flex: 1; padding: 10px 14px; border: 1px solid #ddd;
      border-radius: 8px; font-size: 1rem;
    }
    .search button {
      padding: 10px 20px; background: #2563eb; color: white;
      border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;
    }
    .search button:hover { background: #1d4ed8; }
    .aqi-card {
      background: white; border-radius: 12px; padding: 2rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center;
      margin-bottom: 1.5rem;
    }
    .aqi-value {
      font-size: 4rem; font-weight: 800; line-height: 1;
    }
    .aqi-label {
      font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem;
    }
    .aqi-advice {
      color: #666; margin-top: 0.75rem; font-size: 0.95rem;
      line-height: 1.4;
    }
    .pollutants {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .pollutant {
      background: white; border-radius: 10px; padding: 1rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center;
    }
    .pollutant .name { font-size: 0.75rem; color: #999; text-transform: uppercase; }
    .pollutant .value { font-size: 1.5rem; font-weight: 700; margin: 4px 0; }
    .pollutant .unit { font-size: 0.7rem; color: #999; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <div class="dashboard">
    <h1>Air Quality Dashboard</h1>
    <div class="search">
      <input type="text" id="city" placeholder="Enter city name..." value="London">
      <button id="searchBtn">Check AQI</button>
    </div>
    <div id="results" class="hidden">
      <div class="aqi-card" id="aqiCard">
        <div class="aqi-value" id="aqiValue">--</div>
        <div class="aqi-label" id="aqiLabel"></div>
        <div class="aqi-advice" id="aqiAdvice"></div>
      </div>
      <div class="pollutants" id="pollutants"></div>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Build a UV Exposure Tracker in 15 Minutes with JavaScript

200 OK — Tue, 10 Mar 2026 22:10:55 +0000

Skin cancer is the most common cancer worldwide, yet most apps still ignore UV data. Whether you're building a health tracker, a weather app, or a fitness platform — real-time UV index data with personalized safe exposure times makes your app genuinely useful.

In this tutorial, I'll show you how to build a UV exposure tracker using vanilla JavaScript and the UV Index & Sun Exposure API on RapidAPI.

What We're Building

A tracker that shows:

Current UV index with color-coded risk level
Health advice (sunscreen, shade, protective clothing)
Safe exposure time personalized by Fitzpatrick skin type
Vitamin D synthesis estimate
3-day hourly UV forecast chart

No frameworks. Just HTML, CSS, and vanilla JavaScript.

Prerequisites

A free RapidAPI account (sign up here)
Subscribe to the UV Index & Sun Exposure API (free tier — 100 requests/day)
A text editor and browser

Step 1: Set Up the HTML

Create an index.html file:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UV Exposure Tracker</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
    .container { max-width: 640px; margin: 0 auto; }
    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; }

    .controls { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .controls input, .controls select, .controls button { padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 0.9rem; }
    .controls input { flex: 1; min-width: 80px; }
    .controls button { background: #f59e0b; color: #0f172a; font-weight: 600; border: none; cursor: pointer; }
    .controls button:hover { background: #d97706; }

    .uv-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .uv-main { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
    .uv-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; }
    .uv-value { font-size: 2rem; line-height: 1; }
    .uv-label { font-size: 0.75rem; margin-top: 4px; text-transform: uppercase; }
    .uv-details h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .uv-details p { font-size: 0.85rem; color: #94a3b8; line-height: 1.5; }

    .exposure-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .exposure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
    .exposure-stat { background: #0f172a; border-radius: 8px; padding: 1rem; text-align: center; }
    .exposure-stat .value { font-size: 1.5rem; font-weight: 700; color: #f59e0b; }
    .exposure-stat .label { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }

    .forecast-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; }
    .forecast-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 1rem; }
    .forecast-bar { flex: 1; border-radius: 4px 4px 0 0; position: relative; min-width: 8px; }
    .forecast-bar .time { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: #64748b; white-space: nowrap; }

    .hidden { display: none; }
    .loading { text-align: center; padding: 2rem; color: #64748b; }
  </style>
</head>
<body>
  <div class="container">
    <h1>UV Exposure Tracker</h1>
    <div class="controls">
      <input type="text" id="lat" placeholder="Latitude" value="40.7128">
      <input type="text" id="lon" placeholder="Longitude" value="-74.0060">
      <select id="skinType">
        <option value="1">Type I — Very fair</option>
        <option value="2" selected>Type II — Fair</option>
        <option value="3">Type III — Medium</option>
        <option value="4">Type IV — Olive</option>
        <option value="5">Type V — Brown</option>
        <option value="6">Type VI — Very dark</option>
      </select>
      <button id="checkBtn">Check UV</button>
    </div>
    <div id="results" class="hidden"></div>
    <div id="loading" class="loading hidden">Loading UV data...</div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Build a Currency Converter in 10 Minutes with JavaScript

200 OK — Tue, 10 Mar 2026 22:10:54 +0000

Ever needed to add currency conversion to your app? Whether you're building an e-commerce platform, a travel app, or a finance dashboard — you'll need reliable exchange rates.

In this tutorial, I'll show you how to build a working currency converter in under 10 minutes using vanilla JavaScript and the Currency Exchange Rates API on RapidAPI.

What We're Building

A simple web-based currency converter that:

Converts between 31 major currencies
Shows real-time rates from the European Central Bank (ECB)
Updates instantly when you change the amount or currency

Prerequisites

Basic JavaScript knowledge
A free RapidAPI account (sign up here)
A text editor and browser

Step 1: Get Your API Key (1 minute)

Head to the Currency Exchange Rates API on RapidAPI
Click Subscribe to Test and select the Free plan (100 requests/day — plenty for development)
Copy your X-RapidAPI-Key from the code snippets section

Step 2: Build the HTML (3 minutes)

Create an index.html file:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Currency Converter</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      display: flex; justify-content: center; align-items: center;
      min-height: 100vh; background: #f0f2f5;
    }
    .converter {
      background: white; padding: 2rem; border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 400px;
    }
    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
    .field { margin-bottom: 1rem; }
    label { display: block; font-size: 0.875rem; color: #666; margin-bottom: 4px; }
    input, select {
      width: 100%; padding: 10px 12px; border: 1px solid #ddd;
      border-radius: 8px; font-size: 1rem;
    }
    .result {
      text-align: center; padding: 1.5rem; background: #f8f9fa;
      border-radius: 8px; margin-top: 1rem;
    }
    .result .amount { font-size: 2rem; font-weight: 700; color: #2563eb; }
    .result .rate { font-size: 0.875rem; color: #666; margin-top: 4px; }
    .swap-btn {
      display: block; margin: 0.5rem auto; background: none;
      border: 1px solid #ddd; border-radius: 50%; width: 36px;
      height: 36px; cursor: pointer; font-size: 1.2rem;
    }
    .swap-btn:hover { background: #f0f2f5; }
  </style>
</head>
<body>
  <div class="converter">
    <h1>💱 Currency Converter</h1>
    <div class="field">
      <label>Amount</label>
      <input type="number" id="amount" value="100" min="0" step="0.01">
    </div>
    <div class="field">
      <label>From</label>
      <select id="fromCurrency"></select>
    </div>
    <button class="swap-btn" id="swap" title="Swap currencies">⇅</button>
    <div class="field">
      <label>To</label>
      <select id="toCurrency"></select>
    </div>
    <div class="result">
      <div class="amount" id="resultAmount">—</div>
      <div class="rate" id="resultRate"></div>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

5 Free APIs Every Developer Should Know About in 2026

200 OK — Mon, 09 Mar 2026 09:28:04 +0000

Building side projects? You know the pain — most useful data APIs either cost $50+/month or have laughably small free tiers.

I built a suite of 5 free APIs for the data developers actually need. Each one has a free tier of 100 requests/day (enough for prototyping and small apps), and paid tiers starting at $9.99/month if you need more.

All are hosted on RapidAPI with full documentation and code examples.

1. Currency Exchange Rate API

What: Real-time and historical exchange rates for 31 currencies, sourced from the European Central Bank.

Endpoints: Latest rates, historical (back to 1999!), currency conversion, time series, supported currencies list.

Why it's different: Most currency APIs charge $15-50/month for basic access. This one is free for 100 req/day and $9.99/month for production use. Sub-50ms response times on Cloudflare's edge network.

Use it for: Currency converters, multi-currency e-commerce, finance dashboards, travel apps.

Try it: Currency Exchange Rate API on RapidAPI

const response = await fetch('https://currency-exchange-rates13.p.rapidapi.com/rates/latest', {
  headers: {
    'x-rapidapi-key': 'YOUR_KEY',
    'x-rapidapi-host': 'currency-exchange-rates13.p.rapidapi.com'
  }
});
const data = await response.json();
console.log(data.rates.USD); // 1.0842

2. Air Quality Index (AQI) API

What: Real-time air quality data for any city — AQI score, individual pollutant readings (PM2.5, PM10, O3, NO2, SO2, CO), and health recommendations.

Endpoints: Current AQI by city, city pollution rankings, historical data, health advice.

Why it's different: Most AQI APIs just give you a number. This one includes health recommendations in every response (e.g., "Sensitive groups should limit outdoor exertion") and lets you rank cities by pollution levels.

Use it for: Weather apps, health trackers, smart home dashboards, data visualization projects.

Try it: Air Quality Index API on RapidAPI

import requests

url = "https://air-quality-index2.p.rapidapi.com/current"
querystring = {"city": "London"}
headers = {
    "x-rapidapi-key": "YOUR_KEY",
    "x-rapidapi-host": "air-quality-index2.p.rapidapi.com"
}
response = requests.get(url, headers=headers, params=querystring)
print(response.json())

3. UV Index & Sun Exposure API

What: Current UV index, 7-day hourly forecast, and — the unique part — safe sun exposure times calculated by Fitzpatrick skin type with vitamin D synthesis estimates.

Endpoints: Current UV, forecast, safe exposure calculator, vitamin D estimates, historical UV data.

Why it's different: No other UV API calculates personalized safe exposure times for all 6 Fitzpatrick skin types or estimates vitamin D production. It's health data, not just weather data.

Use it for: Health/fitness apps, travel planners, dermatology tools, outdoor sports platforms.

Try it: UV Index & Sun Exposure API on RapidAPI

curl -X GET "https://uv-index-sun-exposure.p.rapidapi.com/uv/current?lat=40.7128&lng=-74.006" \
  -H "x-rapidapi-key: YOUR_KEY" \
  -H "x-rapidapi-host: uv-index-sun-exposure.p.rapidapi.com"

4. US Fuel & Energy Price API

What: Gas prices (regular, midgrade, premium, diesel) and electricity rates (residential, commercial, industrial) for all 50 US states. Historical data back to 1990.

Endpoints: Current gas prices by state, national averages, electricity rates by sector, historical trends.

Why it's different: 35+ years of government-sourced data (EIA) in one API. No other free-tier API combines gas and electricity data. Great for data-heavy projects.

Use it for: Fleet management, travel apps, real estate (utility cost comparisons), EV cost calculators, data journalism.

Try it: US Fuel & Energy Price API on RapidAPI

const response = await fetch('https://us-fuel-energy-prices.p.rapidapi.com/gas/prices/state/CA', {
  headers: {
    'x-rapidapi-key': 'YOUR_KEY',
    'x-rapidapi-host': 'us-fuel-energy-prices.p.rapidapi.com'
  }
});
const data = await response.json();
console.log(`California regular gas: $${data.regular}/gallon`);

5. Sales Tax & VAT Validation API (Coming Soon)

What: US state/local sales tax rates, EU VAT rates, and Canadian GST/HST/PST — plus EU VAT number validation.

Use it for: E-commerce checkout, invoicing, tax compliance, SaaS billing with regional tax handling.

Listing going live soon — follow Two Hundred OK on RapidAPI to get notified.

Why I Built These

I kept running into the same problem: I needed simple data for a side project and every API was either expensive, unreliable, or had a 10-request/day free tier. So I built a suite of APIs on Cloudflare Workers (global edge, fast responses) with genuinely useful free tiers.

All 5 APIs share the same design philosophy:

Generous free tier (100 req/day — enough to prototype and run small apps)
Simple, consistent JSON responses
Official data sources (ECB, EIA, government APIs)
Fast (Cloudflare edge, sub-100ms globally)

If you try any of them, I'd love to hear what you're building. Drop a comment!