Permalink
Browse files

Merge pull request #16 from ackalil/master

Submitting Homework 5 & 6
  • Loading branch information...
vodnik authored and GitHub Enterprise committed Jan 17, 2019
2 parents eeb2e72 + 7006f34 commit 58bc460b80373f8dc36b9f628e9503f18e44f877
@@ -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,128 @@
/*
* 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 make a 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/';
let city;
let state;
let lat;
let lon;

zip.addEventListener(
'keyup',
function() {
const zipString = zip.value;
if (zipString.length === 5) {
getData(zipString);
}
// else {
// alert('Please enter a valid ZIP code.')
// }
},
false
);

// Step 1: Create the getWeather function
function getWeather() { // why doesn't this take weatherUrl and lat and lon as parameters?
console.log('Getting weather...');
// http://api.weatherunlocked.com/api/current/40.71,-74.00?app_id=APP_ID&app_key=APP_KEY
return(fetch(weatherUrl + lat + ',' + lon + '?app_id=' + appID2 + '&app_key=' + apiKey2).then(function(response) { // why must we `return` the fetched url? why can't just fetch right away? Why is this a promise but getData is not?
if (response.ok) {
console.log(response);
return response.json();
console.log(response.json());
} else {
throw response.status;
}
})).catch(function(error) {
return updateUIError(error);
});
}

function getData(zip) {
fetch('http://api.zippopotam.us/us/' + zip)
.then(function(response) {
if (response.ok) {
return response.json();
} else {
updateUIError();
}
})
.then(function(data) {
return getLocation(data);
})
// Step 2: add the new .then() method here
.then(function(data) {
return getWeather(data);
})
.then(function(data) {
return updateUISuccess(data);
})
.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);
}

function updateUISuccess(data) {
zip.value = '';
locationPara.innerHTML = city + ', ' + state;
// Step 3A: Get the Fahrenheit temperature
const tempF = Math.floor(data.temp_f);
// Step 3B: Update the element
tempPara.innerHTML = tempF + '&deg; 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,69 @@
$(function() {
// DOM is ready - how do we make it ready?
if (navigator.geolocation) {
// if browser enables geolocation, use it.
navigator.geolocation.getCurrentPosition(function(position){
console.log('lat: ', position.coords.latitude);
console.log('lon: ', position.coords.longitude);

// search the API for landscape photos nearby
let url = 'https://api.flickr.com/services/rest/?'; // base url

let searchOptions = { // https://www.flickr.com/services/api/flickr.photos.search.html
method: 'flickr.photos.search',
api_key: apiKey,
tags: 'night, dog',
// tag_mode: 'all',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 4,
radius_units: 'mi',
format: 'json',
nojsoncallback: 1,
extras: 'url_c',
content_type: 1,
safe_search: 1,
per_page: 30,
sort: 'relevance',
};

// loop through searchOptions object and append each key/value pair to build full search URL
for ( let key in searchOptions ) { // `key` is built-in
url += '&' + key + '=' + searchOptions[key]; // now we're build the URL
};
// use the above URL to send our GET request using jQuery
$.get(url).done(function(response) { // must read the documentation to know what response status will be getting back
// stat is a success/fail response.
console.log(response);
console.log(response.photos.photo);
if (response.stat === 'fail') { // https://www.flickr.com/services/api/response.json.html
console.log(response.message);
} else if (response.photos.photo.length === 0) {
console.log('no photos found!');
} else {
handleResponseSuccess(response);
};

}); // closes get

}); // closes getCurrentPosition
} /* closes navigator.geolocation */ else {
// let's append to the images class
$('.images').append('Please enable geolocation in your browser.'); // this error doesn't appear if you block the prompt upon loading the page
console.log('Please enable geolocation in your browser');
};

// now let's build the handleResponseSuccess function
function handleResponseSuccess(response) {
// let's say 'i want photos returned from the api'
let allData = response.photos.photo; // `photos.photo` is via example response in the documentation
$.each(allData, function() {
if (this.title !== '') { // 'this' tags the one object you're working with at that moment
let element = $('<img>').attr('src', this.url_c).addClass('image');
$('.images').append(element);
};
});
};

}) // DOM is ready

0 comments on commit 58bc460

Please sign in to comment.