JSFiddle - React, Tailwind, and code Playground

by Julien Roy

HTML

<div id="people">
    <button id="all">All</button>
    <button id="tenunder">10 and under</button>
    <button id="twentyunder">20 and under</button>
    <button id="over20">over 20</button>
</div>
<div id="people-list"></div>

JavaScript

var people = [
    {name : 'John Doe', age : 21},
    {name : 'Jane Doe', age : 19},
    {name : 'Baby Doe', age : 2},
    {name : 'kid Doe', age : 11}
];

var peopleDiv = document.getElementById('people');

peopleDiv.addEventListener('click', function (e) {
    e.preventDefault();
    var clicked = e.target;
    var clickedId = clicked.id;
    var peopleListDiv = document.getElementById('people-list');
    clicked.className = "active";

    var peopleToDisplay = getPeople(people, clickedId)
    	.map(function (people) { return people.name; })
    	.join('<br />');
    
    peopleListDiv.innerHTML = peopleToDisplay;
});

var getPeople = function(people, clickedId) {
     switch (clickedId) {
        case "all":
            return people;
        case "tenunder":
            return people.filter(peopleUnderTen);
        case "twentyunder":
            return people.filter(peopleUnderTwenty);   
        case "over20":
            return people.filter(peopleOverTwenty);
    }   
};

var peopleUnderAge = function (age, people) {
    return function (people) {
        return people.age <= age;
    };
};

var peopleUnderTen = peopleUnderAge(10);
var peopleUnderTwenty = peopleUnderAge(20);
var peopleOverTwenty = function (people) { return people.age > 20; };