-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (95 loc) · 3.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/main.css">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="tumblr-posts">
<!-- empty list. we'll populate this list with <li>s using javascript! -->
</ul>
<script>
/*
AJAX
Asynchronous Javascript and XML(or JSON)
JSON
Javascript Object Notation
[
{
"username": 'robertvinluan',
"content": "come to code club!",
"timestamp": 382341349134
},
{...},
{...}
]
0. read the developer documentation and find endpoints.
1. send out response using $.ajax()
2. write handler for doing stuff with the returned data
3. use jquery to put the data into elements on the page.
*/
//globally declare a variable so we can use it in other places.
//if we don't do this, we can't use the palette outside of the response handler function.
var palette;
//get tumblr posts
//note the "&callback=?" at the end of the URL.
//this tells the server that we're using JSONP so we don't get that "Access Control Allow Origin" error.
$.ajax({
url: "http://api.tumblr.com/v2/blog/shitmystudentswrite.tumblr.com/posts/text?api_key=KRG6mtvD2OQH7gMGHxPpPYtm5cnlx84gFSO2a76wMHgM1Sbz4J&callback=?",
dataType: 'json',
data: {
limit: 50,
filter: 'text'
},
success: function(data){
//go through each post in the response and make an <li>, then add it inside the <ul> that's on the page.
for(var i = 0; i < data.response.posts.length; i++) {
var li = $('<li>').text(data.response.posts[i].body);
$('#tumblr-posts').append(li);
}
//make use of the colourlovers palette we requested earlier.
//we're using a fancy CSS selector to color every 5th item a certain color.
//it looks like this: 'li:nth-Child(5n+5)'
//for documentation on how that selector works, check out this documentation:
// https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
for(var i = 0; i < palette.length; i++) {
$('li:nth-Child('+palette.length+'n+'+i+')').css('backgroundColor', "#" + palette[i]);
}
},
error: function() {
//this error function will run instead of the success function if something goes wrong.
console.log('tumblr didnt work');
}
});
//get a colourlovers palette.
//notice we're using '&jsonCallback=?' instead of 'callback' like we did above. This is because their API specifically requests that we do so.
$.ajax({
url: "http://www.colourlovers.com/api/palettes/random?format=json&jsonCallback=?&numResults=1",
dataType: 'json',
success: function(data){
console.log(data)
palette = data[0].colors;
//we're just storing the palette for later use.
//we're not actually coloring any list items, because it's likely that this response comes back *before* the tumblr response does, and there won't be any list items to color!
//we can't control WHEN the different responses come back; that's up to how fast the server can process them. That's the Asynchronous part of AJAX.
//for a more elegant solution to this problem, check out jquery promises (WARNING: Verbose Documentation ahead!) http://api.jquery.com/category/deferred-object/
},
error: function() {
console.log('colorlovers didnt work');
}
});
</script>
</body>
</html>