The Pieces That Make a Rate Site Feel Alive

A rates table is information. A site feels alive when the information moves and responds, a ticker sliding across the header, a converter that answers your amount, a chart showing the month’s story. All three shipped on the forex site, and all three are the same appended history table wearing different faces. This post is the three components.

The ticker is a shortcode looping the latest rates into a strip the theme scrolls with CSS animation, one query, one loop:

function pfr_sc_ticker() {
    $h = '<div class="pfr-ticker"><div class="pfr-ticker-track">';
    foreach (pfr_currencies() as $code => $name) {
        $r = pfr_get_latest($code, 'open_market');
        if (!$r) { continue; }
        $h .= sprintf('<span class="pfr-tick">%s %s</span>',
            esc_html($code), number_format((float) $r->selling, 2));
    }
    return $h . '</div></div>';
}

The converter is the one place calculation moved into the browser, because a converter must respond per keystroke without a page trip. PHP prints the current rates into the page as data attributes, and a few lines of JavaScript do the arithmetic:

document.getElementById('pfr-amount').addEventListener('input', function () {
    var rate = parseFloat(document.getElementById('pfr-currency')
                  .selectedOptions[0].dataset.rate);
    var amount = parseFloat(this.value) || 0;
    document.getElementById('pfr-result').textContent =
        'PKR ' + (amount * rate).toLocaleString(undefined, {maximumFractionDigits: 0});
});

The rate itself stays server-supplied, JavaScript only multiplies, so the browser can never invent a number, it can only apply the one the site published. And the chart is the appended-history decision paying its dividend, sixty days of a currency is one query, rendered by a charting library from a JSON array the shortcode prints:

$rows = $wpdb->get_results($wpdb->prepare(
    'SELECT DATE(recorded_at) d, AVG(selling) v FROM ' . $t . '
     WHERE currency = %s AND market_type = %s
       AND recorded_at > DATE_SUB(UTC_TIMESTAMP(), INTERVAL %d DAY)
     GROUP BY DATE(recorded_at) ORDER BY d',
    $code, $market, $days
));

AVG per day smooths multiple captures into one honest daily point. Three faces, one table, and the pattern to keep is the division, PHP owns the truth, the browser owns the responsiveness, and history owns the story, none of the three needed new data, only new queries.

A few things people ask me about this

Should the converter fetch live rates by AJAX? Not for daily-updated rates, printing them into the page is simpler and identical in freshness. AJAX earns its place when rates change more often than pages are loaded.

Why average the chart’s daily points? Because multiple captures per day would zigzag the line with noise. One averaged point per day tells the trend truthfully at chart scale.

Next

The site worked and felt alive, but a money site also has to look trustworthy, and I found that look somewhere unexpected. The borrowed design is the next post.