Amit Dhamu

Writes Code

FREE F1 Countdown Widget For Your Blog or Website

This widget is now deprecated
Following on from the last post about the Ergast Motorsport Developer API, I decided that for the first time, I would try and build a JavaScript embeddable widget for the masses.

I wanted to build something which slightly resembles the countdown clock on the official Formula1.com website.

I used the same methods for grabbing the data from the API but for the widget, as I was using JavaScript, I built a JSON object from the XML results as the serverResponse expects data to be of a JavaScript friendly format. I used a tutorial by Dr Nic for a guide as how to create a cross-domain safe embeddable widget.

The widget has a default width of 100% so I would advise that you wrap it in a container. The optimum I would suggest would be 240 pixels wide.

// CSS
#f1-widget-container {
    width: 240px;
}
// Script
<div id="f1-widget-container">
    <script src="http://amitd.co/widgets/f1/f1-countdown.min.js"></script>
</div>


Thanks to the Ergast team for making this API available.


formula 1 / f1 / api / ergast / dr nic / embeddable / widget

← Ergast Motorsport Developer API 10 Web Apps For Developers and Designers →