API HW – Hsin-Ning Lee

Last week’s class was very helpful. I learned more about API. I also went to the review session on last friday.

For this assignment, I explored Google Maps API. I called the map and marked the exact location of Parsons.

Here is the link:

http://a.parsons.edu/~leeh578/map1.html

Below is my code:

<!DOCTYPE html>
<html>
<head>
<title>Google Map API</title>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<style type=”text/css”>
html { height: 80% }
body { height: 80%; width: 80%; margin: 100; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type=”text/javascript”
src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAPXmMRaQKWBzG37Y6SJUw4uO-adVxLTyw&sensor=false”&gt;
</script>
<script type=”text/javascript”>
function initialize() {

var mapOptions = {
center: new google.maps.LatLng(40.735257,-73.994424),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map-canvas”),
mapOptions);

var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: ‘Parsons The New School for Design’
});

}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<br>
<h1>Parsons The New School for Design</h1>
<br>
<div id=”map-canvas”/>
</body>
</html>

Leave a comment

Filed under Homework

API Homework

Finally getting the hang of this. Thank you for going over it again Master P, really helped.
For anyone in the class who missed it and is looking for it here is what we went over in the review friday:

http://cssdeck.com/labs/ke0mp2in

Here is the code, I got my own key and pulled the weather forecast for my Home town of Wagram North Carolina:

Raw Data link:

http://api.wunderground.com/api/dc48a9b9b5d76b6a/forecast/q/NC/Wagram.json

Script:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>JSON WITH API: Astronomy 1</title>

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

<script type=”text/javascript”>

/*Standard request URL format =
http://api.wunderground.com/api/b79e3040f6431025/features/settings/q/query.format
where
features=> type of data, here astronomy
settings=> lang or personal data
query=> location of data
*/

$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/dc48a9b9b5d76b6a/forecast/q/NC/Wagram.json&#8221;,
dataType : “jsonp”, //jsonp for cross-origin files
success : function(parsed_json) {
console.log(‘success!!’);
//each nested object goes in []
var wagramWeather = parsed_json[‘forecast’][‘txt_forecast’][‘forecastday’][1][‘fcttext’];
var wagramWeatherday2 = parsed_json[‘forecast’][‘txt_forecast’][‘forecastday’][3][‘fcttext’];

$(“#container”).append(“Here is the forecast for the place I was born and raised(Wagram, NC): “+wagramWeather);

$(“#container2”).append(“Wednesday in Wagram will be: “+wagramWeatherday2);

} //end of success
}); //end of ajax
}); //end of doc ready

 
</script>

</head>

<body>
<section id=”container”>
<
</section>
<section id=”container2″>

</section>
</body>
</html>

Leave a comment

Filed under Homework

Ezgi- HW 2-changing color

Screen Shot 2013-10-18 at 12.48.41 AMScreen Shot 2013-10-18 at 12.49.01 AM

<!DOCTYPE HTML>

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
</style>
</head>
<body>
<div id=”container”></div>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js”></script&gt;
<script defer=”defer”>
var stage = new Kinetic.Stage({
container: ‘container’,
width: 578,
height: 200
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
x: 365,
y: stage.getHeight() / 2,
radius: 50,
fill: ‘FFCC99’,

});

circle.on(‘click’, function() {
var fill = this.getFill() == ‘FFCC99’ ? ‘FFCC33’ : ‘FFCC99’;
this.setFill(fill);
layer.draw();
});

layer.add(circle);
stage.add(layer);
var circle = new Kinetic.Circle({
x: 365,
y: 200,
radius: 50,
fill: ‘CCCCCC’,

});

circle.on(‘click’, function() {
var fill = this.getFill() == ‘CCCCCC’ ? ‘FF9956’ : ‘CCCCCC’;
this.setFill(fill);
layer.draw();
});

layer.add(circle);
stage.add(layer);
var triangle = new Kinetic.RegularPolygon({
x: 365,
y: 120,
sides: 3,
radius: 10,
fill: ‘CC9966’,
});
triangle.on(‘click’, function() {
var fill = this.getFill() == ‘FF9900’ ? ‘CC9966’ : ‘FF9900’;
this.setFill(fill);
layer.draw();
});
layer.add(triangle);

var rect = new Kinetic.RegularPolygon({
x: 365,
y: 160,
sides: 4,
radius: 10,
fill: ‘660066’,
});
rect.on(‘click’, function() {
var fill = this.getFill() == ’33FFCC’ ? ‘660066’ : ’33FFCC’;
this.setFill(fill);
layer.draw();
});
layer.add(rect);

var triangle = new Kinetic.RegularPolygon({
x: 365,
y: 200,
sides: 3,
radius: 30,
fill: ‘660066’,
});
triangle.on(‘click’, function() {
var fill = this.getFill() == ’33FFCC’ ? ‘660066’ : ’33FFCC’;
this.setFill(fill);
layer.draw();
});
layer.add(triangle);
var triangle = new Kinetic.RegularPolygon({
x: 365,
y: 100,
sides: 2,
radius: 2,
fill: ‘660066’,
stroke:’black’,
strokeWidth:’10’,

});
triangle.on(‘click’, function() {
var fill = this.getFill() == ’33FFCC’ ? ‘660066’ : ’33FFCC’;
this.setFill(fill);
layer.draw();
});
layer.add(triangle);

var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 10,
fill: ‘blue’,
stroke: ‘black’,
strokeWidth: 4
});

circle.on(‘click’, function() {
var fill = this.getFill() == ‘blue’ ? ‘#00d00f’ : ‘blue’;
this.setFill(fill);
layer.draw();
});

layer.add(circle);
stage.add(layer);

var circle = new Kinetic.Circle({
x: 350,
y: stage.getHeight() / 2,
radius: 10,
fill: ‘blue’,
stroke: ‘black’,
strokeWidth: 4
});

circle.on(‘click’, function() {
var fill = this.getFill() == ‘blue’ ? ‘#00d00f’ : ‘blue’;
this.setFill(fill);
layer.draw();
});

layer.add(circle);
stage.add(layer);
</script>
</body>
</html>

reference: http://www.html5canvastutorials.com/labs/html5-canvas-modify-shape-color-on-click/

Leave a comment

Filed under Homework

JavaScript Review Session for All First-Years on Friday

I’m not sure if you got the email or not, but Sven is hosting a JavaScript Review Session for all 1st years on Friday @ 12:10pm in Room 1200 (D12). If you guys have any concerns or unresolved questions, or have things I wasn’t able to help you with, I highly, highly, highly recommend you attend if you can. It might be good to hear learn things from another perspective.

Also, 2nd year Apon will be there to help. He’s super genius in JavaScript.

Please let me know if you attend. Bonus points.

Leave a comment

Filed under Announcements

Playing with Weather API // Assignment3

I had hard time to work with API, but finally I could figure out how to play with API ! Today’s review class was so much helpful to do this work. I’ve learned how to bring live information from API from Weather Underground by looking at its json datas and apply them to my website. Especially, bring live Radar+Satellite Map was so interesting ! I will definitely use API in my future project.

This is my website!

http://a.parsons.edu/~parks566/apiExplore/apiExplore.html

<!DOCTYPE html>

<html>
<head>
<meta charset=”UTF-8″>
<title>JSON WITH API</title>

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

<script type=”text/javascript”>

/*Standard request URL format =
http://api.wunderground.com/api/b79e3040f6431025/features/settings/q/query.format
where
features=> type of data, here astronomy
settings=> lang or personal data
query=> location of data
*/

$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/3b6709cb1560b9d9/conditions/q/NY/New_York.json&#8221;,
dataType : “jsonp”, //jsonp for cross-origin files
success : function(parsed_json) {
console.log(‘success!!’);
//each nested object goes in []
var Odata = parsed_json[‘current_observation’][‘display_location’][‘full’];
var Otime = parsed_json[‘current_observation’][‘observation_time’];
var weatherD = parsed_json[‘current_observation’][‘weather’];
var temperatureS = parsed_json[‘current_observation’][‘temperature_string’];
var humidityD = parsed_json[‘current_observation’][‘relative_humidity’];
var forecastU = parsed_json[‘current_observation’][‘forecast_url’];
var imageR = “http://api.wunderground.com/api/3b6709cb1560b9d9/animatedradar/animatedsatellite/q/NY/New_York.gif?num=6&delay=50&interval=30&#8221;;

//var sunset = parsed_json[‘moon_phase’][‘sunset’][‘hour’];
console.log(“observation_location : “+ Odata);
console.log(“observation_time : “+ Otime);
console.log(“weather : “+ weatherD);
console.log(“temperature : “+ temperatureS);
console.log(“humidity : “+ humidityD);
console.log(“forecast url : “+ forecastU);
console.log(“image: “+ imageR);

//console.log(parsed_json); //great debugging tool here!
$(“#container”).append(“<h1> Weather in “+ Odata +” </h1>”);
$(“#container”).append(“<img src=\””+ imageR +”\” width=\”500\” height=\”500\” >”);
$(“#container”).append(“<p> Time : “+ Otime +” </p>”);
$(“#container”).append(“<p> Weather : “+ weatherD +” </p>”);
$(“#container”).append(“<p> Temperature : “+ temperatureS +” </p>”);
$(“#container”).append(“<p> Humidity : “+ humidityD +” </p>”);
$(“#container”).append(“<p> See More Detail : <a href = \””+ forecastU +”\”>”+forecastU+”</a></p>”);

} //end of success
}); //end of ajax
}); //end of doc ready{

</script>

</head>

<body>
<section id=”container”>
</section>
</body>
</html>

Leave a comment

Filed under Homework

Week 06: JS Review

Here are the slides from this week!

week06-js-review

Leave a comment

Filed under Presentations

Class today will be a review session

I’m not sure if you’re aware or not, but last night Sven and Katherine held a meeting for CCLab students who expressed concern about the curriculum, the pace of the class, understanding of material, etc.

CCLab instructors were advised to take a one-week break, so we will be meeting today, but no new material will be introduced. We will proceed with Arduino next week.

Please let me know any topics that you would like to review, and we can go over the topics again. This is kind of short notice for me, but I will try to figure out the best way to run the class – groups/individual/full class based on your needs. So please email me ASAP.

Also, Sven mentioned that he will organize some out-of-class tutorial sessions over the next few weeks to help the students, if needed.

I also think this will be a good time to talk to everyone individually about their homework assignments.

Leave a comment

Filed under Announcements

Kinetic HW

Helen posted the homework for our group! Please view here.

Leave a comment

Filed under Homework

Rainy Day Game!_we did it!!!!!

Link : http://a.parsons.edu/~leeh578/RainyDay.html

Members : Soohyun Park, Shiny Lee, Hyungou Jo(Helen)

—————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id=”container”></div>
<!– KineticJS library –>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js”></script&gt;
<!– script will not run until after the page has loaded –>
<script defer=”defer”>
var rain_x = Math.random() * 1000; //container Width
var rain_y = 0; // rain will drop from the top at first
var cat_x = 500;
var cat_y = 500;

function drawRainyDay(imageObj) {

//setting the stage
var stage = new Kinetic.Stage({
container: “container”,
width: 1000,
height: 1000
});
var layer = new Kinetic.Layer();

// background image
var backgroundImage = new Kinetic.Image({
image: bgImage,
width: 1000,
height: 1000,
draggable: false
});

// rain drops
var rain0 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: rain_x,
y: rain_y,
width: 100,
height:150,
draggable: false
});

var rain1 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: Math.random() * 1000,
y: rain_y,
width: 100,
height:150,
draggable: false
});

var rain2 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: Math.random() * 1000,
y: rain_y,
width: 100,
height:150,
draggable: false
});
// cat
var cat = new Kinetic.Image({
image: catImage,
x: cat_x,
y: cat_y,
draggable: true
});

var catF = new Kinetic.Image({
image: catFImage,
x: cat_x,
y: cat_y,
draggable: true
});
var amplitude = 10;

// rain_y += amplitude;

var anim0 = new Kinetic.Animation(
function(frame) {
rain0.setY(amplitude * frame.time/30);
rain1.setY(amplitude * frame.time/30 – 200);
rain2.setY(amplitude * frame.time/30 – 450);
catF.setX(cat.getX());
catF.setY(cat.getY());
if(rain0.getY() + 130 >= cat.getY() && rain0.getY() -130 <= cat.getY() && rain0.getX() >= cat.getX()-300/2 && rain0.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain1);
layer.add(rain2);
layer.add(catF);
anim0.stop();
}else if(rain1.getY() + 130 >= cat.getY() && rain1.getY() -130 <= cat.getY() && rain1.getX() >= cat.getX()-300/2 && rain1.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain2);
layer.add(catF);
anim0.stop();
}else if(rain2.getY() + 130 >= cat.getY() && rain2.getY() -130 <= cat.getY() && rain2.getX() >= cat.getX()-300/2 && rain2.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain1);
layer.add(rain0);
layer.add(catF);
anim0.stop();
}else{
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain1);
layer.add(rain2);
layer.add(cat);
}
}, layer);
//starts animation
anim0.start();
//cat Size : 292, 300
//rain Size : 261, 350

//placing layers for images
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain1);
layer.add(rain2);
// if(rain_x + 340 >= cat_x && rain_x <= cat_x + 292 && rain_y + 350 >= cat_y && rain_y – 340 <= cat_y + 300){layer.add(catF)}else{layer.add(cat);}
stage.add(layer);
}
//create new images
var bgImage = new Image();
var rainObj = new Image ();
var catImage = new Image ();
var catFImage = new Image();
//loads images
bgImage.onload = function() {
drawRainyDay(this);
};
rainObj.onload = function() {
drawRainyDay(this);
};
catImage.onload = function() {
drawRainyDay(this);
}
catFImage.onload = function() {
drawRainyDay(this);
}

//image source
bgImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/background.png&#8217;,
rainObj.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/raindrop.png&#8217;;
catImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/cat.png&#8217;;
catFImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/cat_frighten.png&#8217;;

// document.onkeypress = keyevent;

</script>

</body>
</html>

Screen shot 2013-09-24 at 8.37.02 PM Screen shot 2013-09-24 at 8.37.03 PM Screen shot 2013-09-24 at 8.37.04 PM Screen shot 2013-09-24 at 8.38.31 PM Screen shot 2013-09-24 at 8.38.47 PM Screen shot 2013-09-24 at 8.38.52 PM Screen shot 2013-09-24 at 8.39.00 PM

1 Comment

Filed under Homework

SANDRA API hw

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>JSON WITH API: Astronomy 1</title>

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/510617ed01473205/astronomy/q/CA/San_Francisco.json&#8221;,
dataType : “jsonp”,
success : function(parsed_json) {

var nameOfStorm = parsed_json[‘stormInfo’][‘stormName’];

console.log(“storm name = “+nameOfStorm);

}
});
});

 

</script>

</head>

<body>
<section id=”container”>

</section>
</body>
</html>

Leave a comment

Filed under Uncategorized