Permalink
Browse files

Merge pull request #14 from luisynayan/master

Submitting Homework 5
  • Loading branch information...
vodnik committed Jan 17, 2019
2 parents 8bc9cec + 44bd330 commit a77640ba65ac87346d1218c68da3163db53967e8
@@ -0,0 +1,2 @@
.DS_Store
js/keys.js
@@ -0,0 +1,86 @@
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
background: ivory;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}

/* page header */
header {
background: #FFCF40;
width: 100%;
color: black;
font-size: 48px;
text-align: center;
line-height: 1.5em;
}

/* main content */
article {
text-align: center;
padding: 20px;
overflow: auto;
margin: 0 auto;
}

p {
text-align: center;
padding: 0.4em;
}

#temp {
font-weight: bold;
}

/* form */
form {
max-width: 640px;
text-align: center;
margin: 1em auto;
font-size: 1em;
}

label {
text-align: right;
margin-right: 0.4em;
line-height: 1.4em;
}

#zip {
width: 6em;
}
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0" />
<title>City and State Lookup</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
<header><h1>Weather Lookup</h1></header>

<article>
<form>
<fieldset id="zipset">
<label for="zip" id="ziplabel">Zip Code</label>
<input id="zip" type="number" />
</fieldset>
</form>
<p id="location"></p>
<p id="temp"></p>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/keys.js"></script>
<script src="js/script.js"></script>
</body>
</html>
@@ -0,0 +1,136 @@
/*
* Asynchronous JavaScript Exercise
*
* This app fetches location information based on a zip code. You'll build
* on this code to look up weather information based on the latitude and
* longitude coordinates returned from your location search.
*
* STEP 1: Create a getWeather function that uses a Fetch request to return
* data from the weatherunlocked API. Within the function, include a statement
* to log the result to the console. (Note that this data will not be logged
* until after you complete Step 2 below.)
*/

/*
* STEP 2: Within the getData function, chain another .then() method after the
* one that calls the getLocation function. Within this new .then() method,
* return a function call to the getWeather function. Save your work, load
* the app in the browser, and verify that weather data is logged to the
* console from the getWeather function.
* Hint: The getWeather() function must use a 'return' statement to return the
* result of the Fetch request.
*
* STEP 3: Update the updateUISuccess function to do the following:
* - Obtain the Fahrenheit temperature from the returned data.
* (Hint: Start by examining the data structure in the console that was
* logged in the previous step.)
* - Update the element referenced by the tempPara variable with the
* temperature you obtained, the degree symbol, and the letter F (for
* Fahrenheit)
*
* STEP 4: Test your app and verify that for any 5-digit zip code you type
* in the input box, the UI updates with city, state, and current temperature.
*
* BONUS: Write a getWeather2 function to makea request to openweathermap.org.
* Incorporate a call to this function into the getData function. In the
* updateUISuccess function, average the temperatures returned from the two
* weather APIs and display the average in the browser window.
*
* BONUS 2: Combine the getWeather and getWeather2 functions into a single
* function that can accept the necessary parameters to make an API call to
* either weatherunlocked or openweathermap. Be sure to update your function
* calles in the getData function to reference the new function with the
* appropriate name and arguments.
*/

'use strict';

const zip = document.querySelector('#zip');
const tempPara = document.querySelector('#temp');
const locationPara = document.querySelector('#location');
const weatherUrl = 'http://api.weatherunlocked.com/api/current/';
const weatherUrl2 = 'http://api.openweathermap.org/data/2.5/weather?q=';
let city;
let state;
let lat;
let lon;

zip.addEventListener(
'keyup',
function() {
const zipString = zip.value;
if (zipString.length === 5) {
getData(zipString);
}
},
false
);

function getData(zip) {
console.log('Retrieving Zippopotam.us data...')
fetch('http://api.zippopotam.us/us/' + zip)
.then(function(response) {
console.log('Zippopotam.us data retrieved.');
if (response.ok){
return response.json();
} else {
throw response.status;
}
})
.then(function(data){
console.log('Setting location...')
return getLocation(data);
})
.then(function(){
console.log('Retrieving weather data...');
return getWeather();
})
.then(function(data) {
console.log('Weather data received.\nTemperature: ' + data.temp_f);
updateUISuccess(data.temp_f);
})
.catch(function(error) {
return updateUIError();
});
}

function getLocation(data) {
city = data.places[0]['place name'];
state = data.places[0]['state'];
lat = parseFloat(data.places[0].latitude).toFixed(2);
lon = parseFloat(data.places[0].longitude).toFixed(2);
console.log('Location set.\nCity: ' + city + ', ' + state + '\nLatitude: ' + lat + '\nLongitude: ' + lon);
}

let getWeather = function(){
return fetch(weatherUrl + lat + ',' + lon + '?app_id=' + appID2 + '&app_key='+apiKey2).then(function(response){
if (response.ok){
return response.json();
} else {
throw response.status;
}
});
};

// let getWeather2 = function(){
// fetch(weatherUrl2 + city + '&appid=' + apiKey).then(function(response){
// if (response.ok){
// return response.json();
// } else {
// throw response.status;
// }
// }).then(function(data){
// return (data.main.temp - 273.15) * 1.8 + 32;
// })
// };

function updateUISuccess(data) {
console.log('Painting DOM...');
zip.value = '';
locationPara.innerHTML = city + ', ' + state;
tempPara.innerHTML = data + '°F';
}

function updateUIError() {
locationPara.innerHTML = 'Please try again in a bit.';
}
@@ -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,54 @@
$(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', // endpoint
api_key: apiKey, // stored in js/keys.js
tags: 'blackandwhite',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 10,
radius_units: 'mi',
sort: 'relevance',
per_page: 30,
format: 'json',
nojsoncallback: 1,
extras: 'url_z',
content_type: 1,
safe_search: 1,
};
for (let key in searchOptions) {
url += '&' + key + '=' + searchOptions[key];
}
console.log(url);
$.get(url).done(function(response) {
console.log(response);
if (response.stat === 'fail') {
console.log(response.message);
} else if (response.photos.photo.length === 0) {
console.log('No photos found!');
} else {
handleResponseSuccess(response);
}
});
}, function () {
$('.images').append('Sorry, we need your location to retrieve images');
});
} else {
$('.images').append('Sorry, the browser does not support geolocation');
}
function handleResponseSuccess(response) {
let allData = response.photos.photo;
$.each(allData, function() {
// photos without titles may not be carefully tagged, so exclude them
if (this.title !== '') {
let element = $('<img>').attr('src', this.url_z).addClass('image');
$('.images').append(element);
}
});
}
});

0 comments on commit a77640b

Please sign in to comment.