<!DOCTYPE html>
<html>

  <head>
    <script data-require="ramda@*" data-semver="0.23.0" src="https://unpkg.com/ramda@0.23.0/dist/ramda.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="logger.js"></script>
    <script src="script.js"></script>
  </body>

</html>
const {filter, propSatisfies, lte, propEq, allPass} = R

const cars = [{
    name: 'suv',
    doors: 4,
    mpg: 19
  },
  {
    name: 'sedan',
    doors: 4,
    mpg: 30
  },
  {
    name: 'hybrid',
    doors: 4,
    mpg: 37
  },
  {
    name: 'compact',
    doors: 2,
    mpg: 32
  }]
  
const goodMilage = propSatisfies(lte(30), 'mpg')
const fourDoors = propEq('doors', 4)

const perfectCars = allPass([goodMilage, fourDoors])

const result = filter(perfectCars, cars)
console.log(result)
#sample {
  width:100px;
  height: 35px;
  border: solid 1px black;
  position: absolute;
}

#sample2 {
  width:100px;
  height: 35px;
  border: solid 1px black;
  position: absolute;
  top: 100px;
}
(function(e){const n=console.log;const o=document.querySelector(e.selector);c(o,{background:e.colors.background,color:e.colors.foreground,fontFamily:"monospace"});function t(e){return{}.toString.call(e)==="[object Array]"}function r(e){return{}.toString.call(e)==="[object Object]"}function l(e){return e&&typeof e.inspect==="function"}function c(e,n){Object.assign(e.style,n);return e}function i(e){const n=document.createElement("span");if(e.tagName){n.appendChild(e)}else{n.innerText=e}return n}function u(n){const o=document.createElement("span");o.appendChild(i("{ "));Object.keys(n).reduce(function(o,t,r,l){o.appendChild(c(i(t+": "),{color:e.colors.key}));o.appendChild(d(n[t]));if(r<l.length-1){o.appendChild(i(", "))}return o},o);o.appendChild(i(" }"));return o}function a(e){const n=document.createElement("span");n.appendChild(i("[ "));e.reduce(function(n,o,t){n.appendChild(d(o));if(t<e.length-1){n.appendChild(i(", "))}return n},n);n.appendChild(i(" ]"));return n}function d(n){if(l(n)){return d(n.inspect())}else if(typeof n==="number"){return c(i(n),{color:e.colors.number})}else if(typeof n==="string"){return c(i("'"+n+"'"),{color:e.colors.string})}else if(typeof n==="boolean"){return c(i(n),{color:e.colors.boolean})}else if(typeof n==="function"){return c(i("Function"))}else if(t(n)){return i(a(n))}else if(r(n)){return i(u(n))}else if(n===undefined){return c(i("undefined"),{fontStyle:"italic",color:e.colors.boolean})}else if(n===null){return c(i("null"),{fontStyle:"italic",color:e.colors.boolean})}}function s(n,o){const t=document.createElement("dl");const r=document.createElement("dt");const l=document.createElement("dd");c(t,{padding:"0",margin:"0",marginBottom:"0.6em",fontSize:e.fontSize});c(r,{color:e.colors.label,fontWeight:600,fontSize:"1.1em",margin:"0"});c(l,{padding:"0 0.75em",margin:"0"});r.innerText=n+":";l.appendChild(d(o));t.appendChild(r);t.appendChild(l);return t}function f(n){return c(i(d(n)),{display:"block",margin:"0",marginBottom:"0.6em",fontSize:e.fontSize})}function p(){o.appendChild(arguments.length>1?s(arguments[0],arguments[1]):f(arguments[0]));n.apply(console,arguments)}e.root.logger=p;console.log=p})
({
  root:window,
  selector:"body",
  fontSize:"20px",
  colors: {
    background:"transparent",
    foreground:"gray",
    label:"blue",
    nil:"green",
    number:"violet",
    string:"red",
    key:"blue",
    boolean:"green"
  }
});