JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<body>
  <input data-bind="textInput: filter" />
  <input type="button" data-bind="value: 'add', click: addElement" id="addButton">
  <input type="button" data-bind="value: 'remove', click: removeElement" id="removeButton">
  <container data-bind="foreach: filteredItems">
    <div id="entry" , data-bind="text: $data"></div>
  </container>
</body>

CSS

#entry {
  font-family: Arial Black;
  font-size: 18px;
  color: white;
  
  background: linear-gradient(#2679ff, #00368c);

  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px black;  
}

html, body {
  background: linear-gradient(#212730, #02050a);
  margin: 0;
  height: 100%;
  /*background-color: #212730;*/
}

container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

input {
  margin: 5px;
}

#addButton {
  border: 1px solid white;
  font-family: Arial Black;
  font-size: 18px;
  color: white;
  background-color: #39d389;
}

#addButton:hover {
  border: 1px solid white;
  font-family: Arial Black;
  font-size: 18px;
  color: #d4fcf1;
  background-color: #01994f;
}

#removeButton {
  border: 1px solid white;
  font-family: Arial Black;
  font-size: 18px;
  color: white;
  background-color: tomato;
}

#removeButton:hover {
  border: 1px solid white;
  font-family: Arial Black;
  font-size: 18px;
  color: pink;
  background-color: #b23018;
}

JavaScript

var ViewModel = function() {
  var self = this;

  self.filter = ko.observable('');

  self.items = ko.observableArray(["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas", "San Jose", "Detroit", "Jacksonville", "Indianapolis", "San Francisco", "Columbus", "Austin", "Memphis", "Fort Worth", "Baltimore", "Charlotte", "El Paso", "Boston", "Seattle", "Washington", "Milwaukee", "Denver", "Louisville/Jefferson County", "Las Vegas", "Nashville-Davidson", "Oklahoma City", "Portland", "Tucson", "Albuquerque", "Atlanta", "Long Beach", "Fresno", "Sacramento", "Mesa", "Kansas City", "Cleveland", "Virginia Beach", "Omaha", "Miami", "Oakland", "Tulsa", "Honolulu", "Minneapolis", "Colorado Springs", "Arlington", "Wichita", "Raleigh", "St. Louis", "Santa Ana", "Anaheim", "Tampa", "Cincinnati", "Pittsburgh", "Bakersfield", "Aurora", "Toledo", "Riverside", "Stockton", "Corpus Christi", "Newark", "Anchorage", "Buffalo", "St. Paul", "Lexington-Fayette", "Plano", "Fort Wayne", "St. Petersburg", "Glendale", "Jersey City", "Lincoln", "Henderson", "Chandler", "Greensboro", "Scottsdale", "Baton Rouge", "Birmingham", "Norfolk", "Madison", "New Orleans", "Chesapeake", "Orlando", "Garland", "Hialeah", "Laredo", "Chula Vista", "Lubbock", "Reno", "Akron", "Durham", "Rochester", "Modesto", "Montgomery", "Fremont", "Shreveport", "Arlington", "Glendale"]);


  self.removeElement = function(data) {
    var filter = self.filter();
    self.items.remove(filter);
    console.log(self.items());
  }

  self.addElement = function(data) {
    var filter = self.filter();
    self.items.push(filter);
    console.log(self.items());
  }

  self.filteredItems = ko.computed(function() {
    var filter = self.filter();
    if (!filter) {
      return self.items();
    }
    return self.items().filter(function(i) {
      return i.indexOf(filter) > -1;
    });
  });
};

ko.applyBindings(new ViewModel());