A Pen by AntonioVasilev

Size
3,831 Kb
Views
28,336

How do I make an a pen by antoniovasilev?

What is a a pen by antoniovasilev? How do you make a a pen by antoniovasilev? This script and codes were developed by AntonioVasilev on 30 October 2022, Sunday.

A Pen by AntonioVasilev Previews

A Pen by AntonioVasilev - Script Codes HTML Codes

<!DOCTYPE html>
<html class="Placify">
<head> <meta charset="UTF-8"> <title>A Pen by AntonioVasilev</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .center { margin: auto; text-align: center; display: block; }
.lead { padding-left: 20px; }
.padding { padding: 10px; }
body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/bg-sky.png); background-repeat: repeat !important; background-attachment: fixed; }
.generalMargin { margin-top: 60px; }
.item { float: left; width: 150px; margin-right: 10px; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; }
.input-group { max-width: 500px; }
.outermain { margin-top: 60px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main data-ng-app='myApp' data-ng-init="trackingName = tracking" data-ng-controller='searchController' class="container-fluid outermain"> <div class="col-md-12"> <img class='center' src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Foursquare-logo.png" alt=""> </div> <section class='outermain padding' id='branding'> <p class="lead">A FourSquare API integration</p> </section> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><b>Placify</b></a> </div> </div> </nav> <div class="animated zoomInRight center col-md-6"> <div class="input-group"> <input type="text" class="form-control" ng-model="search" ng-change="change()" onclick="select()" placeholder="Search for a place"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="col-md-6"> <p class="lead">Simply type in a desirable location and Placify will find you Foursquare's recommend venues along with their contact numbers(if any) and their facebook likes.</p> </div> <section class='col-md-12 generalMargin' id='main-info'> <div ng-if="!details"> <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif" alt=""> </div> <div ng-repeat='group in details.groups'> <h3>{{group.type}}</h3> <table class="table"> <tbody class="table-striped" > <tr> <th>Venue</th> <th>Contact</th> <th>Rating</th> <th align="right">Likes</th> </tr> <tr ng-repeat='item in group.items'> <td> {{item.venue.name}} </td> <td> <span class="label label-primary"> {{item.venue.contact.phone}} </span> </td> <td> <span class='label label-success'>{{item.venue.rating}}</span> </td> <td align="likes"> <span class='btn btn-default btn-xs btn-info'>{{item.venue.stats.usersCount}}</span> </td> </tr> </tbody> </table> </div> <div ng-if="eggs.Response==='False'"> No results found. </div> </section> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by AntonioVasilev - Script Codes CSS Codes

.center { margin: auto; text-align: center; display: block; }
.lead { padding-left: 20px; }
.padding { padding: 10px; }
body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/bg-sky.png); background-repeat: repeat !important; background-attachment: fixed; }
.generalMargin { margin-top: 60px; }
.item { float: left; width: 150px; margin-right: 10px; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; }
.input-group { max-width: 500px; }
.outermain { margin-top: 60px; }

A Pen by AntonioVasilev - Script Codes JS Codes

'use strict';
angular.module('myApp', []) //declare my application as myApp
//Declare the controller that I will be working with - pass the services which I will be using .controller('searchController', function($scope, $http, $log) { var pendingTask; //If the model is blank then populate if($scope.search === undefined){ $scope.search = "Wimbledon"; fetch(); } $log.info('trackingName'); //Listen on change $scope.change = function(){ if(pendingTask){ clearTimeout(pendingTask); } //TImeout to 800ms to avoid too many requests pendingTask = setTimeout(fetch, 800); }; //Get response from server function fetch(){ $http.get("https://api.foursquare.com/v2/venues/explore?near="+ $scope.search + "&oauth_token=RUKQBYL4EFOKY1FJ3CS0K5FX4JKP0LBP5UQH1YAJAM0YQJKE&v=20151115") .success(function(response){ console.log(response.response.groups); $scope.details = response.response; }); } $scope.update = function(movie){ $scope.search = movie.Title; $scope.change(); }; $scope.select = function(){ this.setSelectionRange(0, this.value.length); } });
A Pen by AntonioVasilev - Script Codes
A Pen by AntonioVasilev - Script Codes
Home Page Home
Developer AntonioVasilev
Username AntonioVassilev
Uploaded October 30, 2022
Rating 3
Size 3,831 Kb
Views 28,336
Do you need developer help for A Pen by AntonioVasilev?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AntonioVasilev (AntonioVassilev) Script Codes
Name
Responsive Forms
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!