JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div id="search">
  <input id="SearchItemsFromList" type="text" />
</div>
<ul id="inventory">

</ul>

CSS

.li-style-thing {
  padding: 8px;
  font-weight: bold;
  font-size: 13.5px;
}

.first-style-thing {
  margin: 0%;
  min-height: 295px;
  width: 245.438px;
  border-radius: 0px;
  height: 295px;
  box-shadow: inset 0px 0px 25px 2px #232323;
  border: 1px solid black;
}

.second-style-thing {
  text-decoration: underline;
  text-align: left;
  font-size: 14.5px;
  color: #E8E8E8;
  font-family: Roboto;
  position: relative;
  right: -3px;
}

.third-style-thing {
  text-align: left;
  color: #E8E8E8;
  font-family: Roboto;
  position: relative;
  left: 3px;
}

.fourth-style-thing {
  position: relative;
  padding: 0%;
  top: -33px;
}

.fifth-style-thing {
  position: relative;
  top: -129px;
  background: rgba(0, 0, 0, 0.15);
  display: block;
  height: 163px;
}

.sixth-style-thing {
  font-size: 22.5px;
  font-family: Arial Black;
  color: #E8E8E8;
}

.seventh-style-thing {
  font-weight: normal;
  font-size: 12px;
  font-family: Roboto;
  font: bold;
}

.eighth-style-thing {
  position: relative;
  left: -5px;
  top: 50px;
}

.ninth-style-thing {
  position: relative;
  right: -5px;
  top: 50px;
}

.btn {
  position: relative;
  display: block;
  height: 1.5em;
  width: 5em;
  color: cyan;
  background-color: blue;
  font-weight: bold;
  text-align: center;
  padding-top: 0.5em;
  margin: 1em;
  text-decoration: none;
  text-transform: uppercase;
}

#inventory {
  display: block;
  position: relative;
  top: 1em;
  left: 0em;
  border: solid lime 1px;
}

#inventory li {
  background-color: #888888;
}

#inventory li {
  display: inline-block;
  float: left;
}

.purchaseButton {
  right: -8em;
  top: 0;
}

#search {
  height: 4em;
  width: 100%;
  background-color: #00aaaa;
  padding: 1em;
}

JavaScript

console.clear();

var myApp = myApp || {};
myApp.data = {
  currentSearch: [],
  pageStart: 0,
  pageEnd: 0,
  perPage: 3,
  page: 0,
  lastScroll: 0,
  scrollDelay: 250,
  outputContainer: $('#inventory'),
  excludes: ['Operation Phoenix Case Key', 'CS:GO Case Key', 'Winter Offensive Case Key', 'Revolver Case Key', 'Operation Vanguard Case Key', 'Operation Wildfire Case Key', 'Shadow Case Key', 'Operation Breakout Case Key', 'Chroma Case Key', 'Huntsman Case Key', 'Falchion Case Key', 'Chroma 2 Case Key']
};

myApp.func = {
  contains: function(myArray, searchTerm, property) {
    var found = [];
    var len = myArray.length;
    for (var i = 0; i < len; i++) {
      if (myArray[i][property].toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) found.push(myArray[i]);
    }
    return found;
  },
  paginate: function(items) {
    myApp.data.pageStart = myApp.data.perPage * myApp.data.page;
    myApp.data.pageEnd = myApp.data.pageStart + myApp.data.perPage;
    if (myApp.data.pageEnd > items.length) {
      myApp.data.pageEnd = items.length;
      myApp.data.pageStart = myApp.data.pageEnd - myApp.data.perPage >= 0 ? myApp.data.pageEnd - myApp.data.perPage : 0;
    }
    console.log("Page:" + myApp.data.page + " Start:" + myApp.data.pageStart + " End:" + myApp.data.pageEnd + " max:" + items.length);
    return items;
  },
  debounce: function(fn, delay) {
    var timer = null;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    };
  },
  throttle: function(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
      deferTimer;
    return function() {
      var context = scope || this;
      var now = +new Date,
        args = arguments;
      if (last && now < last + threshhold) {
        // hold on to it
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function() {
          last =...