JSFiddle - React, Tailwind, and code Playground

by Fareez Ahmed

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<p id="average-awesomeness"></p>

CSS

body {
    background-color: grey;
    margin: 0;
    padding: 0;
    border: none;
}

JavaScript

//Jquery and Underscore

var simulatedInput = [
    {
        name: 'Bob',
        occupation: 'programmer',
        awesomeIndex: 7,
    },
    {
        name: 'Alice',
        occupation: 'programmer',
        awesomeIndex: 9,
    },
    {
        name: 'Zaphod',
        occupation: 'President of the Galaxy'
    },
    {name: 'Fareez', occupation: 'programmer', awesomeIndex: 1000,},
    {name: 'Matt', occupation: 'engineer', awesomeIndex: 5000,}
];

function updateAverageAwesome(awesomePeople) {
    var averageAwesomeness = 0;
    var programmers = _.filter(awesomePeople, { 'occupation': 'programmer' });
    if (programmers.length > 0) {
        var awesomeTotal = _.reduce(programmers, function(sum, programmer) {
            return sum + programmer.awesomeIndex;
        }, 0);
        averageAwesomeness = awesomeTotal / programmers.length;
    }
$("#average-awesomeness").text("Here's the awesomeness: " + averageAwesomeness.toFixed(2));
};

updateAverageAwesome(simulatedInput);