Mozilla Mobile developer research results

by codepo8

HTML

<h1>What platforms are you targeting with your apps</h1>
    <p>Answers from 590 developers</p>
    <nav></nav>
    <output><ul></ul></output>

CSS

*{margin:0;padding:0}
    nav,output {
        display:block;
    }
output{padding-top:10px;}
    nav {float:left;padding-right:20px}
    body{font-family: "Open Sans",arial,sans-serif;font-size: 13px}
    button.current {
        background: #0c0;
        background:-webkit-linear-gradient(#369, #6cf);
        background:-moz-linear-gradient(#eee, #0c0);
        background:-ms-linear-gradient(#eee, #0c0);
        background:-o-linear-gradient(#eee, #0c0);
        background:linear-gradient(#eee, #0c0);
    }
    .progress {
        float: left;
        width: 236px;
        height: 1em;
        border: 1px solid #ccc;
        background:-webkit-linear-gradient(#ccc, #eee);
        background:-moz-linear-gradient(#ccc, #eee);
        background:-ms-linear-gradient(#ccc, #eee);
        background:-o-linear-gradient(#ccc, #eee);
        background:linear-gradient(#ccc, #eee);
    }
    button {
        padding: 5px 10px;
        font-size: 14px;
        width: 7em;
        border: none;
        background: #ccc;
        background:-webkit-linear-gradient(#ccc, #eee);
        background:-moz-linear-gradient(#ccc, #eee);
        background:-ms-linear-gradient(#ccc, #eee);
        background:-o-linear-gradient(#ccc, #eee);
        background:linear-gradient(#ccc, #eee);
    }
    li{
        list-style: none;
        margin:0;
        padding: 0 0 5px 0;
    }
    ul{ margin: 1em 0;}
    .value {
        padding: 0 1em;
        width: 1em;
        float:left;
    }
    h1{font-size: 20px;}
    .progress span {
                background:#ccc;
                background: -webkit-linear-gradient(0deg, #060, #0c0);
                background: -moz-linear-gradient(0deg, #060, #0c0);
                background: -ms-linear-gradient(0deg, #060, #0c0);
                background: -o-linear-gradient(0deg, #060, #0c0);
                background: linear-gradient(0deg, #060, #0c0);
                width:20px;
                height:1em;
                display: block;
       ...

JavaScript

results = {
    'labels': ['focus','must have','supported','sometimes','not at all'],
    'platforms': {
        'Web': [370,153,33,23,11],
        'iOS': [261,207,53,28,41],
        'Android': [182,221,102,47,38],
        'Windows': [10,46,131,173,230],
        'Blackberry': [8,15,100,164,303]
    }
}
var nav = document.querySelector('nav'),
        oldbutton = null;
        output = document.querySelector('output ul'), 
    out = '<ul>';
var max = 0, i = 0, platforms = [];
for(i in results.platforms){
    var j = 0;
            platforms.push(i);
    while(results.platforms[i][j]){
        if (results.platforms[i][j] > max) { max = results.platforms[i][j] }
        j++
    }
}
for(i in results.platforms){
    output.innerHTML += '<li><div class="progress"><span></span></div> <span class="value"></span> <span>'+i+'</span></li>';
}
var progresses = output.querySelectorAll('.progress'),
    resultlabels = output.querySelectorAll('.value');

for(i=0;i<results.labels.length;i++){
    out += '<li><button data-element="'+i+'">'+results.labels[i]+'</button></li>';

}
nav.innerHTML = out;                                               
nav.addEventListener('click', function(ev){
    if (ev.target.tagName === 'BUTTON') {
        if(oldbutton) {oldbutton.className = ''}
        ev.target.className = 'current';
      oldbutton = ev.target;
        var elm = ev.target.getAttribute('data-element');
        for(i=0;i<progresses.length;i++){
            progresses[i].querySelector('span').style.width = results.platforms[platforms[i]][elm]/2.5 +'px';
            resultlabels[i].innerHTML = results.platforms[platforms[i]][elm];
        }    
}
}, false);
nav.querySelector('button').click();