Skip to content

Instantly share code, notes, and snippets.

@palumbo

palumbo/hn.html

Last active November 4, 2017 16:38
Show Gist options
  • Save palumbo/9bff9eaeccaf2e20bc8751b2e1fd8d46 to your computer and use it in GitHub Desktop.
Save palumbo/9bff9eaeccaf2e20bc8751b2e1fd8d46 to your computer and use it in GitHub Desktop.
Download ZIP
web page that pulls the top stories from hacker news firebase using jQuery
Raw
hn.html
<html>
<head>
<title>Hacker News</title>
<link rel="stylesheet" href="../main.css" type="text/css" />
<style type="text/css" media="screen">
#gist {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var output = '';
$.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty', function(topStories){
$.each(topStories, function(i, val){
var story = $.getJSON('https://hacker-news.firebaseio.com/v0/item/' + val + '.json?print=pretty', function(story){
console.log(story.title + ": " + story.url);
$("#news").append('<li><a target="_blank" href="' + story.url + '">' + story.title + '</a></li>');
});
});
});
$("#btn-gist").click(function(){
$("#gist").toggle();
})
$("#btn-tag").click(function(){
$("li:contains(Python)").css("background-color", "blue");
$("li:contains(JavaScript)").css("background-color", "yellow");
$("li:contains(Tesla)").css("background-color", "red");
$("li:contains(Elon)").css("background-color", "red");
$("li:contains(AWS)").css("background-color", "orange");
$("li:contains(WordPress)").css("background-color", "#4169e1");
});
});
</script>
</head>
<body>
<h1>hn: top stories</h1>
<button id="btn-gist">view code</button><button id="btn-tag">highlight</button>
<div id="gist"><script src="https://gist.github.com/palumbo/9bff9eaeccaf2e20bc8751b2e1fd8d46.js"></script></div>
<div id="news-ctn">
<ul id="news"></ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment