DEV Community

200 OK
200 OK

Posted on

Build a US Gas Price Tracker in 15 Minutes with JavaScript

#api #javascript #tutorial #webdev

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

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)