Permalink
Browse files

Merge pull request #15 from cubofantastico/master

Homework 6
  • Loading branch information...
vodnik committed Jan 17, 2019
2 parents 4c712c9 + aaca25d commit eeb2e72852a5059b9b7c374da73852bca6faf328
@@ -0,0 +1,2 @@
.DS_Store
js/keys.js
@@ -0,0 +1,29 @@
body {
background-color: #f2f2f2;
font-family: helvetica, sans-serif;
}

h1 {
font-weight: bold;
}

h1 span {
font-weight: normal;
}

.images {
display: flex;
flex-wrap: wrap;
height: 1000px;
margin-top: 1em;
}

.image {
flex: 1 1 200px;
margin: 3px;
background-size: cover;
}

.btn-default {
margin-top: 4em;
}
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced APIs Lesson</title>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- css -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header class="container-fluid text-center">
<h1>Local<span>Landscapes</span></h1>
</header>

<div class="container-fluid text-center image-results-view">
<h3>Here are some landscape photos from Flickr near you:</h3>
<div class="images"></div>
</div>

<!-- js -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/keys.js"></script>
<script src="js/app.js"></script>
</body>
</html>
@@ -0,0 +1,53 @@
$(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
console.log('lat: ', position.coords.latitude);
console.log('lon: ', position.coords.longitude);

let url = 'https://api.flickr.com/services/rest/?';

let searchOptions = {
method: 'flickr.photos.search',
api_key: apiKey,
tags: 'trampoline',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 4,
radius_units: 'mi',
format: 'json',
nojsoncallback: 1,
extras: 'url_m',
content_type: 1,
safe_search: 1,
sort: 'relevance',
per_page: 30,
};

for (let key in searchOptions) {
url += '&' + key + '=' + searchOptions[key];
}

$.get(url).done(function (response) {
if (response.stat === 'fail') {
console.log(response.message);
} else if (response.photos.photo.length === 0) {
console.log('no photos found');
} else {
handleResponseSuccess(response);
}
})
})
} else {
$('.images').append('Your browser does not support geolocation.')
}
function handleResponseSuccess(response) {
let allData = response.photos.photo;
$.each(allData, function () {
if (this.title !== '') {
let element = $('<img>').attr('src', this.url_m).addClass('image');
$('.images').append(element)
}
})
}
})

0 comments on commit eeb2e72

Please sign in to comment.