idkjs/index.html

## index.html
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.celljs.org/cell.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>-->
    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <style>
        body{
            background: #31353D;
        }
    </style>
    <script src="./bundle.js"></script>
</head>

<script>
 Input = {
   $cell: true,
   $type: "input", id: "search", type: "text", class: "form-control", placeholder:
     "Search Places",
   onkeyup: function(e){
     if(e.keyCode === 13){
       App._query(this, function(){
         console.log('hi')
       })
       this.value = "";
     }
   }
 }
  App = {
        $cell: true,
        _items: [],
        $init: function() {
            this._query();
        }, // use _ to define data and ()'s on elements
        _query: function() {
             _getItems().then(function(res){
               return res
             })
                .then(function(res) {
                    this._refresh(res);
            }.bind(this));
        },
        _refresh: function(results) {
          console.log(results.businesses)
            this._items = results.businesses;
        },
        _template: function(item) {
          console.log(item)
            return {
                $components: [{
                    $text: item.name
                }, {
                    content: item.review_count ? item.review_count : ""
                }]
            };
        },
        $update: function() {
            this.$components = this._items.map(this._template)
        }
    }
</script>


<script src="./bundle.js"></script>


</html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://www.celljs.org/cell.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>-->
	<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
	<style>
	body{
	background: #31353D;
	}
	</style>
	<script src="./bundle.js"></script>
	</head>

	<script>
	Input = {
	$cell: true,
	$type: "input", id: "search", type: "text", class: "form-control", placeholder:
	"Search Places",
	onkeyup: function(e){
	if(e.keyCode === 13){
	App._query(this, function(){
	console.log('hi')
	})
	this.value = "";
	}
	}
	}
	App = {
	$cell: true,
	_items: [],
	$init: function() {
	this._query();
	}, // use _ to define data and ()'s on elements
	_query: function() {
	_getItems().then(function(res){
	return res
	})
	.then(function(res) {
	this._refresh(res);
	}.bind(this));
	},
	_refresh: function(results) {
	console.log(results.businesses)
	this._items = results.businesses;
	},
	_template: function(item) {
	console.log(item)
	return {
	$components: [{
	$text: item.name
	}, {
	content: item.review_count ? item.review_count : ""
	}]
	};
	},
	$update: function() {
	this.$components = this._items.map(this._template)
	}
	}
	</script>


	<script src="./bundle.js"></script>


	</html>