Repository: fossasia/loklak_movietweets
Branch: gh-pages
Commit: d14ad7670692
Files: 3
Total size: 6.5 KB
Directory structure:
gitextract_guks0mz7/
├── README.md
├── index.html
└── script.js
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
# loklak Movie Tweets
This form uses the [loklak public API](http://loklak.org/) to search the last 100 most recent tweets about the specified films.
Styles by [Bootstrap](http://getbootstrap.com/).
## Use
Since it's plain HTML/JS, you only have to download both `index.html` and `script.js` and place them in the same directory.
Every time you change the content of the text box with a new film name and press ENTER, the results should update automatically. However, if it doesn't work, you can use the *Search!* button at the right.
> Your browser must have JavaScript enabled, and Internet connection
You can find a live demo [here](http://yagogg.github.io/GCI2015/loklak%20Movie%20Tweets/).
*(Hosted by GitHub Pages)*
## Screenshots
================================================
FILE: index.html
================================================
GCI | Loklak Movie Tweets
Loklak Movie Tweets
Google Code-in - FOSSASIA
Search a movie
Loading...
Results
@user (30 Dic 13:37)
Text
================================================
FILE: script.js
================================================
function searchTweets() { // Query the loklak.org API
var film = document.getElementById('film').value;
var url = 'http://loklak.org/api/search.json?q=' + film + ' film&minified=true&callback=updateResults';
document.body.removeChild(document.getElementById('loklakAPICall')); // Delete old script calls
// Creation of the new script, to support JSONP
var script = document.createElement('script');
script.id = 'loklakAPICall';
script.src = url;
document.body.appendChild(script);
document.getElementById('loading').style.display = 'block'; // Make loading box visible
}
function updateResults(input) { // Function called to interpret the results from the API, through JSONP
var statuses = input.statuses;
document.getElementById('resultsBox').style.display = 'block';
var tweetsBox = document.getElementById('tweets');
while(tweetsBox.childElementCount > 0) { // Empty the tweets box
tweetsBox.removeChild(tweetsBox.lastChild);
}
var media, mBody;
document.getElementById('tweetCount').innerHTML = "Found " + statuses.length + " tweets"; // Show amount of tweets in the alert
for(i in statuses) {
current = document.getElementsByTagName('template')[0].content.children[0].cloneNode(true); // Clone the tweet format, from the
media = current.getElementsByClassName('media')[0];
media.getElementsByClassName('media-object')[0].src = statuses[i].user.profile_image_url_https; // Set user's picture
mBody = media.getElementsByClassName('media-body')[0];
mBody.getElementsByTagName('h4')[0].innerHTML = '@' + statuses[i].screen_name + '' + new Date(statuses[i].created_at).toUTCString() + ''; // Set username and tweet's date
mBody.getElementsByTagName('span')[0].innerHTML = statuses[i].text; // Set tweet's content
tweetsBox.appendChild(current); // Add the complete tweet to the list
}
document.getElementById('loading').style.display = 'none'; // Hide the loading progress bar
}
