JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<div id="container"></div>

JavaScript

"use strict";

const companies= [
  {name: "Company One", category: "Finance", start: 1981, end: 2004},
  {name: "Company Two", category: "Retail", start: 1992, end: 2008},
  {name: "Company Three", category: "Auto", start: 1999, end: 2007},
  {name: "Company Four", category: "Retail", start: 1989, end: 2010},
  {name: "Company Five", category: "Technology", start: 2009, end: 2014},
  {name: "Company Six", category: "Finance", start: 1987, end: 2010},
  {name: "Company Seven", category: "Auto", start: 1986, end: 1996},
  {name: "Company Eight", category: "Technology", start: 2011, end: 2016},
  {name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];

const ages = [33, 12, 20, 16, 5, 54, 21, 44, 61, 13, 15, 45, 25, 64, 32];

/*companies.forEach(company=> console.log(company.name));

console.log('-------------------------------------------');

const canDrink = ages.filter(age=>age>21);
console.log('CanDrink? '+canDrink);

console.log('-------------------------------------------');

const allRetail = companies.filter(company=> company.category==='Retail');
console.log(allRetail);

const eighties = companies.filter(company=> (company.start>=1980 && company.start<1990));
console.log(eighties);

const lasted10MoreYears = companies.filter(company=>(company.end-company.start>=10));
console.log(lasted10MoreYears);

console.log('-------------------------------------------');

const companyNames = companies.map(company=>company.name);
console.log(companyNames);

const companyAndLife = companies.map(company=> `${company.name} [${company.start} - ${company.end}]` );
console.log(companyAndLife);

console.log('-------------------------------------------');

const sortedCompanies = companies.sort((a, b) => (a.start>b.start? 1: -1) );
console.log(sortedCompanies);

const agesSorted = ages.sort((a,b)=> a>b?1:-1);
console.log(agesSorted);

const agesSortedSimple = ages.sort((a,b)=>...