JSFiddle - React, Tailwind, and code Playground
HTML
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,100' rel='stylesheet' type='text/css'>
<script src="http://pan.whatbox.ca:36975/reddit/libraries/markdown.js"></script>
<div id="searchbox">
<div id="search">
<input type="text" id="q" value="Perl6">
<button id="go">Search</button>
</div>
<div id="cresultsHead"></div>
<div id="comment-results"></div>
<div id="sresultsHead"></div>
<div id="submission-results"></div>
</div>
CSS
body, html {
font-family:'roboto', sans-serif;
}
#q {
margin-right:10px;
}
#go {
}
p {
margin-bottom:1em;
}
.date {
margin-left:5px;
font-size:.8em;
color:#999;
}
#cresultsHead {
position:relative;
font-weight:bold;
display:none;
border-radius: 5px;
padding:10px;
border:1px solid #778;
margin-top:25px;
background-color:#39f;
color:#fff;
cursor:pointer;
}
#sresultsHead {
position:relative;
font-weight:bold;
display:none;
border-radius: 5px;
padding:10px;
border:1px solid #778;
margin-top:5px;
background-color:#f93;
color:#fff;
cursor:pointer;
}
#comment-results {
display:none;
padding:10px;
color:#333;
width:600px;
}
#submission-results {
display:none;
padding:10px;
color:#333;
width:600px;
}
#comment-results .result {
position:relative;
margin-bottom:45px;
font-size:.8em;
}
#submission-results .result {
position:relative;
margin-bottom:25px;
font-size:.8em;
}
.author {
font-size:1.2em;
margin-left:30px;
margin-top:15px;
margin-bottom:3px;
font-weight:bold;
color:#555;
}
.body {
margin-left:30px;
color:#111;
font-size:1.3em;
}
#comment-results .subreddit {
margin-right:15px;
margin-bottom:2px;
font-weight:bold;
font-size:1.4em;
color: #36a;
}
#submission-results .subreddit {
margin-right:15px;
margin-bottom:2px;
font-weight:bold;
font-size:1.4em;
color: #a63;
}
#comment-results .link_title {
font-size:1.1em;
color: #39f;
font-weight:bold;
width:550px;
}
#submission-results .link_title {
font-size:1.1em;
color: #f93;
font-weight:bold;
width:550px;
}
#submission-results .link_title a {
font-size:1.1em;
color: #f93;
font-weight:bold;
width:550px;
text-decoration: none;
}
#search {
margin-top:25px;
display:block;
margin-left: auto;
margin-right: auto;
width: 400px;
}
input[type="text"] {
width:200px;
padding: 5px;
border: solid 5px #999;
box-shadow: inset 0 0 0 1px #666;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:focus, input[type="text"].focus {
border: solid 5px...
JavaScript
function go(q) {
var x = jQuery.ajax({
dataType: "json",
url: "https://api.pushshift.io/reddit/search",
data: {
"q": q,
"limit": 25
},
});
x.done(function (d) {
jQuery("#comment-results").html('');
var output = "";
jQuery.each(d.data, function (key,value) {
var d = new Date(value.created_utc * 1000).toLocaleString();
output+="<div class='result'>";
output+="<div class='subreddit'>" + value.subreddit + "</div>";
output+="<div class='link_title'>" + value.link_title + "</div>";
output+="<div class='author'>" + value.author + "<span class='date'>" + d +"</div>";
output+="<div class='body'>";
output+= SnuOwnd.getParser().render(value.body);
output+="</div>";
output+="</div>";
});
jQuery("#comment-results").append(output).text();
var count = d.data.length;
jQuery("#cresultsHead").html(count + " comments returned for " + q);
jQuery("#cresultsHead").show();
getSubmissions(q);
});
}
function getSubmissions(q) {
console.log("Entering getSubmissions");
var y = jQuery.ajax({
dataType: "json",
url: "https://api.pushshift.io/reddit/submissions",
data: {
"q": q,
"limit": 25
},
});
y.done(function (d) {
jQuery("#submission-results").html('');
var output = "";
jQuery.each(d.data, function (key,value) {
if (value.link_title === "" || value.link_title === undefined) {return;}
var d = new Date(value.created_utc * 1000).toLocaleString();
output+="<div class='result'>";
output+="<div class='subreddit'>" + value.subreddit + "</div>";
output+="<div class='link_title'><a href='" + value.url + "' target='_blank'>" + value.link_title + "</a></div>";
output+="</div>";
});
...