Hacker News

Size
2,844 Kb
Views
12,144

How do I make an hacker news?

What is a hacker news? How do you make a hacker news? This script and codes were developed by Mei Weng Brough-Smyth on 06 November 2022, Sunday.

Hacker News Previews

Hacker News - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hacker News</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="col-xs-12"> <div class="row text-center"> <h1><a href = "https://news.ycombinator.com/"><i class="fa fa-hacker-news"></i></a> Hacker News</h1> </div> <div class="hackerNews"> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hacker News - Script Codes CSS Codes

.row { padding-top: 10px;
}
.comment { padding-top: 5px; font-style: oblique; text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden;
}

Hacker News - Script Codes JS Codes

var topStories = [];
var comments = [];
$.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(stories) { for (var i = 0; i < 11; i++) { topStories.push(stories[i]); } getStories(topStories);
});
var getStories = function (stories) { for (var j = 0, x = stories.length; j < x; j++) { var url = 'https://hacker-news.firebaseio.com/v0/item/' + stories[j] + '.json?print=pretty'; $.getJSON(url, function(story) { }).done(function(story) { console.log(story); var r = /:\/\/(.[^/]+)/; var regExUrl = story.url.match(r)[1]; var comUrl = "https://news.ycombinator.com/item?id=" + story.id; var e = "<div class='row'><div class='col-xs-2'>"; e += '<a href="' + story.url + '"><img class="img-thumbnail" src="http://images.shrinktheweb.com/xino.php?stwembed=1&stwaccesskeyid=80ce2dc4271658b&stwsize=sm&stwurl=' + story.url + ' style="border:2px solid black"></a>'; e += "</div>" e += "<div class='col-xs-10'>"; e += "<h4><a href='" + story.url + "'>" + story.title + "</a> <small> (" + regExUrl + ")<br>"; e += "<div class='" + story.id + " comment'></div></a>"; e += story.score + " points | " + moment.unix(story.time).fromNow() + " | "; var commentsLength = 0; if (story.hasOwnProperty("kids")) { commentsLength = story.kids.length; } if (commentsLength > 1) { e += "<a href='" + comUrl + "'>" + commentsLength + " comments</a>"; } else if (commentsLength == 1) { e += "<a href='" + comUrl + "'>" + 1 + " comment</a>"; } else { e += "<a href='" + comUrl + "'>Discuss</a>"; } e += "</small></h4>"; e += "</div></div></div>" $('.hackerNews').append(e); if (story.hasOwnProperty('kids')) { comments.push([story.id, story.kids[0]]); } else { comments.push([story.id, "<a href='" + comUrl + "'>Discuss</a></small>"]); } if (comments.length == x) { getComments(comments); } }); }
}
var getComments = function(comments) { for (var k = 0, x = comments.length; k < x; k++) { url = "https://hacker-news.firebaseio.com/v0/item/" + comments[k][1] + ".json"; $.getJSON(url, function(comment) { }).done(function(comment) { $("." + comment.parent).append(shorten(comment.text, 150)); }); }
}
function shorten(text, maxLength) { var ret = text; ret = ret.replace(/(<p[\s\S]+?>|<\/p>)/g, " "); if (ret.length > maxLength) { ret = ret.substr(0,maxLength-3) + "..."; } return ret;
}
Hacker News - Script Codes
Hacker News - Script Codes
Home Page Home
Developer Mei Weng Brough-Smyth
Username melatonind
Uploaded November 06, 2022
Rating 3
Size 2,844 Kb
Views 12,144
Do you need developer help for Hacker News?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mei Weng Brough-Smyth (melatonind) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!