JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<label for="filter">Filter</label>
<input type="text" id="filter"/>
<label for="map">Map</label>
<input type="text" id="map"/>
<label for="reduce">Reduce</label>
<input type="text" id="reduce"/>
<label for="currying">Currying</label>
<input type="text" id="currying"/>

CSS

input {
  width: 100%;
}

JavaScript

let animals = [
	{name: 'Dexter', species: 'dog'},
  {name: 'Valter', species: 'cat'},
  {name: 'Slavko', species: 'cat'},
  {name: 'Igor', species: 'fish'},
  {name: 'Rex', species: 'dog'},
  {name: 'Alex', species: 'fish'}
]

const orders = [
	{ amount: 250},
  { amount: 400},
  { amount: 100},
  { amount: 325}
]

let hasElement = (element, obj) => obj.element === element

// FILTER FUNCTION
let filter = animals.filter(animal => animal.species === 'dog').length;

// REJECT FUNCTION
//let reject = animals.reject(animal => animal.speciees === 'dog').length;

// MAP FUNCTION
let map = animals.map(animal => animal.name);

// REDUCE FUNCTION
let reduce = orders.reduce((sum, order) => sum+order.amount, 0); 
// 0 is starting value, IT'S A RECURSION!!!

// CURRYING FUNCTION
let dragon = 
	name =>
  	size =>
    	element =>
      	name + ' is a ' +
        size + ' dragon that breathes ' +
        element + '!'
let currying = dragon('Karo')('large')('ice');

document.getElementById('filter').value = filter;
//document.getElementById('reject').value = reject;
document.getElementById('map').value = map;
document.getElementById('reduce').value = reduce;
document.getElementById('currying').value = currying;