JSFiddle - React, Tailwind, and code Playground

by yshayy

HTML

<body>
    <div id="display"></div>
    <div id="console" style="background-color:#ffffff;border: 1px solid black;position:fixed; bottom:0; height: 200px; left:0;right:0;overflow:scroll"></div>
    <input id="search" placeholder="enter your favorite movie" />
    <div id="movies"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.11/rx.all.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.js"></script>
    <script>
        var $console = {
            log: function(x) {
                var log = document.createElement("div");
                log.textContent += x;
                document.querySelector("#console").appendChild(log);
            }
        }

            function $display(x) {
                document.querySelector("#display").textContent = x;
            }

            function queryMovie(query) {
                $console.log("requested request for " + query);
                return $.get(
                    'http://api.themoviedb.org/3/search/movie?api_key=9eae05e667b4d5d9fbb75d27622347fe&query=' + query).then(function(r) {
                    $console.log("received " + r.results.length + " results for " + query);
                    return r.results
                });
            }


            function updateMovies(results) {
                $("#movies").html(results.map(function(movie)
        {
        return "<div>(" + movie.release_date.substring(0,4)  + ") - " + movie.original_title + "</div>"
        }));
            }
    </script>
</body>

CoffeeScript

currentDisplay = ""
$("#search").on("keyup change", (ev)->
                query = $(ev.target).val()
                return if query.length < 3
                setTimeout( ()=>
                               return if query != $(ev.target).val()
                               return if currentDisplay == query
                               currentDisplay = query
                               queryMovie(query).then(updateMovies)
                           , 300)
                )