Skip to content
Real time javascript web dashboard
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
bg-hero.jpg
bg-subheader.jpg
cbUtils.js
exercise.css
exercise.html
exercise.js

README.md

Chartbeat Front-end Engineering Exercise

By Jason Schapiro

See the live version on minibeat.jasonschapiro.com

A web app called Minibeat that shows the top ten visited pages for gizmodo.com, sorted by current visitor number. Use the provided file structure as a starting point. Modify the file structure to what you think is best.

Each page title in the list (found in the API via page.title) should be preceded by its current visitor number (found via page.stats.people).

The list should poll for updates every 5 seconds and update the DOM to reflect the new data.

When an item in the list is clicked, the right pane should show a list of its top referers (found via page.stats.toprefs). Each referer should include its number of visitors (found via topref.visitors).

It should be formatted like the following wireframe:

-----------------------------------------------------------
| Minibeat                                                |
-----------------------------------------------------------
| ### Page 1                | Page 3 details              |
| ### Page 2                |-----------------------------|
| ### Page 3              > | ### Referer 1               |
| ### Page 4                | ### Referer 2               |
| ### Page 5                | ### Referer 3               |
| ### Page 6                | ### Referer 4               |
| ### Page 7                | ### Referer 5               |
| ### Page 8                |                             |
| ### Page 9                |                             |
| ### Page 10               |                             |
-----------------------------------------------------------

Rules:

  • Do not use jQuery or any other frameworks/languages (i.e. use pure JavaScript and CSS).

  • We are interested in how you structure large applications.

  • Do just enough so we can evaluate your understanding of JavaScript, HTML and CSS.

  • It should work in modern (HTML5) browsers. Focus on Chrome, Firefox, and Safari. IE compatibility is nice but don't spend too much time on it.

NOTE: You need to fill in a valid chartbeat API key in cbUtils.js to run this yourself!

You can’t perform that action at this time.