A component-based carousel presentation of election results data from an external (JSON) API using pure React.

Enables scrolling through the election results for all ridings using the Next and Back controls (via mouse or keyboard), displaying the number of votes and automatically calculating the percentage of the vote won by each candidate in each riding.

Results data is automatically checked for updates every 5 minutes (by default).

Figure 1: screenshot of elections.html page

Available at: https://hfagerlund.github.io/elections-carousel-component/

# clone the repo
$ git clone https://github.com/hfagerlund/elections-carousel-component.git

# install dependencies
$ yarn

# launch local server (for data feed)
$ http-server

## browse to http://127.0.0.1:8080/elections.html

The following props can be set on the App component in order to customize it:

Example 1 - To display a (custom) title of '2011 Election Results', with the (default) status message 'Final results reported. All polls are now closed.', modify /src/js/elections/index.jsx as shown below:

index.jsx -

import React from 'react';
import { render } from 'react-dom';

import App from './components/App.jsx';

render(
  <App
    componentTitle="2011 Election Results"
    resultUpdatesEnabled={false}
  />,
  document.getElementById('app')
);

Example 2 - Update data results at 3 minute intervals (instead of the default 5 mins.):

index.jsx -

// ...

render(<App updateIntervalInMilliseconds={180000} />, document.getElementById('app'));

Example 3 - Use all default settings:

index.jsx -

// ...

render(<App />, document.getElementById('app'));

For a development environment:

$ yarn run dev

For a production environment:

$ yarn run build:production

Run all tests:

$ yarn run test

Copyright (c) 2018 Heini Fagerlund. Licensed under the BSD-3-Clause license.