· 6 years ago · Jan 06, 2020, 02:14 PM
1<!DOCTYPE html>
2<html lang="da">
3 <head>
4 <meta charset="UTF-8" />
5 <title>FN Goals</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9 <link rel="stylesheet" type="text/css" href="style.css?v=10" />
10 <script src="myscript.js"></script>
11 </head>
12 <body>
13 <header>
14
15
16
17
18<html>
19<head>
20<meta name="viewport" content="width=device-width, initial-scale=1.0">
21</head>
22
23
24<body>
25
26<ul class="topnav">
27 <li><a class="active" href="index.php">Home</a></li>
28 <li><a href="#news">News</a></li>
29 <li><a href="#contact">Contact</a></li>
30 <li class="right"><a href="Login">Login</a></li>
31</ul>
32
33</body>
34</html>
35
36
37
38
39
40</br>
41</br>
42</br>
43
44
45
46 <!-- Youtube API -->
47
48<head>
49
50 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
51
52
53 <script type="text/javascript">
54 //ARRAYS
55 var arr = ['one', 'two', 'three', 'four', 'five'];
56 $.each(arr, function (index, value) {console.log(value);});
57 //here we declare API url and parameters to include in the query
58 var YT_url = 'https://www.googleapis.com/youtube/v3/search?';
59 var YT_params ='part=snippet&maxResults=12&q='
60 var YT_topic = 'corruption';
61 // this access token
62 var YT_key = '&key=AIzaSyBsZORfbkAjm8gSl6anD1hApDpXweGt0WM';
63
64 //we build the query for the YouTube Data api using the above parameters
65 //full request should look something like the line below you can test this line directly
66 //on the URL address of your browser (if you add the APIKEY) to see the JSON response
67 //https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=9&q=cats&key=APIkey
68 var youtube_request = YT_url+YT_params+YT_topic+YT_key;
69 //display on the console the full API request to make sure you did everything right
70 console.log(youtube_request);
71
72 //We query YouTube Data API v3 and prepare results for display
73 $(document).ready(function(){
74 $.getJSON(youtube_request, function(results){ //send request to API and store results in "results"
75 //parse the results' from the JSON response and display them as embedded video
76 //<iframe> and append them to the empty element <ul class="video_list"></ul>
77 $('ul.video_list').append('</br></br>');
78 $.each(results.items, function(idx, item){ //loop to display each result
79 $('ul.video_list').append('<li style="display:inline"><h4>'+results.items[idx].snippet.title+'</h4></br><p>'+results.items[idx].snippet.publishedAt+'</p><iframe id="y" width="275" height="250" src="http://www.youtube.com/embed/'+results.items[idx].id.videoId+'?controls=0&showinfo=1" frameborder="1" allowfullscreen></iframe></br> <p>'+results.items[idx].snippet.description+'</p> </li>');
80 });
81 });
82 });
83 </script>
84</head>
85
86
87
88 <!--The retrieved content will be appended here -->
89<ul class="video_list"></ul>
90
91
92
93 <!-- Youtube API SLUT -->
94
95</br>
96</br>
97</br>
98
99
100
101
102
103
104 <!--NYT API -->
105
106
107
108 <script>
109// Built by LucyBot. www.lucybot.com
110var nyt_url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
111nyt_url += '?' + $.param({
112 'api-key': "K2i3WoQ8G88bf3ZcFDSDKq0J4yZRbIIE",
113 'nyt_q': "corruption",
114 'begin_date': "20191211",
115 'end_date': "20191213",
116 'sort': "newest"
117});
118console.log(nyt_url);
119$.ajax({
120 url: nyt_url,
121 method: 'GET',
122}).done(function(result) {
123 console.log(result);
124 var article = result.response.docs;
125
126 for(i=0; i< article.length; i++){
127 //checking if the article has an image
128 if (article[i].multimedia.length < 3){
129 //no image display empty <div>
130 var image = "<div></div>";
131 }
132 else {
133 //if there is an image place the image information inside a single variable image
134 var image = "<a href='https://www.nytimes.com/"+article[i].multimedia[1].url+"'> <img src='http://www.nytimes.com/"+article[i].multimedia[2].url+"' class='nyt_thumb' alt='"+article[i].headline.main+" image "+article[i].multimedia[2].subtype+"' title='"+article[i].headline.main+" image "+article[i].multimedia[2].subtype+"' height='"+article[i].multimedia[2].height+"' width='"+article[i].multimedia[2].width+"' ></a><br>";
135 }
136 //Displaying the article content, thumbnail, title, date, snippet and URL
137 var pub_date_day = String(article[i].pub_date.substring(0, 10));
138 pub_date_day = pub_date_day.split('-').reverse().join('-')
139 $('div.item4').append(image+"<div class='headline'>"+ article[i].headline.main+"</div><em>"+ pub_date_day+"</em><br>"+ article[i].snippet+"<br>"+"<a href='"+ article[i].web_url+"'></a><br><br>");
140 }
141
142}).fail(function(err) {
143 throw err;
144});
145
146</script>
147
148
149 <!-- NYT API SLUT-->
150
151
152
153
154</br>
155</br>
156</br>
157
158
159
160
161
162
163
164
165
166<!--Pixabay API-->
167
168<head>
169
170 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
171
172
173
174 <script type="text/javascript">
175 //RESTful request: https://pixabay.com/api/?image_type=photo&order=latest&per_page=8&q=bribery&key=14173123-e2a7ad59e506b579409586433
176 var arr = ['one', 'two', 'three', 'four', 'five'];
177 $.each(arr, function (index, value) {console.log(value);});
178 //here we declare API url and parameters to include in the query
179 var pixabay_url = 'https://pixabay.com/api/?';
180 var pixabay_params ='image_type=photo&order=latest&per_page=8&q=';
181 var pixabay_topic = 'bribery';
182 // this access token
183 var pixabay_key = '&key=14173123-e2a7ad59e506b579409586433';
184
185 //we build the query for the YouTube Data api using the above parameters
186 //full request should look something like the line below you can test this line directly
187 //on the URL address of your browser (if you add the APIKEY) to see the JSON response
188 //https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=9&q=cats&key=APIkey
189 var pixabay_request = pixabay_url+pixabay_params+pixabay_topic+pixabay_key;
190 //display on the console the full API request to make sure you did everything right
191 console.log(pixabay_request);
192
193 //We query YouTube Data API v3 and prepare results for display
194 $(document).ready(function(){
195 $.getJSON(pixabay_request, function(results){ //send request to API and store results in "results"
196 //parse the results' from the JSON response and display them as embedded video
197 //<iframe> and append them to the empty element <ul class="video_list"></ul>
198 $('ul.photo_list').append('</br></br>');
199 $.each(results.hits, function(idx, photo){ //loop to display each result
200 $('ul.photo_list').append('<li style="display:inline"><img src='+results.hits[idx].webformatURL+' alt='+results.hits[idx].tags+'</li>');
201 });
202 });
203 });
204 </script>
205</head>
206
207 <!--The retrieved content will be appended here -->
208<ul class="photo_list"></ul>
209
210
211
212
213<!--Pixabay API SLUT-->
214
215
216
217</br>
218</br>
219</br>
220
221
222
223
224
225
226 <!-- News API -->
227
228
229<head>
230
231 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
232
233
234
235 <script type="text/javascript">
236 //https://newsapi.org/v2/everything?q=bitcoin&from=2019-11-10&sortBy=publishedAt&apiKey=30954745796a408281bedba0eaf9150e
237 //here we declare API url and parameters to include in the query
238 var newsapi_url = 'https://newsapi.org/v2/everything?q=';
239 var newsapi_params ='&from=2019-12-10&sortBy=publishedAt'
240 var newsapi_topic = 'corruption';
241 // this access token
242 var newsapi_key = '&apiKey=30954745796a408281bedba0eaf9150e';
243
244 //we build the query for the YouTube Data api using the above parameters
245 //full request should look something like the line below you can test this line directly
246 //on the URL address of your browser (if you add the APIKEY) to see the JSON response
247 //https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=9&q=cats&key=APIkey
248 var newsapi_request = newsapi_url+newsapi_topic+newsapi_params+newsapi_key;
249 //display on the console the full API request to make sure you did everything right
250 console.log(newsapi_request);
251
252 //We query YouTube Data API v3 and prepare results for display
253 $(document).ready(function(){
254 $.getJSON(newsapi_request, function(results){ //send request to API and store results in "results"
255 //parse the results' from the JSON response and display them as embedded video
256 //<iframe> and append them to the empty element <ul class="video_list"></ul>
257 $('ul.newsapi_list').append('</br></br>');
258
259 $.each(results.articles, function(idx, article){ //loop to display each result
260 $('ul.newsapi_list').append('<li style="display:inline"><h4>'+results.articles[idx].title+'</h4></br><p>'+results.articles[idx].publishedAt+'</p><img src="'+results.articles[idx].urlToImage+'"/> <br><p>'+results.articles[idx].description+'</p> </li>');
261 });
262 });
263 });
264 </script>
265</head>
266
267
268
269 <!--The retrieved content will be appended here -->
270<ul class="newsapi_list"></ul>
271
272
273
274 <!-- News API SLUT -->
275
276
277
278</br>
279</br>
280</br>
281
282
283
284 <!--OMDB API-->
285
286
287<head>
288
289 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
290
291 <script type="text/javascript">
292 //RESTful request: https://omdbapi.com/api/?image_type=photo&order=latest&per_page=8&q=bribery&key=ee1e063e
293 var arr = ['one', 'two', 'three', 'four', 'five'];
294 $.each(arr, function (index, value) {console.log(value);});
295
296 <!--Restful reguest: http://www.omdbapi.com/?t=bribery&apikey=ee1e063e-->
297 <script type="text/javascript">
298 var OMDB_url='https://www.omdbapi.com/?s=';
299 var OMDB_key='&apikey=ee1e063e';
300 var OMDB_topic=‘bribery’;
301
302 var OMDB_request = OMDB_url+OMDB_topic+OMDB_key;
303 //display on the console the full API request to make sure you did everything right
304 console.log(OMDB_request);
305 <!-- nu har vi lavet restful request!!-->
306<!-- henter siden!!-->
307 $(document).ready(function(){
308<!--hent JSON, restful request og put det ind i en variable kaldt results!!-->
309 $.getJSON(OMDB_request, function(results){ //send request to API and store resultater in "results"
310 //parse the results' from the JSON response and display them as embedded video
311
312 $('ul.movie_list').append('</br></br>');
313
314 <!-- vi bruger en loop kaldt each til denne!!-->
315 $.each(results.search, function(idx, search){ //loop to display each result
316 $('ul.movie_list').append('<li style="display:inline"><img src='+results.search[idx].Poster+' alt='+results.search[idx].Title+'></li>');
317 });
318 });
319 });
320 </script>
321
322
323</head>
324
325
326
327 <!--The retrieved content will be appended here -->
328<ul class="photo_list"></ul>
329
330
331<!-- OMDB API SLUT-->
332
333
334
335
336
337<!-- TWITTER API -->
338
339
340<?php
341/**
342 * Twitter API SEARCH
343 * Selim Hallaç
344 * selimhallac@gmail.com
345 *
346 * Modified from tutorial https://www.youtube.com/watch?v=iPnGB7a7dO0
347 */
348
349include "twitteroauth/twitteroauth.php";
350
351$consumer_key = "L0fmTsllQObTQ38ThMFPcjEGP";
352$consumer_secret = "ryEhG8KETzRn8w2G39DAzyuveoDE8cO8VmUbbrI2q9tm8j4wqV";
353$access_token = "1172894337748865025-sNaKCaB5Nd5xunfcEM3oum89W9QEEl";
354$access_token_secret = "hvOLbJRUQCZZaNdAM5BdgTMmmGzq6Wpmj22hvqRe55v60";
355
356
357$twitter = new TwitterOAuth($consumer_key,$consumer_secret,$access_token,$access_token_secret);
358
359
360?>
361
362<?php
363 $topic = "energyconsumption";
364 $tweets = $twitter->get('https://api.twitter.com/1.1/search/tweets.json?q='.$topic.'&result_type=recent&count=10');
365
366 foreach ($tweets->statuses as $key => $tweet) {
367 if ($tweet->text!=''){?>
368 <br>
369 <div class="tweetbox">
370 <img src="<?=$tweet->user->profile_image_url;?>" /><?=$tweet->text; ?>
371 <br>
372 </div>
373 <br>
374<?php
375 }
376 }
377
378?>
379
380<!-- TWITTER API SLUT-->
381
382
383
384
385
386
387
388
389
390
391
392<main>
393 <article>
394 <h1> Headline </h1>
395 <div class="item1"> <ul class="news_list"> </ul></div>
396 <div class="item2"> <ul class="movie_list"> </ul></div>
397 </article>
398 <aside>
399 <div class="item3"> <ul class="video_list"> </ul></div>
400 <div class="item4"> </div>
401 <div class="item5"> <ul class="image_list"> </ul></div>
402 <h1></h1>
403 <p class="underrubrik"></p>
404 <div id="nyt"></div>
405 </aside>
406</main>
407
408
409
410<footer>
411
412 <address>
413 This page is created based on
414 <br>
415 <a href="http://www.wikipedia.com">www.wikipedia.com</a>
416 <br>
417 </address> </footer>
418 </body>
419</html>