JSFiddle - React, Tailwind, and code Playground
HTML
<input id="update" value="Update" type="button" />
<br/>
<div id="logs"></div>
CSS
#logs {
width:600px;
height:500px
}
.logHeader {
color: red;
}
JavaScript
var key = 'AIzaSyCEsBaStg4bOHA2Yp75OqfbjBkk_kq0cMw',
blogId = '7117612757607239790',
baseMatcher = 'JavaScript', // the needle.
allPosts = [],
isProcessing,
updateButton = $("#update"),
update = (function(button) {
var updateText = function(message, color) {
button.attr("value", message);
if (color) {
button.css("color", color);
}
},
revertButtonMessage = function() {
changeButtonMessage("Update", "black");
},
changeButtonMessage = function(message, color) {
var didIt;
updateText(message, color);
setTimeout(revertButtonMessage, 1000);
},
switchButtonMessage = function(message, color) {
updateText(message, color);
};
return {
changeButtonMessage: changeButtonMessage,
switchButtonMessage: switchButtonMessage,
revertButtonMessage: revertButtonMessage
};
} (updateButton)),
formatLink = function(text, href) {
return '<a href="' + href + '" target="_blank">' + text + '</a>';
},
getOccurences = function(haystack, needle) {
var matches = haystack.match(new RegExp(needle, "g"));
return matches ? matches.length: 0;
},
logger = (function() {
var logs = $("#logs"),
appendLine = function(line) {
logs.append((line ? line: "") + "<br/>");
};
return {
log: function(items) {
appendLine('<span class="logHeader">Logs #' + new Date().getTime() + '</span>');
appendLine();
$.each(items, function(i, item) {
appendLine(formatLink('#' + i, item.url) + ': ' + formatLink(item.title, "http://www.blogger.com/blogger.g?blogID=" + blogId + "#editor/target=post;postID=" + item.id) + ' (' + getOccurences(item.content, baseMatcher) + ')');
});
appendLine();
},
clear: function() {
logs.html('');
}
};
} ()),
filter = function(items, predicateForPass) {
var i = 0,
j = items.length,
item,...