HTML

index.html

<section>
    <form action="#" method="GET" id="searchform">
        <input type="text" name="city" id="city" value="Örnek: Denizli">
        <input type="text" name="query" id="query" value="Örnek: Bar">
        <input type="submit" name="submit" id="submit" value="Getir">
    </form>
    <div id="content">
        <div id="venuewrapper">
            <div id="venues"></div>
        </div>
    </div>
</section>
<script>
    $(function() {
        var lat = "";
        var lng = "";
        var appendeddatahtml = "";
        var arguments = "";
        var str = "";
        var newstr = "";
        var phone = "";
        var rating = "";
        var icon = "";
        var address = "";
         
        $("#query").click(function(){
            $(this).val("");
        });
 
        $("#city").click(function(){
            $(this).val("");
        });
         
        $("#query").blur(function(){
            if ($(this).val() == "") {
                $(this).val("Örnek: Bar");
            }
             
            if ($(this).val() != "Örnek: Bar") {
                $(this).addClass("focus");
            } else {
                $(this).removeClass("focus");
            }
        });
 
        $("#city").blur(function(){
            if ($(this).val() == "") {
                $(this).val("Örnek: Denizli");
            }
             
            if ($(this).val() != "Örnek: Denizli") {
                $(this).addClass("focus");
            } else {
                $(this).removeClass("focus");
            }
        });
         
        $("#searchform").submit(function(event){
            event.preventDefault();
            getVenues();
        });
         
         
        function getVenues() {
            $.ajax({
                type: "GET",
                url: "https://api.foursquare.com/v2/venues/search?near="+$("#city").val()+"&limit=50&query="+$("#query").val()+"&client_id=BUBENIMOZEL&client_secret=BUBENIMOZEL&v=20170506",
                success: function(data) {
                    $("#venues").show();
                    var dataobj = data.response.venues;
                    $("#venues").html("");
                    $.each( dataobj, function() {
                        if (this.categories[0]) {
                            str = this.categories[0].icon.prefix;
                            newstr = str.substring(0, str.length - 1);
                            icon = newstr+this.categories[0].icon.suffix;
                        } else {
                            icon = "";
                        }
                         
                        if (this.contact.formattedPhone) {
                            phone = "Telefon:"+this.contact.formattedPhone;
                        } else {
                            phone = "";
                        }
                         
                        if (this.location.address) {
                            address = '<p class="subinfo">'+this.location.address+'<br>';
                        } else {
                            address = "";
                        }
                         
                        appendeddatahtml = '<div class="venue"><h2><span>'+this.name+'</span></h2>'+address+phone+'</p><p><strong>Toplam:</strong> '+this.stats.checkinsCount+'</p><p><strong>Şuan:</strong> '+this.hereNow.count+'</p></div>';
                        $("#venues").append(appendeddatahtml);
                    });
                }
            });
        }
    });
</script>