The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a stock ticker tracker

Written by

Bernardo Palos

in

Building a stock ticker tracker involves creating a system that fetches real-time or delayed stock price data and displays it in a user-friendly way. Below is a detailed step-by-step guide to build a simple yet functional stock ticker tracker using web technologies (JavaScript, HTML, CSS) and a free API for stock data.

How to Build a Stock Ticker Tracker

1. Choose a Data Source (Stock API)

You need a reliable source for stock price data. Some popular free or freemium APIs:

  • Alpha Vantage (free tier with API key)

  • Finnhub.io (free tier with API key)

  • IEX Cloud (limited free tier)

  • Yahoo Finance unofficial APIs (community solutions)

For this example, we’ll use Alpha Vantage due to its ease of access.

2. Get an API Key from Alpha Vantage

  • Go to Alpha Vantage

  • Sign up and get a free API key (usually immediate).

3. Setup Basic HTML Structure

Create a simple webpage with an input box for stock symbols and an area to show live stock prices.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stock Ticker Tracker</title>
<style>
  body { font-family: Arial, sans-serif; background: #f9f9f9; padding: 20px; }
  #tracker { max-width: 600px; margin: 0 auto; }
  input { width: 300px; padding: 8px; font-size: 1rem; }
  button { padding: 8px 12px; font-size: 1rem; margin-left: 10px; }
  .stock { background: #fff; padding: 10px; margin: 10px 0; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
  .stock h2 { margin: 0 0 5px; }
  .price { font-size: 1.2rem; font-weight: bold; }
  .change-positive { color: green; }
  .change-negative { color: red; }
</style>
</head>
<body>

<div id="tracker">
  <h1>Stock Ticker Tracker</h1>
  <input id="symbolInput" type="text" placeholder="Enter stock symbol (e.g. AAPL)" />
  <button id="addStockBtn">Add Stock</button>

  <div id="stocksContainer"></div>
</div>

<script src="app.js"></script>
</body>
</html>

4. Create the JavaScript Logic (app.js)

This script will:

  • Take the stock symbol input

  • Fetch stock data from Alpha Vantage

  • Display stock name, price, and price change

  • Refresh prices every 60 seconds

js
const apiKey = 'YOUR_ALPHA_VANTAGE_API_KEY';
const stocksContainer = document.getElementById('stocksContainer');
const addStockBtn = document.getElementById('addStockBtn');
const symbolInput = document.getElementById('symbolInput');

const trackedStocks = {};

addStockBtn.addEventListener('click', () => {
  const symbol = symbolInput.value.trim().toUpperCase();
  if (!symbol) return alert('Please enter a valid stock symbol.');

  if (trackedStocks[symbol]) {
    alert(`${symbol} is already being tracked.`);
    symbolInput.value = '';
    return;
  }

  fetchStockData(symbol);
  symbolInput.value = '';
});

function fetchStockData(symbol) {
  // Alpha Vantage TIME_SERIES_INTRADAY endpoint with 1min interval
  const url = `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${symbol}&interval=1min&apikey=${apiKey}`;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      if (data['Error Message'] || !data['Time Series (1min)']) {
        alert(`Could not fetch data for symbol: ${symbol}`);
        return;
      }

      const timeSeries = data['Time Series (1min)'];
      const latestTimestamp = Object.keys(timeSeries)[0];
      const latestData = timeSeries[latestTimestamp];
      const latestPrice = parseFloat(latestData['4. close']);

      // Find previous close price for comparison (previous timestamp)
      const timestamps = Object.keys(timeSeries);
      const previousTimestamp = timestamps[1];
      const previousData = timeSeries[previousTimestamp];
      const previousPrice = parseFloat(previousData['4. close']);

      const change = latestPrice - previousPrice;
      const changePercent = (change / previousPrice) * 100;

      displayStock(symbol, latestPrice, change, changePercent);
      trackedStocks[symbol] = { price: latestPrice, change, changePercent };

      // Setup auto refresh for this stock
      setTimeout(() => fetchStockData(symbol), 60000);
    })
    .catch(() => alert('Error fetching stock data. Try again later.'));
}

function displayStock(symbol, price, change, changePercent) {
  let stockDiv = document.getElementById(symbol);
  if (!stockDiv) {
    stockDiv = document.createElement('div');
    stockDiv.className = 'stock';
    stockDiv.id = symbol;
    stocksContainer.appendChild(stockDiv);
  }

  stockDiv.innerHTML = `
    <h2>${symbol}</h2>
    <p class="price">$${price.toFixed(2)} 
      <span class="${change >= 0 ? 'change-positive' : 'change-negative'}">
        (${change >= 0 ? '+' : ''}${change.toFixed(2)}, ${changePercent.toFixed(2)}%)
      </span>
    </p>
  `;
}

5. Explanation & Customization

  • The tracker lets you add multiple stocks by symbol.

  • Each stock fetches the latest intraday price data every 60 seconds.

  • It shows current price, change from previous minute, and percent change.

  • Styling highlights positive changes in green and negative in red.

  • You can expand it by adding more info (volume, open, high, low), or switch to other APIs with different endpoints.

6. Run It Locally

  • Replace 'YOUR_ALPHA_VANTAGE_API_KEY' with your actual API key.

  • Save the HTML and JS files.

  • Open the HTML file in a browser.

  • Add stock symbols (like AAPL, TSLA, MSFT) and watch the prices update.

Summary

This approach uses free API data with JavaScript on the client side to build a lightweight stock ticker tracker. For production use, consider server-side caching and better error handling to avoid API limits. You can also build more sophisticated UI/UX with frameworks like React or Vue.

If you’d like, I can help generate a full article explaining this with code examples and SEO-friendly content. Just let me know!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About